sard 1.0.0 → 1.0.2

package/components/indexes/indexes-nav.js

@@ -0,0 +1,84 @@
+import { createBem, cssVarName } from "../../utils/bem.js";
+import { clamp } from "../../utils/number.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import motion_default from "../motion/motion.js";
+import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useModel, useTemplateRef, vShow, withCtx, withDirectives, withModifiers } from "vue";
+//#region packages/sard/components/indexes/indexes-nav.vue
+const itemSize = 20;
+var indexes_nav_default = /*@__PURE__*/ defineComponent({
+	__name: "indexes-nav",
+	props: {
+		anchors: {
+			type: Array,
+			required: true
+		},
+		current: {
+			type: [String, Number],
+			required: false
+		}
+	},
+	emits: ["update:current", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("indexes");
+		const navRef = useTemplateRef("nav");
+		const navRect = ref();
+		const hintVisible = ref(false);
+		const innerCurrent = useModel(props, "current");
+		const hintTop = computed(() => {
+			let index = innerCurrent.value !== void 0 ? props.anchors.indexOf(innerCurrent.value) : -1;
+			if (index < 0) index = 0;
+			return index * itemSize + itemSize / 2 + "px";
+		});
+		const calcPosition = (touch) => {
+			const offsetY = touch.clientY - navRect.value.top;
+			const itemIndex = clamp(Math.floor(offsetY / itemSize), 0, props.anchors.length - 1);
+			const current = props.anchors[itemIndex];
+			if (current !== innerCurrent.value) {
+				innerCurrent.value = current;
+				emit("change", current);
+			}
+		};
+		const onTouchStart = (event) => {
+			hintVisible.value = true;
+			navRect.value = navRef.value.getBoundingClientRect();
+			calcPosition(event.touches[0]);
+		};
+		const onTouchMove = (event) => {
+			calcPosition(event.touches[0]);
+		};
+		const onTouchEnd = () => {
+			hintVisible.value = false;
+		};
+		const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+		const navStyle = computed(() => {
+			return { [cssVarName("indexes-nav-item-size")]: `${itemSize}px` };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "nav",
+				class: normalizeClass(unref(bem).e("nav")),
+				style: normalizeStyle(navStyle.value),
+				onTouchstart: onTouchStart,
+				onTouchmove: withModifiers(onTouchMove, ["stop", "prevent"]),
+				onTouchend: onTouchEnd,
+				onTouchcancel: onTouchEnd,
+				onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.anchors, (name, i) => {
+				return openBlock(), createElementBlock("div", {
+					key: i,
+					class: normalizeClass([unref(bem).e("nav-item"), unref(bem).em("nav-item", "active", name === unref(innerCurrent))])
+				}, toDisplayString(name), 3);
+			}), 128)), createVNode(motion_default, { name: "fade" }, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("hint")),
+					style: normalizeStyle({ top: hintTop.value })
+				}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("hint-text")) }, toDisplayString(unref(innerCurrent)), 3)], 6), [[vShow, hintVisible.value]])]),
+				_: 1
+			})], 38);
+		};
+	}
+});
+//#endregion
+export { indexes_nav_default as default };

package/components/indexes/indexes.d.ts

