pxd 0.0.64 → 0.1.2

package/dist/components/index.js

@@ -1,17 +1,24 @@
 export { default as ActiveGraph } from "./active-graph/index.vue";
+export { default as ApprovalCard } from "./approval-card/index.vue";
 export { default as Avatar } from "./avatar/index.vue";
 export { default as AvatarGroup } from "./avatar-group/index.vue";
 export { default as Backtop } from "./backtop/index.vue";
 export { default as Badge } from "./badge/index.vue";
 export { default as Book } from "./book/index.vue";
+export { default as BorderBeam } from "./border-beam/index.vue";
+export { default as Breadcrumb } from "./breadcrumb/index.vue";
+export { default as BreadcrumbItem } from "./breadcrumb-item/index.vue";
 export { default as Browser } from "./browser/index.vue";
 export { default as Bubble } from "./bubble/index.vue";
+export { default as BubbleGroup } from "./bubble-group/index.vue";
 export { default as Button } from "./button/index.vue";
 export { default as ButtonGroup } from "./button-group/index.vue";
+export { default as Calendar } from "./calendar/index.vue";
+export { default as Card } from "./card/index.vue";
 export { default as Carousel } from "./carousel/index.vue";
-export { default as CarouselItem } from "./carousel-item/index.vue";
 export { default as Checkbox } from "./checkbox/index.vue";
 export { default as CheckboxGroup } from "./checkbox-group/index.vue";
+export { default as Checkerboard } from "./checkerboard/index.vue";
 export { default as Chip } from "./chip/index.vue";
 export { default as Choicebox } from "./choicebox/index.vue";
 export { default as ChoiceboxItem } from "./choicebox-item/index.vue";
@@ -19,30 +26,38 @@ export { default as Collapse } from "./collapse/index.vue";
 export { default as CollapseGroup } from "./collapse-group/index.vue";
 export { default as ColorSelector } from "./color-selector/index.vue";
 export { default as CommandMenu } from "./command-menu/index.vue";
-export { default as CommandMenuGroup } from "./command-menu-group/index.vue";
 export { default as ConfigProvider } from "./config-provider/index.vue";
+export { default as CopyButton } from "./copy-button/index.vue";
 export { default as Countdown } from "./countdown/index.vue";
 export { default as DashLine } from "./dash-line/index.vue";
+export { default as DatePicker } from "./date-picker/index.vue";
 export { default as Description } from "./description/index.vue";
 export { default as Drawer } from "./drawer/index.vue";
+export { default as EffortSlider } from "./effort-slider/index.vue";
 export { default as EllipsisText } from "./ellipsis-text/index.vue";
 export { default as EmptyState } from "./empty-state/index.vue";
 export { default as Error } from "./error/index.vue";
 export { default as Fader } from "./fader/index.vue";
+export { default as FeedbackBar } from "./feedback-bar/index.vue";
 export { default as Gauge } from "./gauge/index.vue";
 export { default as Grid } from "./grid/index.vue";
 export { default as GridItem } from "./grid-item/index.vue";
 export { default as HoldButton } from "./hold-button/index.vue";
+export { default as HueText } from "./hue-text/index.vue";
 export { default as Input } from "./input/index.vue";
 export { default as IntersectionObserver } from "./intersection-observer/index.vue";
 export { default as Kbd } from "./kbd/index.vue";
 export { default as Label } from "./label/index.vue";
 export { default as LinkButton } from "./link-button/index.vue";
 export { default as List } from "./list/index.vue";
+export { default as ListGroup } from "./list-group/index.vue";
 export { default as ListItem } from "./list-item/index.vue";
 export { default as LoadingBar } from "./loading-bar/index.vue";
 export { default as LoadingDots } from "./loading-dots/index.vue";
+export { default as MarchingAnts } from "./marching-ants/index.vue";
+export { default as Marquee } from "./marquee/index.vue";
 export { default as Material } from "./material/index.vue";
