[duoyun-ui] Add common regexp pattern

Closed #169
mantou132 · Aug 24, 2024 · 79d724f · 79d724f
1 parent 7da0fbc
commit 79d724f
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 20 deletions.
diff --git 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
@@ -161,6 +161,7 @@ export class DuoyunFormElement<Data = Record<string, any>> 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`<div class="label" part=${DuoyunFormItemElement.label} @click=${() => this.focus()}>${this.label}</div>`}
+        : html`
+            <label class="label" part=${DuoyunFormItemElement.label} @click=${() => this.focus()}>
+              ${this.label}
+            </label>
+          `}
       ${this.#type === 'select'
         ? html`
             <dy-select
@@ -539,16 +543,18 @@ export class DuoyunFormItemElement extends GemElement {
       let invalidMessage = '';
       if (rule.required && (!this.value || (Array.isArray(this.value) && !this.value.length))) {
         invalidMessage = rule.message || locale.requiredMeg;
-      } else if (rule.pattern && !new RegExp(rule.pattern).test(String(this.value || ''))) {
-        invalidMessage = rule.message || locale.patternMsg;
-      } else if (rule.validator) {
-        try {
-          await rule.validator(this.value);
-        } catch (err) {
-          if (err instanceof Error) {
-            invalidMessage = err.message;
-          } else {
-            invalidMessage = err;
+      } else if (this.value) {
+        if (rule.pattern && !new RegExp(rule.pattern).test(String(this.value))) {
+          invalidMessage = rule.message || locale.patternMsg;
+        } else if (rule.validator) {
+          try {
+            await rule.validator(this.value);
+          } catch (err) {
+            if (err instanceof Error) {
+              invalidMessage = err.message;
+            } else {
+              invalidMessage = err;
+            }
           }
         }
       }

diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts
@@ -24,6 +24,7 @@ import { focusStyle } from '../lib/styles';
 import { commonHandle, hotkeys } from '../lib/hotkeys';
 import { clamp } from '../lib/number';
 import { throttle } from '../lib/timer';
+import { NUMBER } from '../lib/patterns';
 
 import './use';
 
@@ -242,7 +243,7 @@ export class DuoyunInputElement extends GemElement {
 
   #isNumberInvalid = (value: string) => {
     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
@@ -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
@@ -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;