@indielayer/ui 1.14.5 → 1.15.0

package/lib/components/input/Input.vue.js

@@ -1,17 +1,17 @@
-import { defineComponent as j, useAttrs as H, computed as O, ref as h, watch as W, openBlock as s, createBlock as l, normalizeStyle as X, unref as r, normalizeClass as a, withCtx as D, createElementVNode as y, renderSlot as v, createCommentVNode as u, mergeProps as G, toHandlers as J } from "vue";
-import { useTheme as K } from "../../composables/useTheme.js";
-import { useColors as M } from "../../composables/useColors.js";
-import { useCommon as S } from "../../composables/useCommon.js";
+import { defineComponent as W, useAttrs as X, computed as c, ref as v, watch as D, openBlock as i, createBlock as s, normalizeStyle as G, unref as r, normalizeClass as a, withCtx as J, createElementVNode as w, renderSlot as S, createCommentVNode as m, mergeProps as K, toHandlers as M } from "vue";
+import { useTheme as Q } from "../../composables/useTheme.js";
+import { useColors as U } from "../../composables/useColors.js";
+import { useCommon as k } from "../../composables/useCommon.js";
 import { useInputtable as f } from "../../composables/useInputtable.js";
-import { useInteractive as w } from "../../composables/useInteractive.js";
-import { eyeIcon as Q, eyeVisibleIcon as U } from "../../common/icons.js";
-import Y from "../label/Label.vue.js";
-import d from "../icon/Icon.vue.js";
-import Z from "../inputFooter/InputFooter.vue.js";
-const x = { class: "relative" }, _ = ["id", "disabled", "min", "max", "minlength", "maxlength", "step", "dir", "name", "placeholder", "readonly", "type", "value"], ee = {
-  ...S.props(),
-  ...M.props("primary"),
-  ...w.props(),
+import { useInteractive as z } from "../../composables/useInteractive.js";
+import { closeIcon as Y, eyeIcon as Z, eyeVisibleIcon as x } from "../../common/icons.js";
+import _ from "../label/Label.vue.js";
+import p from "../icon/Icon.vue.js";
+import ee from "../inputFooter/InputFooter.vue.js";
+const re = { class: "relative" }, oe = ["id", "disabled", "min", "max", "minlength", "maxlength", "step", "dir", "name", "placeholder", "readonly", "type", "value"], ne = {
+  ...k.props(),
+  ...U.props("primary"),
+  ...z.props(),
   ...f.props(),
   showPasswordToggle: {
     type: Boolean,
@@ -34,74 +34,79 @@ const x = { class: "relative" }, _ = ["id", "disabled", "min", "max", "minlength
     default: "text"
   },
   step: [Number, String],
-  block: Boolean
-}, re = {
+  block: Boolean,
+  showCounter: Boolean,
+  clearable: Boolean
+}, te = {
   name: "XInput",
   validators: {
-    ...S.validators()
+    ...k.validators()
   }
-}, de = /* @__PURE__ */ j({
-  ...re,
-  props: ee,
+}, ge = /* @__PURE__ */ W({
+  ...te,
+  props: ne,
   emits: f.emits(),
-  setup(k, { expose: z, emit: N }) {
-    const o = k, I = N, c = H(), C = O(() => Object.keys(c).reduce((e, i) => (i.startsWith("data-") && (e[i] = c[i]), e), {})), g = h(null), t = h(o.type);
-    W(() => o.type, (e) => {
-      t.value = e;
+  setup(C, { expose: I, emit: N }) {
+    const o = C, V = N, g = X(), $ = c(() => Object.keys(g).reduce((e, n) => (n.startsWith("data-") && (e[n] = g[n]), e), {})), h = v(null), l = v(o.type);
+    D(() => o.type, (e) => {
+      l.value = e;
     });
-    function R(e) {
+    function B(e) {
       if (!e.target)
         return;
-      const i = e.target;
+      const n = e.target;
       if (o.type === "number") {
-        const p = Number(i.value);
-        typeof o.min < "u" && p < Number(o.min) && (i.value = o.min.toString()), typeof o.max < "u" && p > Number(o.max) && (i.value = o.max.toString());
+        const u = Number(n.value);
+        typeof o.min < "u" && u < Number(o.min) && (n.value = o.min.toString()), typeof o.max < "u" && u > Number(o.max) && (n.value = o.max.toString());
       }
     }
-    function V() {
-      t.value = t.value === "password" ? "text" : "password";
+    function L() {
+      l.value = l.value === "password" ? "text" : "password";
     }
-    const { focus: b, blur: $ } = w(g), {
-      errorInternal: m,
-      hideFooterInternal: L,
-      isInsideForm: P,
-      inputListeners: B,
-      reset: T,
-      validate: q,
-      setError: A
-    } = f(o, { focus: b, emit: I }), { styles: E, classes: n, className: F } = K("Input", {}, o, { errorInternal: m });
-    return z({ focus: b, blur: $, reset: T, validate: q, setError: A }), (e, i) => (s(), l(Y, {
-      style: X(r(E)),
+    const R = c(() => o.clearable && o.modelValue !== ""), { focus: b, blur: P } = z(h), {
+      errorInternal: d,
+      hideFooterInternal: T,
+      isInsideForm: q,
+      inputListeners: A,
+      reset: y,
+      validate: E,
+      setError: F
+    } = f(o, { focus: b, emit: V }), j = c(() => {
+      const e = o.modelValue;
+      return e ? String(e).length : 0;
+    }), { styles: H, classes: t, className: O } = Q("Input", {}, o, { errorInternal: d });
+    return I({ focus: b, blur: P, reset: y, validate: E, setError: F }), (e, n) => (i(), s(_, {
+      style: G(r(H)),
       block: e.block,
       disabled: e.disabled,
       required: e.required,
-      "is-inside-form": r(P),
+      "is-inside-form": r(q),
       label: e.label,
       class: a([
-        r(F),
-        r(n).wrapper
+        r(O),
+        r(t).wrapper
       ]),
       tooltip: e.tooltip
     }, {
-      default: D(() => [
-        y("div", x, [
-          v(e.$slots, "prefix", {}, () => [
-            e.iconLeft || e.icon ? (s(), l(d, {
+      default: J(() => [
+        w("div", re, [
+          S(e.$slots, "prefix", {}, () => [
+            e.iconLeft || e.icon ? (i(), s(p, {
               key: 0,
               size: e.size,
               icon: e.iconLeft || e.icon,
-              class: a(["ml-2 left-1", r(n).icon])
-            }, null, 8, ["size", "icon", "class"])) : u("", !0)
+              class: a(["ml-2 left-1", r(t).icon])
+            }, null, 8, ["size", "icon", "class"])) : m("", !0)
           ]),
-          y("input", G({
+          w("input", K({
             id: e.id,
             ref_key: "elRef",
-            ref: g,
+            ref: h,
             class: [
-              r(n).input,
+              r(t).input,
               e.type === "password" ? "pr-10" : "",
               // error
-              r(m) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-input-border)]",
+              r(d) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-input-border)]",
               {
                 "!pl-10": e.iconLeft || e.icon,
                 "!pr-10": e.iconRight
@@ -117,34 +122,44 @@ const x = { class: "relative" }, _ = ["id", "disabled", "min", "max", "minlength
             name: e.name,
             placeholder: e.placeholder,
             readonly: e.readonly,
-            type: t.value,
+            type: l.value,
             value: typeof e.modelValue < "u" ? e.modelValue : ""
-          }, C.value, J(r(B), !0), { onChange: R }), null, 16, _),
-          v(e.$slots, "suffix", {}, () => [
-            e.iconRight ? (s(), l(d, {
+          }, $.value, M(r(A), !0), { onChange: B }), null, 16, oe),
+          S(e.$slots, "suffix", {}, () => [
+            R.value ? (i(), s(p, {
               key: 0,
               size: e.size,
-              icon: e.iconRight,
-              class: a(["mr-2 right-1", r(n).icon])
-            }, null, 8, ["size", "icon", "class"])) : e.type === "password" && e.showPasswordToggle ? (s(), l(d, {
+              icon: r(Y),
+              class: a(["mr-2 right-1 cursor-pointer", r(t).icon]),
+              onClick: n[0] || (n[0] = (u) => r(y)())
+            }, null, 8, ["size", "icon", "class"])) : m("", !0),
+            e.iconRight ? (i(), s(p, {
               key: 1,
               size: e.size,
-              icon: t.value === "password" ? r(Q) : r(U),
-              class: a(["mr-2 right-1 cursor-pointer", r(n).icon]),
-              onClick: i[0] || (i[0] = (p) => V())
-            }, null, 8, ["size", "icon", "class"])) : u("", !0)
+              icon: e.iconRight,
+              class: a(["mr-2 right-1", r(t).icon])
+            }, null, 8, ["size", "icon", "class"])) : e.type === "password" && e.showPasswordToggle ? (i(), s(p, {
+              key: 2,
+              size: e.size,
+              icon: l.value === "password" ? r(Z) : r(x),
+              class: a(["mr-2 right-1 cursor-pointer", r(t).icon]),
+              onClick: n[1] || (n[1] = (u) => L())
+            }, null, 8, ["size", "icon", "class"])) : m("", !0)
           ])
         ]),
-        r(L) ? u("", !0) : (s(), l(Z, {
+        r(T) ? m("", !0) : (i(), s(ee, {
           key: 0,
-          error: r(m),
-          helper: e.helper
-        }, null, 8, ["error", "helper"]))
+          error: r(d),
+          helper: e.helper,
+          "character-count": j.value,
+          "max-characters": e.maxlength,
+          "show-counter": e.showCounter
+        }, null, 8, ["error", "helper", "character-count", "max-characters", "show-counter"]))
       ]),
       _: 3
     }, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
   }
 });
 export {
-  de as default
+  ge as default
 };

package/lib/components/inputFooter/InputFooter.vue.d.ts

@@ -3,16 +3,27 @@ import { type ThemeComponent } from '../../composables/useTheme';
 declare const inputFooterProps: {
     helper: StringConstructor;
     error: StringConstructor;
+    characterCount: NumberConstructor;
+    maxCharacters: (StringConstructor | NumberConstructor)[];
+    showCounter: BooleanConstructor;
 };
 export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>;
-type InternalClasses = 'wrapper' | 'helperText' | 'errorText';
+type InternalClasses = 'wrapper' | 'helperText' | 'errorText' | 'container' | 'counter';
 export interface InputFooterTheme extends ThemeComponent<InputFooterProps, InternalClasses> {
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     helper: StringConstructor;
     error: StringConstructor;
+    characterCount: NumberConstructor;
+    maxCharacters: (StringConstructor | NumberConstructor)[];
+    showCounter: BooleanConstructor;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     helper: StringConstructor;
     error: StringConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    characterCount: NumberConstructor;
+    maxCharacters: (StringConstructor | NumberConstructor)[];
+    showCounter: BooleanConstructor;
+}>> & Readonly<{}>, {
+    showCounter: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/components/inputFooter/InputFooter.vue.js

@@ -1,27 +1,43 @@
-import { defineComponent as i, openBlock as t, createElementBlock as s, normalizeClass as n, unref as e, normalizeStyle as u, toDisplayString as p, createCommentVNode as f } from "vue";
-import { useTheme as h } from "../../composables/useTheme.js";
-const y = {
+import { defineComponent as v, computed as u, openBlock as a, createElementBlock as s, normalizeClass as n, unref as r, normalizeStyle as f, createElementVNode as y, toDisplayString as l, createCommentVNode as c } from "vue";
+import { useTheme as k } from "../../composables/useTheme.js";
+const N = {
   helper: String,
-  error: String
-}, d = { name: "XInputFooter" }, g = /* @__PURE__ */ i({
-  ...d,
-  props: y,
-  setup(l) {
-    const a = l, { styles: c, classes: o, className: m } = h("InputFooter", {}, a);
-    return (r, k) => (t(), s("div", {
-      class: n([e(m), e(o).wrapper]),
-      style: u(e(c))
+  error: String,
+  characterCount: Number,
+  maxCharacters: [Number, String],
+  showCounter: Boolean
+}, g = { name: "XInputFooter" }, b = /* @__PURE__ */ v({
+  ...g,
+  props: N,
+  setup(i) {
+    const e = i, { styles: m, classes: o, className: h } = k("InputFooter", {}, e), p = u(() => e.maxCharacters ? Number(e.maxCharacters) : void 0), C = u(() => e.characterCount === void 0 ? "" : p.value ? `${e.characterCount}/${p.value}` : `${e.characterCount}`), d = u(() => e.error || e.helper);
+    return (t, S) => (a(), s("div", {
+      class: n([r(h), r(o).wrapper]),
+      style: f(r(m))
     }, [
-      r.error ? (t(), s("p", {
+      d.value || t.showCounter ? (a(), s("div", {
         key: 0,
-        class: n(e(o).errorText)
-      }, p(r.error), 3)) : r.helper ? (t(), s("p", {
-        key: 1,
-        class: n(e(o).helperText)
-      }, p(r.helper), 3)) : f("", !0)
+        class: n(r(o).container)
+      }, [
+        y("div", null, [
+          t.error ? (a(), s("p", {
+            key: 0,
+            class: n(r(o).errorText)
+          }, l(t.error), 3)) : t.helper ? (a(), s("p", {
+            key: 1,
+            class: n(r(o).helperText)
+          }, l(t.helper), 3)) : c("", !0)
+        ]),
+        t.showCounter ? (a(), s("p", {
+          key: 0,
+          class: n(r(o).counter),
+          role: "status",
+          "aria-live": "polite"
+        }, l(C.value), 3)) : c("", !0)
+      ], 2)) : c("", !0)
     ], 6));
   }
 });
 export {
-  g as default
+  b as default
 };

package/lib/components/inputFooter/theme/InputFooter.base.theme.js

@@ -1,8 +1,10 @@
 const e = {
   classes: {
     wrapper: "text-xs mt-1",
+    container: "flex justify-between items-start gap-2",
     helperText: "text-secondary-500 dark:text-secondary-400",
-    errorText: "text-error-500 dark:text-error-400"
+    errorText: "text-error-500 dark:text-error-400",
+    counter: "text-secondary-500 dark:text-secondary-400 whitespace-nowrap"
   }
 }, t = e;
 export {

package/lib/components/inputFooter/theme/InputFooter.carbon.theme.js

@@ -1,8 +1,10 @@
 const e = {
   classes: {
     wrapper: "text-xs mt-1",
+    container: "flex justify-between items-start gap-2",
     helperText: "text-secondary-500 dark:text-secondary-400",
-    errorText: "text-error-500 dark:text-error-400"
+    errorText: "text-error-500 dark:text-error-400",
+    counter: "text-secondary-500 dark:text-secondary-400 whitespace-nowrap"
   }
 }, t = e;
 export {

package/lib/components/popover/Popover.vue.d.ts

@@ -182,11 +182,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         show: number;
         hide: number;
     };
+    container: string | boolean | Record<string, any>;
     positioningDisabled: boolean;
     placement: Placement;
     triggers: TriggerEvent[];
     hideArrow: boolean;
-    container: string | boolean | Record<string, any>;
     strategy: "absolute" | "fixed";
     autoHide: boolean | ((event: Event) => boolean);
     shown: boolean;

package/lib/components/select/Select.vue.d.ts

@@ -170,8 +170,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             hideFooter: boolean;
             rules: unknown[];
             skipFormRegistry: boolean;
+            clearable: boolean;
             showPasswordToggle: boolean;
             dir: "rtl" | "ltr";
+            showCounter: boolean;
         }> & Omit<{
             [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
             readonly disabled: boolean;
@@ -187,8 +189,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             readonly hideFooter: boolean;
             readonly rules: unknown[];
             readonly skipFormRegistry: boolean;
+            readonly clearable: boolean;
             readonly showPasswordToggle: boolean;
             readonly dir: "rtl" | "ltr";
+            readonly showCounter: boolean;
             readonly error?: string | undefined;
             readonly name?: string | undefined;
             readonly icon?: string | undefined;
@@ -229,6 +233,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             };
             step: (StringConstructor | NumberConstructor)[];
             block: BooleanConstructor;
+            showCounter: BooleanConstructor;
+            clearable: BooleanConstructor;
             modelValue: {
                 readonly type: PropType<string | number | boolean | object | any[] | undefined>;
                 readonly default: undefined;
@@ -269,7 +275,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             };
         }>> & Readonly<{
             [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-        }>, "disabled" | "type" | "color" | "size" | "block" | "loading" | "loadingStatus" | "modelValue" | "readonly" | "required" | "validateOnInput" | "hideFooter" | "rules" | "skipFormRegistry" | "showPasswordToggle" | "dir">;
+        }>, "disabled" | "type" | "color" | "size" | "block" | "loading" | "loadingStatus" | "modelValue" | "readonly" | "required" | "validateOnInput" | "hideFooter" | "rules" | "skipFormRegistry" | "clearable" | "showPasswordToggle" | "dir" | "showCounter">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -307,6 +313,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             };
             step: (StringConstructor | NumberConstructor)[];
             block: BooleanConstructor;
+            showCounter: BooleanConstructor;
+            clearable: BooleanConstructor;
             modelValue: {
                 readonly type: PropType<string | number | boolean | object | any[] | undefined>;
                 readonly default: undefined;
@@ -368,8 +376,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             hideFooter: boolean;
             rules: unknown[];
             skipFormRegistry: boolean;
+            clearable: boolean;
             showPasswordToggle: boolean;
             dir: "rtl" | "ltr";
+            showCounter: boolean;
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -405,8 +415,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         hideFooter: boolean;
         rules: unknown[];
         skipFormRegistry: boolean;
+        clearable: boolean;
         showPasswordToggle: boolean;
         dir: "rtl" | "ltr";
+        showCounter: boolean;
     }> & Omit<Readonly<import("vue").ExtractPropTypes<{
         showPasswordToggle: {
             type: BooleanConstructor;
@@ -430,6 +442,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         };
         step: (StringConstructor | NumberConstructor)[];
         block: BooleanConstructor;
+        showCounter: BooleanConstructor;
+        clearable: BooleanConstructor;
         modelValue: {
             readonly type: PropType<string | number | boolean | object | any[] | undefined>;
             readonly default: undefined;
@@ -470,7 +484,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         };
     }>> & Readonly<{
         [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-    }>, "blur" | "focus" | "reset" | "validate" | "setError" | ("disabled" | "type" | "color" | "size" | "block" | "loading" | "loadingStatus" | "modelValue" | "readonly" | "required" | "validateOnInput" | "hideFooter" | "rules" | "skipFormRegistry" | "showPasswordToggle" | "dir")> & import("vue").ShallowUnwrapRef<{
+    }>, "blur" | "focus" | "reset" | "validate" | "setError" | ("disabled" | "type" | "color" | "size" | "block" | "loading" | "loadingStatus" | "modelValue" | "readonly" | "required" | "validateOnInput" | "hideFooter" | "rules" | "skipFormRegistry" | "clearable" | "showPasswordToggle" | "dir" | "showCounter")> & import("vue").ShallowUnwrapRef<{
         focus: () => void | undefined;
         blur: () => void | undefined;
         reset: () => void;
@@ -499,8 +513,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             hideFooter: boolean;
             rules: unknown[];
             skipFormRegistry: boolean;
+            clearable: boolean;
             showPasswordToggle: boolean;
             dir: "rtl" | "ltr";
+            showCounter: boolean;
         }> & Omit<{
             [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
             readonly disabled: boolean;
@@ -516,8 +532,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             readonly hideFooter: boolean;
             readonly rules: unknown[];
             readonly skipFormRegistry: boolean;
+            readonly clearable: boolean;
             readonly showPasswordToggle: boolean;
             readonly dir: "rtl" | "ltr";
+            readonly showCounter: boolean;
             readonly error?: string | undefined;
             readonly name?: string | undefined;
             readonly icon?: string | undefined;
@@ -558,6 +576,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             };
             step: (StringConstructor | NumberConstructor)[];
             block: BooleanConstructor;
+            showCounter: BooleanConstructor;
+            clearable: BooleanConstructor;
             modelValue: {
                 readonly type: PropType<string | number | boolean | object | any[] | undefined>;
                 readonly default: undefined;
@@ -598,7 +618,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             };
         }>> & Readonly<{
             [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-        }>, "disabled" | "type" | "color" | "size" | "block" | "loading" | "loadingStatus" | "modelValue" | "readonly" | "required" | "validateOnInput" | "hideFooter" | "rules" | "skipFormRegistry" | "showPasswordToggle" | "dir">;
+        }>, "disabled" | "type" | "color" | "size" | "block" | "loading" | "loadingStatus" | "modelValue" | "readonly" | "required" | "validateOnInput" | "hideFooter" | "rules" | "skipFormRegistry" | "clearable" | "showPasswordToggle" | "dir" | "showCounter">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -636,6 +656,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             };
             step: (StringConstructor | NumberConstructor)[];
             block: BooleanConstructor;
+            showCounter: BooleanConstructor;
+            clearable: BooleanConstructor;
             modelValue: {
                 readonly type: PropType<string | number | boolean | object | any[] | undefined>;
                 readonly default: undefined;
@@ -697,8 +719,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             hideFooter: boolean;
             rules: unknown[];
             skipFormRegistry: boolean;
+            clearable: boolean;
             showPasswordToggle: boolean;
             dir: "rtl" | "ltr";
+            showCounter: boolean;
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -734,8 +758,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         hideFooter: boolean;
         rules: unknown[];
         skipFormRegistry: boolean;
+        clearable: boolean;
         showPasswordToggle: boolean;
         dir: "rtl" | "ltr";
+        showCounter: boolean;
     }> & Omit<Readonly<import("vue").ExtractPropTypes<{
         showPasswordToggle: {
             type: BooleanConstructor;
@@ -759,6 +785,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         };
         step: (StringConstructor | NumberConstructor)[];
         block: BooleanConstructor;
+        showCounter: BooleanConstructor;
+        clearable: BooleanConstructor;
         modelValue: {
             readonly type: PropType<string | number | boolean | object | any[] | undefined>;
             readonly default: undefined;
@@ -799,7 +827,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         };
     }>> & Readonly<{
         [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-    }>, "blur" | "focus" | "reset" | "validate" | "setError" | ("disabled" | "type" | "color" | "size" | "block" | "loading" | "loadingStatus" | "modelValue" | "readonly" | "required" | "validateOnInput" | "hideFooter" | "rules" | "skipFormRegistry" | "showPasswordToggle" | "dir")> & import("vue").ShallowUnwrapRef<{
+    }>, "blur" | "focus" | "reset" | "validate" | "setError" | ("disabled" | "type" | "color" | "size" | "block" | "loading" | "loadingStatus" | "modelValue" | "readonly" | "required" | "validateOnInput" | "hideFooter" | "rules" | "skipFormRegistry" | "clearable" | "showPasswordToggle" | "dir" | "showCounter")> & import("vue").ShallowUnwrapRef<{
         focus: () => void | undefined;
         blur: () => void | undefined;
         reset: () => void;
@@ -913,11 +941,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
                     show: number;
                     hide: number;
                 };
+                container: string | boolean | Record<string, any>;
                 positioningDisabled: boolean;
                 placement: import("floating-vue").Placement;
                 triggers: import("floating-vue").TriggerEvent[];
                 hideArrow: boolean;
-                container: string | boolean | Record<string, any>;
                 strategy: "absolute" | "fixed";
                 autoHide: boolean | ((event: Event) => boolean);
                 shown: boolean;
@@ -931,11 +959,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
                     show: number;
                     hide: number;
                 };
+                readonly container: string | boolean | Record<string, any>;
                 readonly positioningDisabled: boolean;
                 readonly placement: import("floating-vue").Placement;
                 readonly triggers: import("floating-vue").TriggerEvent[];
                 readonly hideArrow: boolean;
-                readonly container: string | boolean | Record<string, any>;
                 readonly strategy: "absolute" | "fixed";
                 readonly autoHide: boolean | ((event: Event) => boolean);
                 readonly shown: boolean;
@@ -1022,7 +1050,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
                 "onClose-group"?: ((...args: any[]) => any) | undefined;
                 "onClose-directive"?: ((...args: any[]) => any) | undefined;
                 "onAuto-hide"?: ((...args: any[]) => any) | undefined;
-            }>, "disabled" | "delay" | "positioningDisabled" | "placement" | "triggers" | "hideArrow" | "container" | "strategy" | "autoHide" | "shown" | "handleResize" | "instantMove" | "eagerMount" | "computeTransformOrigin">;
+            }>, "disabled" | "delay" | "container" | "positioningDisabled" | "placement" | "triggers" | "hideArrow" | "strategy" | "autoHide" | "shown" | "handleResize" | "instantMove" | "eagerMount" | "computeTransformOrigin">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -1109,11 +1137,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
                     show: number;
                     hide: number;
                 };
+                container: string | boolean | Record<string, any>;
                 positioningDisabled: boolean;
                 placement: import("floating-vue").Placement;
                 triggers: import("floating-vue").TriggerEvent[];
                 hideArrow: boolean;
-                container: string | boolean | Record<string, any>;
                 strategy: "absolute" | "fixed";
                 autoHide: boolean | ((event: Event) => boolean);
                 shown: boolean;
@@ -1147,11 +1175,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
                 show: number;
                 hide: number;
             };
+            container: string | boolean | Record<string, any>;
             positioningDisabled: boolean;
             placement: import("floating-vue").Placement;
             triggers: import("floating-vue").TriggerEvent[];
             hideArrow: boolean;
-            container: string | boolean | Record<string, any>;
             strategy: "absolute" | "fixed";
             autoHide: boolean | ((event: Event) => boolean);
             shown: boolean;
@@ -1220,7 +1248,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             "onClose-group"?: ((...args: any[]) => any) | undefined;
             "onClose-directive"?: ((...args: any[]) => any) | undefined;
             "onAuto-hide"?: ((...args: any[]) => any) | undefined;
-        }>, "toggle" | "show" | "hide" | "isOpen" | ("disabled" | "delay" | "positioningDisabled" | "placement" | "triggers" | "hideArrow" | "container" | "strategy" | "autoHide" | "shown" | "handleResize" | "instantMove" | "eagerMount" | "computeTransformOrigin")> & import("vue").ShallowUnwrapRef<{
+        }>, "toggle" | "show" | "hide" | "isOpen" | ("disabled" | "delay" | "container" | "positioningDisabled" | "placement" | "triggers" | "hideArrow" | "strategy" | "autoHide" | "shown" | "handleResize" | "instantMove" | "eagerMount" | "computeTransformOrigin")> & import("vue").ShallowUnwrapRef<{
             show: () => void;
             hide: () => void;
             toggle: () => void;