+export { default as Mention } from "./mention/index.vue";
 export { default as Menu } from "./menu/index.vue";
 export { default as Message } from "./message/index.vue";
 export { default as MessageItem } from "./message-item/index.vue";
@@ -52,37 +67,57 @@ export { default as NoiseBackground } from "./noise-background/index.vue";
 export { default as Note } from "./note/index.vue";
 export { default as NumberInput } from "./number-input/index.vue";
 export { default as Overlay } from "./overlay/index.vue";
+export { default as PageNumber } from "./page-number/index.vue";
 export { default as Pagination } from "./pagination/index.vue";
 export { default as PinInput } from "./pin-input/index.vue";
 export { default as Placeholder } from "./placeholder/index.vue";
 export { default as Popover } from "./popover/index.vue";
 export { default as Progress } from "./progress/index.vue";
 export { default as ProjectBanner } from "./project-banner/index.vue";
+export { default as Questionnaire } from "./questionnaire/index.vue";
+export { default as RadialBurst } from "./radial-burst/index.vue";
 export { default as Radio } from "./radio/index.vue";
 export { default as RadioGroup } from "./radio-group/index.vue";
+export { default as Rating } from "./rating/index.vue";
+export { default as Reasoning } from "./reasoning/index.vue";
 export { default as Resizable } from "./resizable/index.vue";
-export { default as ResizableHandle } from "./resizable-handle/index.vue";
-export { default as ResizablePanel } from "./resizable-panel/index.vue";
+export { default as Reveal } from "./reveal/index.vue";
+export { default as RollingNumber } from "./rolling-number/index.vue";
 export { default as ScalableText } from "./scalable-text/index.vue";
+export { default as ScrollProgress } from "./scroll-progress/index.vue";
+export { default as ScrollText } from "./scroll-text/index.vue";
 export { default as Scrollable } from "./scrollable/index.vue";
+export { default as SearchInput } from "./search-input/index.vue";
+export { default as Select } from "./select/index.vue";
 export { default as Separator } from "./separator/index.vue";
+export { default as ShimmerText } from "./shimmer-text/index.vue";
 export { default as Skeleton } from "./skeleton/index.vue";
 export { default as Slider } from "./slider/index.vue";
 export { default as Snippet } from "./snippet/index.vue";
 export { default as Spinner } from "./spinner/index.vue";
+export { default as SpinnerDots } from "./spinner-dots/index.vue";
+export { default as SplitButton } from "./split-button/index.vue";
 export { default as Stack } from "./stack/index.vue";
 export { default as StatusDot } from "./status-dot/index.vue";
+export { default as Steps } from "./steps/index.vue";
+export { default as StickToBottom } from "./stick-to-bottom/index.vue";
+export { default as SwipeCell } from "./swipe-cell/index.vue";
 export { default as Switch } from "./switch/index.vue";
 export { default as SwitchItem } from "./switch-item/index.vue";
 export { default as Tabs } from "./tabs/index.vue";
-export { default as TabsItem } from "./tabs-item/index.vue";
 export { default as Teleport } from "./teleport/index.vue";
 export { default as Text } from "./text/index.vue";
 export { default as Textarea } from "./textarea/index.vue";
 export { default as ThemeSwitcher } from "./theme-switcher/index.vue";
 export { default as TimePicker } from "./time-picker/index.vue";
+export { default as Timeline } from "./timeline/index.vue";
+export { default as TimelineItem } from "./timeline-item/index.vue";
+export { default as Toc } from "./toc/index.vue";
+export { default as TodoList } from "./todo-list/index.vue";
 export { default as Toggle } from "./toggle/index.vue";
 export { default as ToggleButton } from "./toggle-button/index.vue";
 export { default as ToggleButtonGroup } from "./toggle-button-group/index.vue";
+export { default as ToolCall } from "./tool-call/index.vue";
 export { default as Tooltip } from "./tooltip/index.vue";
+export { default as Tree } from "./tree/index.vue";
 export { default as VirtualList } from "./virtual-list/index.vue";

package/dist/components/input/index.d.vue.ts