@@ -0,0 +1,19 @@
+import { type IndexesProps, type IndexesSlots, type IndexesExpose } from './common';
+type __VLS_Slots = IndexesSlots;
+declare const __VLS_base: import("vue").DefineComponent<IndexesProps, IndexesExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (name: string | number) => any;
+    "update:current": (name: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<IndexesProps> & Readonly<{
+    onChange?: ((name: string | number) => any) | undefined;
+    "onUpdate:current"?: ((name: string | number) => any) | undefined;
+}>, {
+    current: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/indexes/indexes.js

@@ -0,0 +1,64 @@
+import { createBem } from "../../utils/bem.js";
+import { isNullish } from "../../utils/is.js";
+import { useScrollSpy } from "../../use/useScrollSpy.js";
+import { defaultIndexesProps, indexesContextKey } from "./common.js";
+import indexes_nav_default from "./indexes-nav.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeDefaults, normalizeClass, openBlock, provide, renderSlot, unref, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/indexes/indexes.vue
+var indexes_default = /*@__PURE__*/ defineComponent({
+	__name: "indexes",
+	props: /*@__PURE__*/ mergeDefaults({ current: {
+		type: [Number, String],
+		required: false
+	} }, defaultIndexesProps),
+	emits: ["update:current", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("indexes");
+		const scrollRef = useTemplateRef("scroll");
+		const { innerCurrent, anchorRectList, register, unregister, scrollTo, update } = useScrollSpy(scrollRef, {
+			defaultCurrent: props.current,
+			getSpiedRect() {
+				return scrollRef.value.getBoundingClientRect();
+			},
+			onChange(name) {
+				emit("change", name);
+			}
+		});
+		provide(indexesContextKey, {
+			register,
+			unregister
+		});
+		watch(() => props.current, () => {
+			if (!isNullish(props.current) && anchorNames.value.includes(props.current) && props.current !== innerCurrent.value) {
+				innerCurrent.value = props.current;
+				scrollTo(props.current);
+			}
+		});
+		const anchorNames = computed(() => {
+			return anchorRectList.value.map((item) => item[0]);
+		});
+		const onNavChange = (name) => {
+			scrollTo(name);
+			emit("change", name);
+		};
+		__expose({
+			scrollTo,
+			update
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [createElementVNode("div", {
+				ref: "scroll",
+				class: normalizeClass(unref(bem).e("scroll"))
+			}, [renderSlot(_ctx.$slots, "default")], 2), createVNode(indexes_nav_default, {
+				current: unref(innerCurrent),
+				"onUpdate:current": _cache[0] || (_cache[0] = ($event) => isRef(innerCurrent) ? innerCurrent.value = $event : null),
+				anchors: anchorNames.value,
+				onChange: onNavChange
+			}, null, 8, ["current", "anchors"])], 2);
+		};
+	}
+});
+//#endregion
+export { indexes_default as default };

package/components/infinite-list/common.d.ts

@@ -0,0 +1,24 @@
+import { type DefaultProps } from '../config';
+import type { LoadMoreStatus } from '../load-more/common';
+import type { PullDownRefreshSlots } from '../pull-down-refresh/common';
+export interface InfiniteListProps {
+    request: (page: number, isRefresh: boolean) => Promise<boolean>;
+    hideLoadMore?: boolean;
+    refreshable?: boolean;
+    doneDuration?: number;
+    rootMargin?: string;
+}
+export declare const defaultInfiniteListProps: DefaultProps<InfiniteListProps>;
+export interface InfiniteListSlots extends Omit<PullDownRefreshSlots, 'default'> {
+    default?(props: {
+        status: LoadMoreStatus;
+        refresh: () => void;
+    }): any;
+}
+export interface InfiniteListEmits {
+    (e: 'refresh-success'): void;
+    (e: 'refresh-error'): void;
+}
+export interface InfiniteListExpose {
+    refresh: () => void;
+}

package/components/infinite-list/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/infinite-list/common.ts
+const defaultInfiniteListProps = { doneDuration: 500 };
+//#endregion
+export { defaultInfiniteListProps };

package/components/infinite-list/index.css

@@ -0,0 +1 @@
+.s-infinite-list{overflow-x:hidden;overflow-y:auto}.s-infinite-list .s-pull-down-refresh{display:flow-root;min-height:100%}.s-infinite-list__load-more:is(.is-hidden){visibility:hidden;pointer-events:none}

package/components/infinite-list/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _InfiniteList from './infinite-list.vue';
+export declare const InfiniteList: EnhancedComponent<typeof _InfiniteList>;
+export default InfiniteList;
+export type { InfiniteListProps, InfiniteListSlots, InfiniteListEmits, InfiniteListExpose, } from './common';

package/components/infinite-list/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import infinite_list_default from "./infinite-list.js";
+//#region packages/sard/components/infinite-list/index.ts
+const InfiniteList = enhanceComponent(infinite_list_default);
+//#endregion
+export { InfiniteList, InfiniteList as default };

package/components/infinite-list/infinite-list.d.ts

@@ -0,0 +1,23 @@
+import { type InfiniteListProps, type InfiniteListSlots, type InfiniteListExpose } from './common';
+type __VLS_Slots = InfiniteListSlots;
+declare const __VLS_base: import("vue").DefineComponent<InfiniteListProps, InfiniteListExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "refresh-success": () => any;
+    "refresh-error": () => any;
+}, string, import("vue").PublicProps, Readonly<InfiniteListProps> & Readonly<{
+    "onRefresh-success"?: (() => any) | undefined;
+    "onRefresh-error"?: (() => any) | undefined;
+}>, {
+    rootMargin: string;
+    doneDuration: number;
+    request: (page: number, isRefresh: boolean) => Promise<boolean>;
+    hideLoadMore: boolean;
+    refreshable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/infinite-list/infinite-list.js

@@ -0,0 +1,126 @@
+import { createBem } from "../../utils/bem.js";
+import loading_default from "../loading/loading.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import { defaultInfiniteListProps } from "./common.js";
+import pull_down_refresh_default from "../pull-down-refresh/pull-down-refresh.js";
+import load_more_default from "../load-more/load-more.js";
+import { useLoadMore } from "../load-more/useLoadMore.js";
+import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeDefaults, normalizeClass, normalizeProps, openBlock, ref, renderSlot, toDisplayString, unref, useTemplateRef, withCtx } from "vue";
+//#region packages/sard/components/infinite-list/infinite-list.vue
+var infinite_list_default = /*@__PURE__*/ defineComponent({
+	__name: "infinite-list",
+	props: /*@__PURE__*/ mergeDefaults({
+		request: {
+			type: Function,
+			required: true
+		},
+		hideLoadMore: {
+			type: Boolean,
+			required: false
+		},
+		refreshable: {
+			type: Boolean,
+			required: false
+		},
+		doneDuration: {
+			type: Number,
+			required: false
+		},
+		rootMargin: {
+			type: String,
+			required: false
+		}
+	}, defaultInfiniteListProps),
+	emits: ["refresh-success", "refresh-error"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("infinite-list");
+		const { t } = useTranslateWithPrefix("pullDownRefresh");
+		const doneText = ref("");
+		const scrollRef = useTemplateRef("scroll");
+		const pullDownRefresh = useTemplateRef("pull-down-refresh");
+		const onScroll = () => {
+			pullDownRefresh.value?.enableToRefresh(scrollRef.value.scrollTop === 0);
+		};
+		const onRefresh = () => {
+			refresh().then(() => {
+				doneText.value = t("doneSuccess");
+				emit("refresh-success");
+			}).catch(() => {
+				doneText.value = t("doneFail");
+				emit("refresh-error");
+			});
+		};
+		const { status, isLoading, isRefreshing, onLoadMore, onReload, refresh } = useLoadMore({
+			root: scrollRef,
+			target: useTemplateRef("load-more"),
+			rootMargin: () => props.rootMargin,
+			request: async (page, isRefresh) => {
+				return props.request(page, isRefresh);
+			}
+		});
+		__expose({ refresh });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "scroll",
+				class: normalizeClass(unref(bem).b()),
+				onScroll
+			}, [createVNode(pull_down_refresh_default, {
+				ref: "pull-down-refresh",
+				loading: unref(isRefreshing),
+				disabled: !__props.refreshable || unref(isLoading),
+				"done-duration": __props.doneDuration,
+				onRefresh
+			}, {
+				unready: withCtx((slotsProps) => [renderSlot(_ctx.$slots, "unready", normalizeProps(guardReactiveProps(slotsProps)), () => [createVNode(loading_default, {
+					type: "clock",
+					size: "18px",
+					animated: false,
+					progress: slotsProps.progress
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("unready")), 1)]),
+					_: 1
+				}, 8, ["progress"])])]),
+				ready: withCtx(() => [renderSlot(_ctx.$slots, "ready", {}, () => [createVNode(loading_default, {
+					type: "clock",
+					size: "18px",
+					animated: false
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("ready")), 1)]),
+					_: 1
+				})])]),
+				loading: withCtx(() => [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(loading_default, {
+					type: "clock",
+					size: "18px"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("loading")), 1)]),
+					_: 1
+				})])]),
+				done: withCtx(() => [renderSlot(_ctx.$slots, "done", {}, () => [createTextVNode(toDisplayString(doneText.value), 1)])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+					status: unref(status),
+					refresh: unref(refresh)
+				}), createElementVNode("div", {
+					ref: "load-more",
+					class: normalizeClass([unref(bem).e("load-more"), unref(bem).is("hidden", __props.hideLoadMore)])
+				}, [createVNode(load_more_default, {
+					status: unref(status),
+					onLoadMore: unref(onLoadMore),
+					onReload: unref(onReload)
+				}, null, 8, [
+					"status",
+					"onLoadMore",
+					"onReload"
+				])], 2)]),
+				_: 3
+			}, 8, [
+				"loading",
+				"disabled",
+				"done-duration"
+			])], 34);
+		};
+	}
+});
+//#endregion
+export { infinite_list_default as default };

