输入 - ABM Docs

尝试一下

`<w-text>`

w-text(style="width: 80%")

import { WidgetText } from 'abm-ui';
import { $ } from 'abm-utils';

const input = $<WidgetText>('w-text')!;
input.autoFill = [
	{ id: 'test', value: 'Hello world', label: 'Hello world' },
	'A',
	'B',
	'C',
	'D',
	'E',
	'F',
	'G',
	'H',
	'I',
	'J',
	'K',
	'L',
	'M',
	'N',
];
input.actionsLeft = [{ id: 'search', icon: 'Search' }];
input.actionsRight = [{ id: 'clear', icon: 'Dismiss', hidden: true }];

input.on('input', (event) => {
	console.log(event);
	input.actionsRight[0].hidden = !input.value;
	emit('input');
	update('value', input.value);
});

input.on('confirm', (event) => {
	console.log(event);
	emit('confirm');
});

input.on('autofill', (event) => {
	console.log(event);
	emit('autofill');
});

input.on('action', (event) => {
	console.log(event);
	if (event.value === 'clear') {
		input.value = '';
		input.actionsRight[0].hidden = true;
	}
	emit('action');
	update('value', input.value);
});

const { emit, update } = window.register({
	events: ['input', 'confirm', 'autofill', 'action'],
	attrs: [
		{
			id: 'value',
			type: 'string',
			value: input.value,
			action(v) {
				input.value = v;
			},
		},
		{
			id: 'placeholder',
			type: 'string',
			value: input.placeholder,
			action(v) {
				input.placeholder = v;
			},
		},
		{
			id: 'invalid',
			type: 'boolean',
			value: input.invalid,
			action(v) {
				input.invalid = v;
			},
		},
		{
			id: 'disabled',
			type: 'boolean',
			value: input.disabled,
			action(v) {
				input.disabled = v;
			},
		},
		{
			id: 'readOnly',
			type: 'boolean',
			value: input.readOnly,
			action(v) {
				input.readOnly = v;
			},
		},
		{
			id: 'autoSize',
			type: 'boolean',
			value: input.autoSize,
			action(v) {
				input.autoSize = v;
			},
		},
		{
			id: 'flat',
			type: 'boolean',
			value: input.flat,
			action(v) {
				input.flat = v;
			},
		},
	],
});

`<w-password>`

w-password(style="width: 80%")

import { WidgetPassword } from 'abm-ui';
import { $ } from 'abm-utils';

const input = $<WidgetPassword>('w-password')!;
input.autoFill = [
	{ id: 'test', value: 'Hello world', label: 'Hello world' },
	'A',
	'B',
	'C',
	'D',
	'E',
	'F',
	'G',
	'H',
	'I',
	'J',
	'K',
	'L',
	'M',
	'N',
];
input.actionsLeft = [{ id: '', icon: 'Password' }];
input.actionsRight = [
	{ id: 'clear', icon: 'Dismiss', hidden: true },
	{ id: 'visible', icon: 'EyeOff', toggle: true },
];

input.on('input', (event) => {
	console.log(event);
	input.actionsRight[0].hidden = !input.value;
	emit('input');
	update('value', input.value);
});

input.on('confirm', (event) => {
	console.log(event);
	emit('confirm');
});

input.on('autofill', (event) => {
	console.log(event);
	emit('autofill');
});

input.on('action', (event) => {
	console.log(event);
	if (event.value === 'clear') {
		input.value = '';
		input.actionsRight[0].hidden = true;
	} else {
		input.passwordVisible = !!input.actionsRight[1].checked;
		input.actionsRight[1].icon = input.passwordVisible ? 'Eye' : 'EyeOff';
		update('passwordVisible', input.passwordVisible);
	}
	emit('action');
	update('value', input.value);
});

const { emit, update } = window.register({
	events: ['input', 'confirm', 'autofill', 'action'],
	attrs: [
		{
			id: 'value',
			type: 'string',
			value: input.value,
			action(v) {
				input.value = v;
			},
		},
		{
			id: 'placeholder',
			type: 'string',
			value: input.placeholder,
			action(v) {
				input.placeholder = v;
			},
		},
		{
			id: 'passwordVisible',
			type: 'boolean',
			value: input.passwordVisible,
			action(v) {
				input.passwordVisible = v;
			},
		},
		{
			id: 'invalid',
			type: 'boolean',
			value: input.invalid,
			action(v) {
				input.invalid = v;
			},
		},
		{
			id: 'disabled',
			type: 'boolean',
			value: input.disabled,
			action(v) {
				input.disabled = v;
			},
		},
		{
			id: 'readOnly',
			type: 'boolean',
			value: input.readOnly,
			action(v) {
				input.readOnly = v;
			},
		},
		{
			id: 'autoSize',
			type: 'boolean',
			value: input.autoSize,
			action(v) {
				input.autoSize = v;
			},
		},
		{
			id: 'flat',
			type: 'boolean',
			value: input.flat,
			action(v) {
				input.flat = v;
			},
		},
	],
});

