diff --git a/packages/duoyun-ui/src/elements/color-panel.ts b/packages/duoyun-ui/src/elements/color-panel.ts index 1e2013fd..9b811776 100644 --- a/packages/duoyun-ui/src/elements/color-panel.ts +++ b/packages/duoyun-ui/src/elements/color-panel.ts @@ -23,11 +23,11 @@ import { rgbToHsl, hslToHsv, hsvToHsl, - isValidHexColor, } from '../lib/color'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; import { clamp, formatToPrecision } from '../lib/number'; +import { HEX_COLOR } from '../lib/patterns'; import type { PanEventDetail } from './gesture'; @@ -293,7 +293,7 @@ export class DuoyunColorPanelElement extends GemElement { } let str = '#' + evt.detail.trim().replace('#', '').replace(/[g-z]/gi, '').toLowerCase(); // valid color emit event - if (isValidHexColor(str)) { + if (HEX_COLOR.test(str)) { const aStr = Math.round(a * 255) .toString(16) .padStart(2, '0'); diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts index f0b6ecad..07032e11 100644 --- a/packages/duoyun-ui/src/elements/form.ts +++ b/packages/duoyun-ui/src/elements/form.ts @@ -161,6 +161,7 @@ export class DuoyunFormElement> extends GemElement { * @customElement dy-form-item-inline-group */ @customElement('dy-form-item-inline-group') +@aria({ role: 'group' }) export class DuoyunFormItemInlineGroupElement extends GemElement {} const formItemStyle = createCSSSheet(css` @@ -176,7 +177,6 @@ const formItemStyle = createCSSSheet(css` content: '*'; } .label { - cursor: default; font-size: 0.875em; line-height: 1.2; margin-bottom: 0.4em; @@ -357,7 +357,11 @@ export class DuoyunFormItemElement extends GemElement { return html` ${this.#type === 'checkbox' ? '' - : html`
this.focus()}>${this.label}
`} + : html` + + `} ${this.#type === 'select' ? html` { if (this.#isNumberType) { - return !/^-?(\.|\d)*$/.test(value) || value.replace(/\d/g, '').includes('..'); + return !NUMBER.test(value); } }; diff --git a/packages/duoyun-ui/src/lib/color.ts b/packages/duoyun-ui/src/lib/color.ts index 7390b17a..97b5248e 100644 --- a/packages/duoyun-ui/src/lib/color.ts +++ b/packages/duoyun-ui/src/lib/color.ts @@ -57,11 +57,6 @@ export function randomColor(type?: 'hex' | 'rgba' | 'hsla'): HexColor | HSLColor } } -export function isValidHexColor(str: string): str is HexColor { - // https://stackoverflow.com/a/9682781/7167456 - return /^#(?:[0-9a-f]{3}){1,2}$/i.test(str); -} - export function parseHexColor(str: HexColor): RGBA { const s = str.replace('#', ''); const fullHex = s.length === 3 || s.length === 4 ? s.replace(/\w/g, ($1) => $1 + $1) : s; diff --git a/packages/duoyun-ui/src/lib/patterns.ts b/packages/duoyun-ui/src/lib/patterns.ts new file mode 100644 index 00000000..24e3a361 --- /dev/null +++ b/packages/duoyun-ui/src/lib/patterns.ts @@ -0,0 +1,19 @@ +export const URL = + /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/; + +export const EMAIL = + /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/; + +export const CJK = /^(\p{sc=Han}|\p{sc=Katakana}|\p{sc=Hiragana}|\p{sc=Hang})+$/u; + +export const ASCII = /^[ -~]+$/; + +export const USERNAME = /^[a-z0-9_-]{4,}$/i; + +export const PASSWORD = /^.*(?=.{6,})(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ])(?=.*\d).*$/; + +export const NUMBER = /^-?\d*.?\d+$/; + +export const IPv4 = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; + +export const HEX_COLOR = /^#([0-9a-f]{3}){1,2}$/i;