package/components/input/common.d.ts

@@ -0,0 +1,63 @@
+import { type HTMLAttributes, type InputTypeHTMLAttribute } from 'vue';
+import { type DefaultProps } from '../config';
+export type InputType = InputTypeHTMLAttribute | 'textarea' | 'digit';
+export type InputAutoHeight = boolean | {
+    minHeight?: number;
+    maxHeight?: number;
+};
+export type InputTargetElement = HTMLInputElement | HTMLTextAreaElement;
+export type InputModelModifiers = {
+    lazy?: true;
+    number?: true;
+    trim?: true;
+};
+export interface InputProps {
+    modelValue?: string | number | null;
+    modelModifiers?: InputModelModifiers;
+    clearable?: boolean;
+    showClearOnlyFocus?: boolean;
+    showCount?: boolean;
+    inlaid?: boolean;
+    borderless?: boolean;
+    focused?: boolean;
+    autoHeight?: InputAutoHeight;
+    validateEvent?: boolean;
+    showEye?: boolean;
+    precision?: number;
+    formatter?: (value: string, trigger: 'input' | 'change') => string;
+    type?: InputType;
+    disabled?: boolean;
+    readonly?: boolean;
+    maxlength?: number | string;
+    min?: number;
+    max?: number;
+    rows?: string | number;
+    placeholder?: string;
+    autofocus?: boolean;
+    autocomplete?: string;
+    inputmode?: HTMLAttributes['inputmode'];
+    enterkeyhint?: HTMLAttributes['enterkeyhint'];
+    spellcheck?: HTMLAttributes['spellcheck'];
+    autocorrect?: string;
+    autocapitalize?: string;
+}
+export declare const defaultInputProps: DefaultProps<InputProps>;
+export interface InputSlots {
+    prepend?(props: Record<string, never>): any;
+    append?(props: Record<string, never>): any;
+}
+export interface InputEmits {
+    (e: 'input', value: string | number): void;
+    (e: 'update:modelValue', value: string | number): void;
+    (e: 'change', value: string | number): void;
+    (e: 'clear'): void;
+    (e: 'blur', event: FocusEvent): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'compositionstart', event: CompositionEvent): void;
+    (e: 'compositionupdate', event: CompositionEvent): void;
+    (e: 'compositionend', event: CompositionEvent): void;
+}
+export interface InputExpose {
+    focus: () => void;
+    blur: () => void;
+}