`<w-number>`

w-number(style="width: 80%")

import { WidgetNumber } from 'abm-ui';
import { $ } from 'abm-utils';

const input = $<WidgetNumber>('w-number')!;
input.autoFill = [{ id: 'test', value: 123456, label: 'Hello world' }, 1, 2, 3];

input.on('input', (event) => {
	console.log(event);
	emit('input');
	update('value', input.value);
});

input.on('confirm', (event) => {
	console.log(event);
	emit('confirm');
});

input.on('autofill', (event) => {
	console.log(event);
	emit('autofill');
});

input.on('action', (event) => {
	console.log(event);
	emit('action');
	update('value', input.value);
});

const { emit, update } = window.register({
	events: ['input', 'confirm', 'autofill', 'action'],
	attrs: [
		{
			id: 'value',
			type: 'number',
			value: input.value,
			action(v) {
				input.value = v;
			},
		},
		{
			id: 'textContent',
			type: 'string',
			value: input.textContent,
			action(v) {
				input.textContent = v;
			},
		},
		{
			id: 'default',
			type: 'number',
			value: input.default,
			action(v) {
				input.default = v;
			},
		},
		{
			id: 'min',
			type: 'number',
			value: input.min,
			action(v) {
				input.min = v;
			},
		},
		{
			id: 'max',
			type: 'number',
			value: input.max,
			action(v) {
				input.max = v;
			},
		},
		{
			id: 'step',
			type: 'number',
			min: 0,
			value: input.step,
			action(v) {
				input.step = v;
			},
		},
		{
			id: 'incrementStep',
			type: 'number',
			min: 0,
			value: input.incrementStep,
			action(v) {
				input.incrementStep = v;
			},
		},
		{
			id: 'invalid',
			type: 'boolean',
			value: input.invalid,
			action(v) {
				input.invalid = v;
			},
		},
		{
			id: 'disabled',
			type: 'boolean',
			value: input.disabled,
			action(v) {
				input.disabled = v;
			},
		},
		{
			id: 'readOnly',
			type: 'boolean',
			value: input.readOnly,
			action(v) {
				input.readOnly = v;
			},
		},
		{
			id: 'autoSize',
			type: 'boolean',
			value: input.autoSize,
			action(v) {
				input.autoSize = v;
			},
		},
		{
			id: 'flat',
			type: 'boolean',
			value: input.flat,
			action(v) {
				input.flat = v;
			},
		},
	],
});

`<w-text-field>`

w-text-field(style="width: 80%; height: 80%")

import { WidgetTextField } from 'abm-ui';
import { $ } from 'abm-utils';

const input = $<WidgetTextField>('w-text-field')!;

input.on('input', (event) => {
	console.log(event);
	emit('input');
	update('value', input.value);
});

input.on('confirm', (event) => {
	console.log(event);
	emit('confirm');
});

input.on('autofill', (event) => {
	console.log(event);
	emit('autofill');
});

input.on('action', (event) => {
	console.log(event);
	emit('action');
	update('value', input.value);
});

const { emit, update } = window.register({
	events: ['input', 'confirm', 'autofill', 'action'],
	attrs: [
		{
			id: 'value',
			type: 'string',
			value: input.value,
			action(v) {
				input.value = v;
			},
		},
		{
			id: 'placeholder',
			type: 'string',
			value: input.placeholder,
			action(v) {
				input.placeholder = v;
			},
		},
		{
			id: 'invalid',
			type: 'boolean',
			value: input.invalid,
			action(v) {
				input.invalid = v;
			},
		},
		{
			id: 'disabled',
			type: 'boolean',
			value: input.disabled,
			action(v) {
				input.disabled = v;
			},
		},
		{
			id: 'readOnly',
			type: 'boolean',
			value: input.readOnly,
			action(v) {
				input.readOnly = v;
			},
		},
		{
			id: 'autoSize',
			type: 'boolean',
			value: input.autoSize,
			action(v) {
				input.autoSize = v;
			},
		},
		{
			id: 'flat',
			type: 'boolean',
			value: input.flat,
			action(v) {
				input.flat = v;
			},
		},
	],
});

接口

WIP...