@nuxt/ui 2.11.1 → 2.12.0

package/dist/runtime/components/data/Table.vue.d.ts

@@ -13,7 +13,6 @@ declare const _default: import("vue").DefineComponent<{
     rows: {
         type: PropType<{
             [key: string]: any;
-            click?: Function | undefined;
         }[]>;
         default: () => never[];
     };
@@ -22,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
             [key: string]: any;
             key: string;
             sortable?: boolean | undefined;
+            sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
             direction?: "asc" | "desc" | undefined;
             class?: string | undefined;
         }[]>;
@@ -38,6 +38,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
+    sortMode: {
+        type: PropType<"auto" | "manual">;
+        default: string;
+    };
     sortButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -81,20 +85,20 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    sort: import("vue").Ref<{
-        direction: string;
+    sort: import("vue").WritableComputedRef<{
         column: string;
+        direction: 'asc' | 'desc';
     }>;
     columns: import("vue").ComputedRef<{
         [key: string]: any;
         key: string;
         sortable?: boolean | undefined;
+        sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
         direction?: "asc" | "desc" | undefined;
         class?: string | undefined;
     }[]>;
     rows: import("vue").ComputedRef<{
         [key: string]: any;
-        click?: Function | undefined;
     }[]>;
     selected: import("vue").WritableComputedRef<unknown[]>;
     indeterminate: import("vue").ComputedRef<boolean>;
@@ -120,7 +124,6 @@ declare const _default: import("vue").DefineComponent<{
     rows: {
         type: PropType<{
             [key: string]: any;
-            click?: Function | undefined;
         }[]>;
         default: () => never[];
     };
@@ -129,6 +132,7 @@ declare const _default: import("vue").DefineComponent<{
             [key: string]: any;
             key: string;
             sortable?: boolean | undefined;
+            sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
             direction?: "asc" | "desc" | undefined;
             class?: string | undefined;
         }[]>;
@@ -145,6 +149,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
+    sortMode: {
+        type: PropType<"auto" | "manual">;
+        default: string;
+    };
     sortButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -192,21 +200,22 @@ declare const _default: import("vue").DefineComponent<{
         direction: 'asc' | 'desc';
     };
     ui: any;
-    class: any;
-    modelValue: unknown[];
-    by: string | Function;
-    rows: {
-        [key: string]: any;
-        click?: Function | undefined;
-    }[];
     columns: {
         [key: string]: any;
         key: string;
         sortable?: boolean | undefined;
+        sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
         direction?: "asc" | "desc" | undefined;
         class?: string | undefined;
     }[];
+    class: any;
+    modelValue: unknown[];
+    by: string | Function;
+    rows: {
+        [key: string]: any;
+    }[];
     columnAttribute: string;
+    sortMode: "auto" | "manual";
     sortButton: Button;
     sortAscIcon: string;
     sortDescIcon: string;

package/dist/runtime/components/elements/Accordion.vue

@@ -108,20 +108,24 @@ export default defineComponent({
         }
       });
     }