package/components/input/common.js

@@ -0,0 +1,10 @@
+//#region packages/sard/components/input/common.ts
+const defaultInputProps = {
+	modelValue: "",
+	modelModifiers: () => ({}),
+	validateEvent: true,
+	inputmode: "text",
+	type: "text"
+};
+//#endregion
+export { defaultInputProps };

package/components/input/index.css

@@ -0,0 +1 @@
+:root{--s-input-padding-y:5px;--s-input-padding-y-borderless:6px;--s-input-padding-x:var(--s-size-sm);--s-input-gap:var(--s-size-xs);--s-input-border-radius:var(--s-border-radius);--s-input-border-color:var(--s-border-color);--s-input-border-color-focused:var(--s-color-primary);--s-input-bg:rgba(0,0,0,0);--s-input-bg-disabled:var(--s-bg-color-disabled);--s-input-duration:var(--s-duration);--s-input-control-height:24px;--s-input-control-font-size:var(--s-font-size);--s-input-control-line-height:var(--s-line-height-normal);--s-input-control-color-disabled:var(--s-text-color-disabled);--s-input-placeholder-color:var(--s-text-color-fourth);--s-input-append-gap:var(--s-size-xs);--s-input-clear-font-size:var(--s-size);--s-input-clear-color:var(--s-text-color-fourth);--s-input-eye-font-size:var(--s-size);--s-input-eye-color:var(--s-text-color-fourth);--s-input-count-font-size:var(--s-font-size-sm);--s-input-count-line-height:var(--s-line-height-tight);--s-input-count-color:var(--s-text-color-tertiary);--s-input-count-margin-top:var(--s-size-2xs)}.s-input{position:relative;display:flex;align-items:center;gap:var(--s-input-gap);padding:var(--s-input-padding-y) var(--s-input-padding-x);border:1px solid var(--s-input-border-color);border-radius:var(--s-input-border-radius);font-size:var(--s-input-control-font-size);line-height:var(--s-input-control-line-height);transition:var(--s-input-duration)}.s-input--borderless{padding-top:var(--s-input-padding-y-borderless);padding-bottom:var(--s-input-padding-y-borderless);border-width:0}.s-input--inlaid{padding:0;border-width:0}.s-input--inlaid .s-input__tools{min-width:0;margin-inline-end:0}.s-input--inlaid .s-input__append{margin-inline-end:0}.s-input:is(.is-focused){border-color:var(--s-input-border-color-focused);z-index:1}.s-input:is(.is-disabled){background:var(--s-input-bg-disabled)}.s-input__control{flex:1;width:100%;max-width:100%;min-width:0;margin:0;padding:0;border-width:0;font-size:inherit;line-height:inherit;background:var(--s-input-bg);appearance:none;outline:none;text-align:inherit;color:inherit}.s-input__control:is(input){height:var(--s-input-control-height)}.s-input__control:is(input)::-ms-reveal{display:none}.s-input__control:is(input)::-webkit-search-cancel-button{display:none}.s-input__control:is(textarea){min-height:var(--s-input-control-height);resize:none}.s-input__control::placeholder{color:var(--s-input-placeholder-color)}.s-input__prepend,.s-input__append{display:flex;align-items:center;align-self:stretch;flex:none;line-height:1}.s-input__append{gap:var(--s-input-append-gap)}.s-input__clear{position:relative;z-index:2;display:flex;align-self:stretch;justify-content:center;align-items:center;font-size:var(--s-input-clear-font-size);color:var(--s-input-clear-color);cursor:pointer}.s-input__clear::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(1.5, 1)}.s-input__eye{position:relative;display:flex;align-self:stretch;justify-content:center;align-items:center;font-size:var(--s-input-eye-font-size);color:var(--s-input-eye-color);cursor:pointer}.s-input__eye::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(1.5, 1)}.s-input__count{display:flex;align-items:center;font-size:var(--s-input-count-font-size);line-height:var(--s-input-count-line-height);color:var(--s-input-count-color);white-space:nowrap;pointer-events:none}.s-input--textarea .s-input__count{position:absolute;top:100%;margin-top:var(--s-input-count-margin-top);inset-inline-end:0}.s-input:is(.is-disabled) .s-input__control{color:var(--s-input-control-color-disabled)}.s-input:is(.is-readonly) .s-input__control{pointer-events:none}.s-input--compact-horizontal{width:auto;flex:0 1 auto}.s-input--compact-horizontal:not(:first-child){margin-inline-start:-1px}:root:not([dir=rtl]) .s-input--compact-horizontal:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}:root[dir=rtl] .s-input--compact-horizontal:not(:first-child){border-top-right-radius:0;border-bottom-right-radius:0}:root:not([dir=rtl]) .s-input--compact-horizontal:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:root[dir=rtl] .s-input--compact-horizontal:not(:last-child){border-top-left-radius:0;border-bottom-left-radius:0}.s-input--compact-block{flex:1 1 auto}

