ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
238 lines (237 loc) • 7.25 kB
TypeScript
import { RanElement } from '@/utils/index';
import { EventManager } from '@/utils/builder';
import '@/components/icon/index';
export declare class Input extends RanElement {
static formAssociated: boolean;
_internals?: ElementInternals;
static get observedAttributes(): string[];
_events: EventManager;
_shadowDom: ShadowRoot;
_input: HTMLDivElement;
_label: HTMLLabelElement | undefined;
_inputContent: HTMLInputElement;
_icon: HTMLElement | undefined;
_message: HTMLElement | undefined;
constructor();
/**
* @description: 聚焦到内部原生 <input>。宿主自身不在 tab 序、也无内建 focus 行为，
* 需显式把 `hostEl.focus()` 转发到 shadow 内真实输入框，才能支持
* 程序化聚焦 / "/" 之类快捷键 / label 点击聚焦（closed shadow 下外部无法自行触达）。
* @param {FocusOptions} options 原生 focus 选项（如 preventScroll）
*/
focus(options?: FocusOptions): void;
/**
* @description: 让内部 <input> 失焦，转发 `hostEl.blur()`。
*/
blur(): void;
/**
* @description: 选中内部 <input> 的全部文本，便于"聚焦即全选"的快捷输入体验。
*/
select(): void;
/**
* @description: 获取 input 的值
* @return {String}
*/
get value(): string;
/**
* @description: 设置 input 的值
* @param {String} value
*/
set value(value: string);
/**
* @description: 获取 input 的占位字符
* @return {String}
*/
get placeholder(): string;
/**
* @description: 设置 input 的占位字符
* @param {String} value
*/
set placeholder(value: string);
/**
* @description: input 是否为必选
* @return {String}
*/
get required(): boolean;
/**
* @description: 设置 input 是否为必选，除非设置成 false，否则都是必填
* @param {*} value
*/
set required(value: boolean | string);
/**
* @description: 获取 input 上 disabled 属性
* @return {String | null}
*/
get disabled(): boolean;
/**
* @description: 设置 input 的 disabled 属性
* @param {String} value
*/
set disabled(value: boolean | string);
/**
* @description: 获取类似于 Metiral Design 的输入体验。
*/
get label(): string;
/**
* @description: 设置类似于 Metiral Design 的输入体验。
*/
set label(value: string);
/**
* @description: 获取 input 框的状态
*/
get status(): string;
/**
* @description: 设置 input 框的状态
*/
set status(value: string);
/**
* @description: 获取下方的提示/校验文案
*/
get message(): string;
/**
* @description: 设置下方的提示/校验文案（配合 status 作为非颜色线索）
*/
set message(value: string);
/**
* @description: 与 form 组件联动时，收集的属性名
* @return {String}
*/
get name(): string;
/**
* @description: 设置 name 属性
* @param {string} value
*/
set name(value: string);
/**
* @description: 当 input 类型为 number 类型时，可以获取 min 属性
* @return {String}
*/
get min(): string;
/**
* @description: 当 input 类型为 number 类型时，设置 min 属性
* @param {string} value
*/
set min(value: string);
/**
* @description: 当 input 类型为 number 类型时，可以获取 max 属性
* @return {String}
*/
get max(): string;
/**
* @description: 当 input 类型为 number 类型时，设置 max 属性
* @param {string} value
*/
set max(value: string);
/**
* @description: 当 input 类型为 number 类型时，可以获取 step 属性
* @return {String}
*/
get step(): string;
/**
* @description: 当 input 类型为 number 类型时，设置 step 属性
* @param {string} value
*/
set step(value: string);
/**
* @description: 获取一个 icon
* @return {String}
*/
get icon(): string;
/**
* @description: 设置 icon 来表示标识
* @param {string|null} value
*/
set icon(value: string);
/**
* @description: 获取 input 的类型
* @return {string|null}
*/
get type(): string;
/**
* @description: 设置 input 的类型
* @param {string|null} value
*/
set type(value: string);
get sheet(): string;
set sheet(value: string);
handlerExternalCss: () => void;
/**
* @description: 原生的 input 方法
* @param {Event} event
*/
customInput: (event: Event) => void;
/**
* @description: change 事件——与原生一致，在失焦（提交）时触发，而非每次输入
*/
customChange: () => void;
/**
* @description: 监听 placeholder 属性函数
* @param {string} name
* @param {string} value
*/
listenPlaceholder: (name: string, value: string) => void;
/**
* @description: 监听 label 属性函数
* @param {string} name
* @param {string} value
*/
listenLabel: (name: string, value: string) => void;
/**
* @description: 监听 type 属性
* @param {string} name
* @param {string} value
*/
listenType: (name: string, value: string) => void;
/**
* @description: 监听 status 属性
* @param {string} name
* @param {string} value
*/
listenStatus: (name: string, value: string) => void;
/**
* @description: 监听 message 属性，渲染/更新字段下方的提示文案
* @param {string} name
* @param {string} value
*/
listenMessage: (name: string, value: string) => void;
/**
* @description: 监听 min/max/step 属性，仅在 type="number" 时转发到内部 <input>
* 以启用原生数值约束；否则从内部 <input> 移除。
* @param {string} name
* @param {string} value
*/
listenNumericConstraint: (name: string, value: string) => void;
/**
* @description: 监听 required 属性，转发到内部 <input> 以启用原生约束校验
* @param {string} name
* @param {string} value
*/
listenRequired: (name: string, value: string) => void;
/**
* @description: 监听 disabled 属性
* @param {string} name
* @param {string} value
*/
listenDisabled: (name: string, value: string) => void;
/**
* @description: 监听 icon 属性
* @param {string} name
* @param {string} value
*/
listenIcon: (name: string, value: string, oldValue: string) => void;
/**
* @description: 处理 icon 属性的问题
*/
dealIcon: () => void;
/**
* @description: 聚合监听事件
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
*/
listenEvent: (name: string, oldValue: string, newValue: string) => void;
connectedCallback(): void;
disconnectedCallback(): void;
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
}
export default Input;