-    function onEnter(el, done) {
+    function onEnter(_el, done) {
+      const el = _el;
       el.style.height = "0";
       el.offsetHeight;
       el.style.height = el.scrollHeight + "px";
       el.addEventListener("transitionend", done, { once: true });
     }
-    function onBeforeLeave(el) {
+    function onBeforeLeave(_el) {
+      const el = _el;
       el.style.height = el.scrollHeight + "px";
       el.offsetHeight;
     }
-    function onAfterEnter(el) {
+    function onAfterEnter(_el) {
+      const el = _el;
       el.style.height = "auto";
     }
-    function onLeave(el, done) {
+    function onLeave(_el, done) {
+      const el = _el;
       el.style.height = "0";
       el.addEventListener("transitionend", done, { once: true });
     }

package/dist/runtime/components/elements/Accordion.vue.d.ts

@@ -42,10 +42,10 @@ declare const _default: import("vue").DefineComponent<{
     }[]>;
     closeOthers: (currentIndex: number, e: Event) => void;
     omit: typeof omit;
-    onEnter: (el: HTMLElement, done: any) => void;
-    onBeforeLeave: (el: HTMLElement) => void;
-    onAfterEnter: (el: HTMLElement) => void;
-    onLeave: (el: HTMLElement, done: any) => void;
+    onEnter: (_el: Element, done: () => void) => void;
+    onBeforeLeave: (_el: Element) => void;
+    onAfterEnter: (_el: Element) => void;
+    onLeave: (_el: Element, done: () => void) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<AccordionItem[]>;

package/dist/runtime/components/elements/Alert.vue

@@ -17,12 +17,12 @@
         </p>
 
         <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
         </div>
       </div>
       <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
         <template v-if="!description && !$slots.description && actions.length">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
         </template>
 
         <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
@@ -113,11 +113,17 @@ export default defineComponent({
         variant?.replaceAll("{color}", props.color)
       ), props.class);
     });
+    function onAction(action) {
+      if (action.click) {
+        action.click();
+      }
+    }
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
       alertClass,
+      onAction,
       twMerge
     };
   }