@@ -17,9 +17,8 @@ declare const __VLS_base: import("vue").DefineComponent<InputProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: string, args_1: Event) => any;
     "update:modelValue": (args_0: string) => any;
-    input: (args_0: string) => any;
-    blur: (args_0: FocusEvent) => any;
     click: (args_0: MouseEvent) => any;
+    blur: (args_0: FocusEvent) => any;
     compositionend: (args_0: CompositionEvent) => any;
     compositionstart: (args_0: CompositionEvent) => any;
     compositionupdate: (args_0: CompositionEvent) => any;
@@ -28,9 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<InputProps, {
 }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
     onChange?: ((args_0: string, args_1: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-    onInput?: ((args_0: string) => any) | undefined;
-    onBlur?: ((args_0: FocusEvent) => any) | undefined;
     onClick?: ((args_0: MouseEvent) => any) | undefined;
+    onBlur?: ((args_0: FocusEvent) => any) | undefined;
     onCompositionend?: ((args_0: CompositionEvent) => any) | undefined;
     onCompositionstart?: ((args_0: CompositionEvent) => any) | undefined;
     onCompositionupdate?: ((args_0: CompositionEvent) => any) | undefined;
@@ -38,6 +36,9 @@ declare const __VLS_base: import("vue").DefineComponent<InputProps, {
     onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
 }>, {
     align: "left" | "center" | "right";
+    trimOverflow: boolean;
+    wordLimitPosition: "inside" | "outside";
+    clearOnPressEscape: boolean;
     defaultPrefixStyle: boolean;
     defaultSuffixStyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/input/index.vue

@@ -2,82 +2,154 @@
 import CrossIcon from "@gdsicon/vue/cross";
 import EyeIcon from "@gdsicon/vue/eye";
 import EyeOffIcon from "@gdsicon/vue/eye-off";
-import { tv } from "tailwind-variants";
 import { computed, shallowRef } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { BASIC_HEIGHTS } from "../../constants/size";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { NOOP } from "../../utils/event";
-import { isTruthyProp } from "../../utils/format";
-import { getUniqueId } from "../../utils/uid";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useWordLimit } from "../../composables/_internal/use-word-limit.js";
+import { BASIC_HEIGHTS } from "../../constants/size.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { NOOP } from "../../utils/event.js";
+import { isTruthyProp } from "../../utils/format.js";
+import { getUniqueId } from "../../utils/helper.js";
 defineOptions({
-  name: "PInput",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PInput",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  size: { type: String, required: false },
-  error: { type: [Boolean, String], required: false },
-  min: { type: [Number, String], required: false },
-  max: { type: [Number, String], required: false },
-  align: { type: String, required: false, default: "left" },
-  readonly: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  password: { type: Boolean, required: false },
-  autofocus: { type: Boolean, required: false },
-  inputType: { type: String, required: false },
-  inputmode: { type: String, required: false },
-  minlength: { type: [Number, String], required: false },
-  maxlength: { type: [Number, String], required: false },
-  clearable: { type: Boolean, required: false },
-  clearValue: { type: [String, Number, null], required: false },
-  modelValue: { type: [String, Number, null], required: false },
-  placeholder: { type: String, required: false },
-  prefixClass: { type: [String, Array, Object], required: false },
-  suffixClass: { type: [String, Array, Object], required: false },
-  selectOnFocus: { type: Boolean, required: false },
-  defaultPrefixStyle: { type: Boolean, required: false, default: true },
-  defaultSuffixStyle: { type: Boolean, required: false, default: true }
-});
-const emits = defineEmits(["click", "input", "change", "focus", "blur", "keydown", "update:modelValue", "compositionstart", "compositionupdate", "compositionend"]);
-const inputVariant = tv({
-  base: "pxd-input pxd-input--border group relative flex w-full max-w-full items-center overflow-hidden bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-all",
-  variants: {
-    size: {
-      xs: `${BASIC_HEIGHTS.xs} text-sm rounded-sm`,
-      sm: `${BASIC_HEIGHTS.sm} text-sm rounded-md`,
-      md: `${BASIC_HEIGHTS.md} text-sm rounded-md`,
-      lg: `${BASIC_HEIGHTS.lg} text-base rounded-lg`
-    },
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right"
-    },
-    disabled: {
-      true: "is-disabled",
-      false: ""
-    },
-    readonly: {
-      true: "is-readonly",
-      false: ""
-    },
-    error: {
-      true: "is-error",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    align: "left",
-    disabled: false,
-    readonly: false,
-    error: false
-  }
+	size: {
+		type: String,
+		required: false
+	},
+	error: {
+		type: [Boolean, String],
+		required: false
+	},
+	min: {
+		type: [Number, String],
+		required: false
+	},
+	max: {
+		type: [Number, String],
+		required: false
+	},
+	align: {
+		type: String,
+		required: false,
+		default: "left"
+	},
+	readonly: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	password: {
+		type: Boolean,
+		required: false
+	},
+	autofocus: {
+		type: Boolean,
+		required: false
+	},
+	inputType: {
+		type: String,
+		required: false
+	},
+	inputMode: {
+		type: String,
+		required: false
+	},
+	minLength: {
+		type: [Number, String],
+		required: false
+	},
+	maxLength: {
+		type: [Number, String],
+		required: false
+	},
+	trimOverflow: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	clearable: {
+		type: Boolean,
+		required: false
+	},
+	clearValue: {
+		type: null,
+		required: false
+	},
+	modelValue: {
+		type: null,
+		required: false
+	},
+	placeholder: {
+		type: String,
+		required: false
+	},
+	prefixClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	suffixClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	selectOnFocus: {
+		type: Boolean,
+		required: false
+	},
+	showWordLimit: {
+		type: Boolean,
+		required: false
+	},
+	wordLimitPosition: {
+		type: String,
+		required: false,
+		default: "inside"
+	},
+	clearOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	defaultPrefixStyle: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	defaultSuffixStyle: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
 });
+const emits = defineEmits([
+	"click",
+	"change",
+	"focus",
+	"blur",
+	"keydown",
+	"update:modelValue",
+	"compositionstart",
+	"compositionupdate",
+	"compositionend"
+]);
 const uniqueId = getUniqueId();
 const inputRef = shallowRef();
 const configProvider = useConfigProvider();
@@ -85,105 +157,136 @@ const modelValue = useModelValue(props, emits, { withChange: false });
 const isComposing = shallowRef(false);
 const isPasswordVisible = shallowRef(!props.password);
 const inputType = computed(() => props.inputType || isPasswordVisible.value ? "text" : "password");
-const computedClasses = computed(() => {
-  return inputVariant({
-    size: props.size || configProvider.size,
-    align: props.align,
-    error: isTruthyProp(props.error),
-    disabled: isTruthyProp(props.disabled),
-    readonly: isTruthyProp(props.readonly)
-  });
+const { isWordLimitShown, hasMaxLength, isWordLimitOutside, nativeMaxLength, wordLimitText, isWordLimitExceeded } = useWordLimit({
+	modelValue,
+	showWordLimit: () => props.showWordLimit,
+	maxLength: () => props.maxLength,
+	wordLimitPosition: () => props.wordLimitPosition,
+	isComposing
 });
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-input pxd-input--border group relative flex w-full max-w-full items-center bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-appearance",
+	variants: {
+		size: {
+			xs: `${BASIC_HEIGHTS.xs} text-sm rounded-sm`,
+			sm: `${BASIC_HEIGHTS.sm} text-sm rounded-md`,
+			md: `${BASIC_HEIGHTS.md} text-sm rounded-md`,
+			lg: `${BASIC_HEIGHTS.lg} text-base rounded-lg`
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		},
+		disabled: { true: "is-disabled" },
+		readonly: { true: "is-readonly" },
+		error: { true: "is-error" }
+	}
+}, { selection: () => ({
+	size: props.size || configProvider.size,
+	align: props.align,
+	error: isTruthyProp(props.error) || isWordLimitExceeded.value,
+	disabled: isTruthyProp(props.disabled),
+	readonly: isTruthyProp(props.readonly)
+}) });
 function getInputValue(ev) {
-  return ev.target.value;
+	return ev.target.value;
+}
+function trimInputValue(inputValue) {
+	if (props.trimOverflow && hasMaxLength.value) {
+		return inputValue.slice(0, Number(props.maxLength));
+	}
+	return inputValue;
 }
 function onFocus(event) {
-  if (props.selectOnFocus) {
-    inputRef.value?.select();
-  }
-  emits("focus", event);
+	if (props.selectOnFocus) {
+		inputRef.value?.select();
+	}
+	emits("focus", event);
 }
 function onBlur(event) {
-  emits("blur", event);
+	emits("blur", event);
 }
 function onClick(event) {
-  emits("click", event);
+	emits("click", event);
 }
 function onChange(event) {
-  const inputValue = getInputValue(event);
-  emits("change", inputValue, event);
+	const inputValue = getInputValue(event);
+	emits("change", inputValue, event);
 }
-async function onInput(event) {
-  const ev = event;
-  if (ev.isComposing || isComposing.value) {
-    return;
-  }
-  const inputValue = getInputValue(event);
-  modelValue.value = inputValue;
-  emits("input", inputValue);
+function onInput(event) {
+	const ev = event;
+	if (ev.isComposing || isComposing.value) {
+		return;
+	}
+	const inputValue = getInputValue(event);
+	modelValue.value = inputValue;
 }
 function onKeydown(event) {
-  if (props.readonly) {
-    return;
-  }
-  if (event.key === "Enter") {
-    onChange(event);
-  }
-  emits("keydown", event);
+	if (props.readonly || props.disabled) {
+		return;
+	}
+	if (event.key === "Enter") {
+		onChange(event);
+	} else if (event.key === "Escape" && props.clearOnPressEscape) {
+		clear(event);
+	}
+	emits("keydown", event);
 }
 function onCompositionStart(event) {
-  isComposing.value = true;
-  emits("compositionstart", event);
+	isComposing.value = true;
+	emits("compositionstart", event);
 }
 function onCompositionUpdate(event) {
-  isComposing.value = true;
-  emits("compositionupdate", event);
+	isComposing.value = true;
+	emits("compositionupdate", event);
 }
-async function onCompositionEnd(event) {
-  isComposing.value = false;
-  emits("compositionend", event);
-  const inputValue = getInputValue(event);
-  modelValue.value = inputValue;
-  emits("input", inputValue);
+function onCompositionEnd(event) {
+	isComposing.value = false;
+	emits("compositionend", event);
+	const target = event.target;
+	const inputValue = trimInputValue(getInputValue(event));
+	target.value = inputValue;
+	modelValue.value = inputValue;
 }
 function toggleType() {
-  isPasswordVisible.value = !isPasswordVisible.value;
+	isPasswordVisible.value = !isPasswordVisible.value;
 }
 function blur() {
-  inputRef.value?.blur();
+	inputRef.value?.blur();
 }
 function focus() {
-  inputRef.value?.focus();
+	inputRef.value?.focus();
 }
 function select() {
-  inputRef.value?.select();
+	inputRef.value?.select();
 }
 function clear(ev) {
-  const clearValue = props.clearValue ?? "";
-  emits("input", "");
-  emits("change", "", ev);
-  modelValue.value = clearValue;
+	const clearValue = props.clearValue ?? "";
+	emits("change", "", ev);
+	modelValue.value = clearValue;
 }
 defineExpose({
-  blur,
-  clear,
-  focus,
-  select
+	blur,
+	clear,
+	focus,
+	select
 });
 </script>
 
 <template>
   <label
+    data-input
     :for="uniqueId"
     :data-disabled="disabled"
-    :class="computedClasses"
-    v-bind="$attrs"
+    :class="classes"
+    v-bind="attrs"
     @click="onClick"
     @dragstart.prevent="NOOP"
   >
     <div
       v-if="$slots.prefix"
-      class="pxd-input--prefix text-sm flex h-full items-center text-foreground-secondary"
+      class="pxd-input--prefix text-sm flex h-full shrink-0 items-center rounded-inherit text-foreground-secondary"
       :class="[
   { 'px-3 rounded-l-inherit border-r border-gray-300 bg-background-200': defaultPrefixStyle },
   prefixClass
@@ -206,9 +309,9 @@ defineExpose({
       :value="modelValue"
       :readonly="readonly"
       :disabled="disabled"
-      :inputmode="inputmode"
-      :minlength="minlength"
-      :maxlength="maxlength"
+      :inputmode="inputMode"
+      :minlength="minLength"
+      :maxlength="nativeMaxLength"
       :autofocus="autofocus"
       :aria-disabled="disabled"
       :placeholder="placeholder"
@@ -225,12 +328,13 @@ defineExpose({
     <div
       v-if="password || clearable"
       v-show="modelValue"
-      :class="{ 'pr-2': password && clearable }"
-      class="pxd-input--icon top-0 right-0 gap-1 flex aspect-square h-full items-center justify-center rounded-r-inherit text-foreground-secondary"
+      :class="{ 'pe-2': password && clearable }"
+      class="pxd-input--icon top-0 right-0 pe-2 gap-1 flex h-full items-center justify-center rounded-r-inherit text-foreground-secondary"
       @pointerdown.prevent="NOOP"
     >
       <button
         v-if="password"
+        type="button"
         class="p-1 cursor-pointer appearance-none rounded-sm font-inherit self-focus-ring outline-none hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors"
         @click.stop.prevent="toggleType"
       >
@@ -239,6 +343,7 @@ defineExpose({
       </button>
       <button
         v-if="clearable"
+        type="button"
         class="p-1 cursor-pointer appearance-none rounded-sm font-inherit self-focus-ring outline-none hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors"
         @click.stop.prevent="clear"
       >
@@ -246,9 +351,20 @@ defineExpose({
       </button>
     </div>
 
+    <span
+      v-if="isWordLimitShown"
+      class="pxd-input--word-limit text-xs px-1.5 -ms-1.5 pointer-events-none shrink-0 text-nowrap text-foreground-secondary"
+      :class="{
+  'right-0 pe-0 mbs-1 absolute top-full': isWordLimitOutside,
+  'text-red-900': isWordLimitExceeded
+}"
+    >
+      {{ wordLimitText }}
+    </span>
+
     <div
       v-if="$slots.suffix"
-      class="pxd-input--suffix text-sm flex h-full items-center text-foreground-secondary"
+      class="pxd-input--suffix text-sm flex h-full shrink-0 items-center rounded-inherit text-foreground-secondary"
       :class="[
   { 'px-3 rounded-r-inherit border-l border-gray-300 bg-background-200': defaultSuffixStyle },
   suffixClass

package/dist/components/input/types.d.ts

@@ -11,23 +11,26 @@ export interface InputProps {
   password?: boolean
   autofocus?: boolean
   inputType?: string
-  inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
-  minlength?: number | string
-  maxlength?: number | string
+  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
+  minLength?: number | string
+  maxLength?: number | string
+  trimOverflow?: boolean
   clearable?: boolean
-  clearValue?: string | number | null
-  modelValue?: string | number | null
+  clearValue?: any
+  modelValue?: any
   placeholder?: string
   prefixClass?: ComponentClass
   suffixClass?: ComponentClass
   selectOnFocus?: boolean
+  showWordLimit?: boolean
+  wordLimitPosition?: 'inside' | 'outside'
+  clearOnPressEscape?: boolean
   defaultPrefixStyle?: boolean
   defaultSuffixStyle?: boolean
 }
 
 export interface InputEmits {
   click: [MouseEvent]
-  input: [string]
   change: [string, Event]
   focus: [FocusEvent]
   blur: [FocusEvent]