package/components/input/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Input from './input.vue';
+export declare const Input: EnhancedComponent<typeof _Input>;
+export default Input;
+export type { InputProps, InputSlots, InputEmits } from './common';

package/components/input/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import input_default from "./input.js";
+//#region packages/sard/components/input/index.ts
+const Input = enhanceComponent(input_default);
+//#endregion
+export { Input, Input as default };

package/components/input/input.d.ts

@@ -0,0 +1,60 @@
+import { type InputProps, type InputSlots, type InputExpose } from './common';
+type __VLS_Slots = InputSlots;
+declare const __VLS_base: import("vue").DefineComponent<InputProps, InputExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    input: (value: string | number) => any;
+    clear: () => any;
+    blur: (event: FocusEvent) => any;
+    change: (value: string | number) => any;
+    compositionend: (event: CompositionEvent) => any;
+    compositionstart: (event: CompositionEvent) => any;
+    compositionupdate: (event: CompositionEvent) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
+    onInput?: ((value: string | number) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string | number) => any) | undefined;
+    onCompositionend?: ((event: CompositionEvent) => any) | undefined;
+    onCompositionstart?: ((event: CompositionEvent) => any) | undefined;
+    onCompositionupdate?: ((event: CompositionEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    min: number;
+    max: number;
+    readonly: boolean;
+    type: import("./common").InputType;
+    disabled: boolean;
+    modelValue: string | number | null;
+    borderless: boolean;
+    inlaid: boolean;
+    autoHeight: import("./common").InputAutoHeight;
+    formatter: (value: string, trigger: "input" | "change") => string;
+    placeholder: string;
+    inputmode: "text" | "search" | "none" | "url" | "email" | "tel" | "numeric" | "decimal";
+    enterkeyhint: "search" | "done" | "enter" | "next" | "go" | "previous" | "send";
+    spellcheck: boolean | "true" | "false";
+    modelModifiers: import("./common").InputModelModifiers;
+    clearable: boolean;
+    showClearOnlyFocus: boolean;
+    showCount: boolean;
+    focused: boolean;
+    validateEvent: boolean;
+    showEye: boolean;
+    precision: number;
+    maxlength: number | string;
+    rows: string | number;
+    autofocus: boolean;
+    autocomplete: string;
+    autocorrect: string;
+    autocapitalize: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};