package/dist/runtime/components/elements/Alert.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button, AlertVariant } from '../../types';
+import type { Avatar, Button, AlertVariant, AlertAction } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
@@ -22,9 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => Button;
     };
     actions: {
-        type: PropType<(Button & {
-            click?: Function | undefined;
-        })[]>;
+        type: PropType<AlertAction[]>;
         default: () => never[];
     };
     color: {
@@ -51,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     alertClass: import("vue").ComputedRef<string>;
+    onAction: (action: AlertAction) => void;
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
@@ -74,9 +73,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => Button;
     };
     actions: {
-        type: PropType<(Button & {
-            click?: Function | undefined;
-        })[]>;
+        type: PropType<AlertAction[]>;
         default: () => never[];
     };
     color: {
@@ -105,9 +102,7 @@ declare const _default: import("vue").DefineComponent<{
     icon: string;
     avatar: Avatar;
     closeButton: Button;
-    actions: (Button & {
-        click?: Function | undefined;
-    })[];
+    actions: AlertAction[];
     color: any;
     class: any;
     variant: AlertVariant;

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -180,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
     icon: string;
     color: any;
     type: string;
+    leading: boolean;
     class: any;
     label: string;
     loading: boolean;
@@ -191,7 +192,6 @@ declare const _default: import("vue").DefineComponent<{
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
-    leading: boolean;
     square: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Chip.vue.d.ts

@@ -81,10 +81,10 @@ declare const _default: import("vue").DefineComponent<{
     size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
     ui: any;
     color: any;
+    inset: boolean;
+    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
     class: any;
     text: string | number;
-    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
-    inset: boolean;
     show: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Dropdown.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable-next-line vue/no-template-shadow -->
   <HMenu v-slot="{ open }" as="div" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HMenuButton
       ref="trigger"
@@ -19,23 +20,24 @@
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
+
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'labelClass', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'class', 'click'])" custom>
                 <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
                   <component
                     :is="!!href ? 'a' : 'button'"
                     :href="!itemDisabled ? href : undefined"
                     :rel="rel"
                     :target="target"
-                    :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                    :class="twMerge(twJoin(ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled), item.class)"
                     @click="onClick($event, item, { href, navigate, close, isExternal })"
                   >
                     <slot :name="item.slot || 'item'" :item="item">
-                      <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
+                      <UIcon v-if="item.icon" :name="item.icon" :class="twMerge(twJoin(ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive), item.iconClass)" />
                       <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
-                      <span :class="ui.item.label">{{ item.label }}</span>
+                      <span :class="twMerge(ui.item.label, item.labelClass)">{{ item.label }}</span>
 
                       <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
                         <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
@@ -53,9 +55,10 @@
 </template>
 
 <script>
-import { defineComponent, ref, computed, toRef, onMounted, resolveComponent } from "vue";
+import { defineComponent, ref, computed, watch, toRef, onMounted, resolveComponent } from "vue";
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from "@headlessui/vue";
 import { defu } from "defu";
+import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import UKbd from "../elements/Kbd.vue";
@@ -86,6 +89,10 @@ export default defineComponent({
       default: "click",
       validator: (value) => ["click", "hover"].includes(value)
     },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -111,7 +118,8 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  setup(props) {
+  emits: ["update:open"],
+  setup(props, { emit }) {
     const { ui, attrs } = useUI("dropdown", toRef(props, "ui"), config, toRef(props, "class"));
     const popper = computed(() => defu(props.mode === "hover" ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper));
     const [trigger, container] = usePopper(popper.value);
@@ -119,18 +127,41 @@ export default defineComponent({
     let openTimeout = null;
     let closeTimeout = null;
     onMounted(() => {
-      setTimeout(() => {
-        const menuProvides = trigger.value?.$.provides;
-        if (!menuProvides) {
-          return;
-        }
-        const menuProvidesSymbols = Object.getOwnPropertySymbols(menuProvides);
-        menuApi.value = menuProvidesSymbols.length && menuProvides[menuProvidesSymbols[0]];
-      }, 200);
+      const menuProvides = trigger.value?.$.provides;
+      if (!menuProvides) {
+        return;
+      }
+      const menuProvidesSymbols = Object.getOwnPropertySymbols(menuProvides);
+      menuApi.value = menuProvidesSymbols.length && menuProvides[menuProvidesSymbols[0]];
+      if (props.open) {
+        menuApi.value?.openMenu();
+      }
     });
     const containerStyle = computed(() => {
+      if (props.mode !== "hover") {
+        return {};
+      }
       const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
-      return props.mode === "hover" ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {};
+      const placement = popper.value.placement?.split("-")[0];
+      const padding = `${offsetDistance}px`;
+      if (placement === "top" || placement === "bottom") {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding
+        };
+      } else if (placement === "left" || placement === "right") {
+        return {
+          paddingLeft: padding,
+          paddingRight: padding
+        };
+      } else {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding,
+          paddingLeft: padding,
+          paddingRight: padding
+        };
+      }
     });
     function onMouseOver() {
       if (props.mode !== "hover" || !menuApi.value) {
@@ -173,6 +204,22 @@ export default defineComponent({
         close();
       }
     }
+    watch(() => props.open, (newValue, oldValue) => {
+      if (!menuApi.value)
+        return;
+      if (oldValue === void 0 || newValue === oldValue)
+        return;
+      if (newValue) {
+        menuApi.value.openMenu();
+      } else {
+        menuApi.value.closeMenu();
+      }
+    });
+    watch(() => menuApi.value?.menuState, (newValue, oldValue) => {
+      if (oldValue === void 0 || newValue === oldValue)
+        return;
+      emit("update:open", newValue === 0);
+    });
     const NuxtLink = resolveComponent("NuxtLink");
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -187,6 +234,8 @@ export default defineComponent({
       onMouseLeave,
       onClick,
       omit,
+      twMerge,
+      twJoin,
       NuxtLink
     };
   }

package/dist/runtime/components/elements/Dropdown.vue.d.ts

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import { twJoin } from 'tailwind-merge';
 import { omit } from '../../utils';
 import type { DropdownItem, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
@@ -11,6 +12,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -44,11 +49,25 @@ declare const _default: import("vue").DefineComponent<{
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
+    } | {
         paddingTop: string;
         paddingBottom: string;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
     } | {
+        paddingLeft: string;
+        paddingRight: string;
         paddingTop?: undefined;
         paddingBottom?: undefined;
+    } | {
+        paddingTop: string;
+        paddingBottom: string;
+        paddingLeft: string;
+        paddingRight: string;
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
@@ -59,8 +78,10 @@ declare const _default: import("vue").DefineComponent<{
         isExternal: any;
     }) => void;
     omit: typeof omit;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+    twJoin: typeof twJoin;
     NuxtLink: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<DropdownItem[][]>;
         default: () => never[];
@@ -70,6 +91,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -94,12 +119,15 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: () => {};
     };
-}>>, {
+}>> & {
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+}, {
     ui: any;
     popper: PopperOptions;
     class: any;
     disabled: boolean;
     items: DropdownItem[][];
+    open: boolean;
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;

package/dist/runtime/components/elements/Link.vue

@@ -21,7 +21,7 @@
       :role="disabled ? 'link' : undefined"
       :rel="rel"
       :target="target"
-      :class="active ? activeClass : resolveLinkClass(route, $route, { isActive, isExactActive })"
+      :class="active !== undefined ? (active ? activeClass : inactiveClass) : resolveLinkClass(route, $route, { isActive, isExactActive })"
       @click="(e) => !isExternal && navigate(e)"
     >
       <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
@@ -47,7 +47,7 @@ export default defineComponent({
     },
     active: {
       type: Boolean,
-      default: false
+      default: void 0
     },
     exact: {
       type: Boolean,

package/dist/runtime/components/forms/Form.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { provide, ref, defineComponent } from "vue";
+import { provide, ref, defineComponent, onUnmounted, onMounted } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { uid } from "../../utils/uid";
 class FormException extends Error {
@@ -37,10 +37,15 @@ export default defineComponent({
   emits: ["submit", "error"],
   setup(props, { expose, emit }) {
     const bus = useEventBus(`form-${uid()}`);
-    bus.on(async (event) => {
-      if (event.type !== "submit" && props.validateOn?.includes(event.type)) {
-        await validate(event.path, { silent: true });
-      }
+    onMounted(() => {
+      bus.on(async (event) => {
+        if (event.type !== "submit" && props.validateOn?.includes(event.type)) {
+          await validate(event.path, { silent: true });
+        }
+      });
+    });
+    onUnmounted(() => {
+      bus.reset();
     });
     const errors = ref([]);
     provide("form-errors", errors);
@@ -83,7 +88,8 @@ export default defineComponent({
       }
       return props.state;
     }
-    async function onSubmit(event) {
+    async function onSubmit(payload) {
+      const event = payload;
       try {
         if (props.validateOn?.includes("submit")) {
           await validate();
@@ -120,6 +126,9 @@ export default defineComponent({
           errors.value = errs;
         }
       },
+      async submit() {
+        await onSubmit(new Event("submit"));
+      },
       getErrors(path) {
         if (path) {
           return errors.value.filter((err) => err.path === path);
@@ -128,7 +137,7 @@ export default defineComponent({
       },
       clear(path) {
         if (path) {
-          errors.value = errors.value.filter((err) => err.path === path);
+          errors.value = errors.value.filter((err) => err.path !== path);
         } else {
           errors.value = [];
         }

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

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string[];
     };
 }, {
-    onSubmit: (event: SubmitEvent) => Promise<void>;
+    onSubmit: (payload: Event) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "submit")[], "error" | "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     schema: {
         type: PropType<ZodSchema<any, import("zod").ZodTypeDef, any>> | PropType<YupObjectSchema<any, import("yup").AnyObject, any, "">> | PropType<JoiSchema> | PropType<ValibotObjectSchema<any>>;

package/dist/runtime/components/forms/Input.vue

@@ -8,7 +8,7 @@
       :type="type"
       :required="required"
       :placeholder="placeholder"
-      :disabled="disabled || loading"
+      :disabled="disabled"
       :class="inputClass"
       v-bind="attrs"
       @input="onInput"

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

@@ -239,6 +239,7 @@ declare const _default: import("vue").DefineComponent<{
     color: any;
     type: string;
     name: string;
+    leading: boolean;
     class: any;
     modelValue: string | number;
     loading: boolean;
@@ -251,7 +252,6 @@ declare const _default: import("vue").DefineComponent<{
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
-    leading: boolean;
     autofocus: boolean;
     inputClass: string;
     autofocusDelay: number;