@fairys/valtio-form-basic 0.0.12 → 0.0.13

package/lib/styles/index.css

@@ -0,0 +1,308 @@
+*, :before, :after, ::backdrop {
+  --un-rotate: 0;
+  --un-rotate-x: 0;
+  --un-rotate-y: 0;
+  --un-rotate-z: 0;
+  --un-scale-x: 1;
+  --un-scale-y: 1;
+  --un-scale-z: 1;
+  --un-skew-x: 0;
+  --un-skew-y: 0;
+  --un-translate-x: 0;
+  --un-translate-y: 0;
+  --un-translate-z: 0;
+  --un-pan-x: ;
+  --un-pan-y: ;
+  --un-pinch-zoom: ;
+  --un-scroll-snap-strictness: proximity;
+  --un-ordinal: ;
+  --un-slashed-zero: ;
+  --un-numeric-figure: ;
+  --un-numeric-spacing: ;
+  --un-numeric-fraction: ;
+  --un-border-spacing-x: 0;
+  --un-border-spacing-y: 0;
+  --un-ring-offset-shadow: 0 0 #0000;
+  --un-ring-shadow: 0 0 #0000;
+  --un-shadow-inset: ;
+  --un-shadow: 0 0 #0000;
+  --un-ring-inset: ;
+  --un-ring-offset-width: 0px;
+  --un-ring-offset-color: #fff;
+  --un-ring-width: 0px;
+  --un-ring-color: #93c5fd80;
+  --un-blur: ;
+  --un-brightness: ;
+  --un-contrast: ;
+  --un-drop-shadow: ;
+  --un-grayscale: ;
+  --un-hue-rotate: ;
+  --un-invert: ;
+  --un-saturate: ;
+  --un-sepia: ;
+  --un-backdrop-blur: ;
+  --un-backdrop-brightness: ;
+  --un-backdrop-contrast: ;
+  --un-backdrop-grayscale: ;
+  --un-backdrop-hue-rotate: ;
+  --un-backdrop-invert: ;
+  --un-backdrop-opacity: ;
+  --un-backdrop-saturate: ;
+  --un-backdrop-sepia: ;
+}
+
+.fairystaroform__absolute {
+  position: absolute;
+}
+
+.fairystaroform__relative {
+  position: relative;
+}
+
+.fairystaroform__bottom-_zkh1_-10px_zhk2_ {
+  bottom: -10px;
+}
+
+.fairystaroform__bottom-_zkh1_-14px_zhk2_ {
+  bottom: -14px;
+}
+
+.fairystaroform__bottom-_zkh1_-2px_zhk2_ {
+  bottom: -2px;
+}
+
+.fairystaroform__left-0 {
+  left: 0;
+}
+
+.fairystaroform__right-0 {
+  right: 0;
+}
+
+.fairystaroform__top-_zkh1_-4px_zhk2_ {
+  top: -4px;
+}
+
+.fairystaroform__z-10 {
+  z-index: 10;
+}
+
+.fairystaroform__grid {
+  display: grid;
+}
+
+.fairystaroform__box-border {
+  box-sizing: border-box;
+}
+
+.fairystaroform__h-full {
+  height: 100%;
+}
+
+.fairystaroform__min-h-_zkh1_32px_zhk2_ {
+  min-height: 32px;
+}
+
+.fairystaroform__w-full {
+  width: 100%;
+}
+
+.fairystaroform__flex {
+  display: flex;
+}
+
+.fairystaroform__flex-1 {
+  flex: 1;
+}
+
+.fairystaroform__flex-row {
+  flex-direction: row;
+}
+
+.fairystaroform__flex-col {
+  flex-direction: column;
+}
+
+.fairystaroform__items-start {
+  align-items: flex-start;
+}
+
+.fairystaroform__items-center {
+  align-items: center;
+}
+
+.fairystaroform__justify-start {
+  justify-content: flex-start;
+}
+
+.fairystaroform__justify-end {
+  justify-content: flex-end;
+}
+
+.fairystaroform__justify-center {
+  justify-content: center;
+}
+
+.fairystaroform__justify-between {
+  justify-content: space-between;
+}
+
+.fairystaroform__gap-_zkh1_4px_zhk2_ {
+  gap: 4px;
+}
+
+.fairystaroform__gap-_zkh1_6px_zhk2_ {
+  gap: 6px;
+}
+
+.fairystaroform__gap-_zkh1_8px_zhk2_ {
+  gap: 8px;
+}
+
+.fairystaroform__break-all {
+  word-break: break-all;
+}
+
+.fairystaroform__border {
+  border-width: 1px;
+}
+
+.fairystaroform__border-b {
+  border-bottom-width: 1px;
+}
+
+.fairystaroform__border-gray-200 {
+  --un-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--un-border-opacity));
+}
+
+.fairystaroform__border-b-gray-200 {
+  --un-border-opacity: 1;
+  --un-border-bottom-opacity: var(--un-border-opacity);
+  border-bottom-color: rgb(229 231 235 / var(--un-border-bottom-opacity));
+}
+
+.fairystaroform__rounded-_zkh1_8px_zhk2_ {
+  border-radius: 8px;
+}
+
+.fairystaroform__border-solid {
+  border-style: solid;
+}
+
+.fairystaroform__border-b-solid {
+  border-bottom-style: solid;
+}
+
+.fairystaroform__p-_zkh1_4px_zhk2_ {
+  padding: 4px;
+}
+
+.fairystaroform__px-_zkh1_4px_zhk2_ {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.fairystaroform__px-_zkh1_8px_zhk2_ {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.fairystaroform__py-_zkh1_10px_zhk2_ {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.fairystaroform__pb-_zkh1_12px_zhk2_ {
+  padding-bottom: 12px;
+}
+
+.fairystaroform__pt-_zkh1_8px_zhk2_ {
+  padding-top: 8px;
+}
+
+.fairystaroform__text-left {
+  text-align: left;
+}
+
+.fairystaroform__text-right {
+  text-align: right;
+}
+
+.fairystaroform__text-_zkh1_10px_zhk2_ {
+  font-size: 10px;
+}
+
+.fairystaroform__text-_zkh1_12px_zhk2_ {
+  font-size: 12px;
+}
+
+.fairystaroform__text-_zkh1_14px_zhk2_ {
+  font-size: 14px;
+}
+
+.fairystaroform__text-gray-800 {
+  --un-text-opacity: 1;
+  color: rgb(31 41 55 / var(--un-text-opacity));
+}
+
+.fairystaroform__text-red {
+  --un-text-opacity: 1;
+  color: rgb(248 113 113 / var(--un-text-opacity));
+}
+
+.fairystaroform__font-bold {
+  font-weight: 700;
+}
+
+.fairystaroform__transition-all {
+  transition-property: all;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.fairystaroform__duration-300 {
+  transition-duration: .3s;
+}
+
+.fairys-valtio-form-item-label.show-colon:after {
+  content: ":";
+  text-align: center;
+  margin: 0;
+  box-sizing: border-box;
+  margin-inline: .1rem;
+  display: inline-block;
+}
+
+.fairys-valtio-form-item-label.required:before {
+  content: "*";
+  color: red;
+  box-sizing: border-box;
+  margin-inline-end: .2rem;
+  display: inline-block;
+}
+
+.fairys-valtio-form-layout.fairys-valtio-form-layout-all-col-span {
+  grid-column: 1 / -1;
+}
+
+.fairys-valtio-form-layout.fairys-valtio-form-layout-box-shadow {
+  box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008;
+}
+
+.fairys-valtio-form-layout + .fairys-valtio-form-layout {
+  margin-top: 12px;
+}
+
+.fairys-valtio-form-layout-last-item-no-border > .fairys-valtio-form-layout-body > .fairys-valtio-form-item:last-child:not(.fairys-valtio-form-item-invalid-border-red), .fairys-valtio-form-layout-last-item-no-border > .fairys-valtio-form-layout-body > .fairys-valtio-form-item:last-child > .fairys-valtio-form-item-container > .fairys-valtio-form-item-body:not(.fairys-valtio-form-item-invalid-border-red) {
+  border-bottom: 0;
+}
+
+.fairys-valtio-form-item-invalid-border-red {
+  border-bottom-color: red !important;
+}
+
+.fairys-valtio-form-item-invalid-text-red > .fairys-valtio-form-item-container > .fairys-valtio-form-item-label, .fairys-valtio-form-item-invalid-text-red > .fairys-valtio-form-item-container > .fairys-valtio-form-item-body > .fairys-valtio-form-item-body-input {
+  color: red !important;
+}
+

package/package.json

@@ -2,8 +2,8 @@
   "name": "@fairys/valtio-form-basic",
   "author": "SunLxy <1011771396@qq.com>",
   "description": "使用 valtio 实现的表单基础库, 使其更加便捷，同时支持`PC`、`H5`、`Taro`，同时也更加灵活。",
-  "homepage": "https://github.com/autumn-fairy-tales/fairys-taro-react",
-  "version": "0.0.12",
+  "homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
+  "version": "0.0.13",
   "main": "lib/index.js",
   "types": "esm/index.d.ts",
   "module": "esm/index.js",
@@ -17,15 +17,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/autumn-fairy-tales/fairys-taro-react.git",
+    "url": "git+https://github.com/autumn-fairy-tales/valtio-form-basic.git",
     "directory": "packages/valtio-form-basic"
   },
   "files": [
     "src",
-    "esm"
+    "esm",
+    "lib"
   ],
   "dependencies": {
-    "@nutui/nutui-react-taro": "^3.0.18",
     "async-validator": "~4.2.5",
     "clsx": "2.1.1",
     "fast-copy": "~4.0.2",

package/src/{form → common}/hooks/index.tsx

@@ -1,6 +1,6 @@
 import { useRef, createContext, useContext, useMemo } from 'react';
 import { proxy, useSnapshot } from 'valtio';
-import { formatePath, formateName } from 'form/utils';
+import { formatePath, formateName } from 'common/utils';
 export interface FairysValtioFormParentAttrsState {
   name?: string;
 }
@@ -76,3 +76,11 @@ export const useFairysValtioFormAttrsName = (options: FairysValtioFormAttrsNameO
     paths: _paths,
   };
 };
+
+let localId = 0;
+export const useId = (suffix: string = 'form-item-input') => {
+  const count = useRef(localId++);
+  return useMemo(() => {
+    return `fairys-valtio-form_${count.current.toString(32)}_${suffix}`;
+  }, [count.current, suffix]);
+};

package/src/common/index.ts

@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './instance';
+export * from './utils';
+export * from './interface';

package/src/{form → common}/instance/index.ts

@@ -1,12 +1,36 @@
-import { MObject } from 'interface';
+import { MObject } from 'common/interface';
 import { createContext, useContext, useRef } from 'react';
-import { proxy, ref, snapshot, useSnapshot } from 'valtio';
+import { proxy, ref, snapshot, useSnapshot, unstable_getInternalStates } from 'valtio';
 import AsyncValidator, { RuleItem, ValidateFieldsError, Values } from 'async-validator';
 import { copy } from 'fast-copy';
-import { formatePath, get, set } from 'form/utils';
+import { formatePath, get, set, isObject } from 'common/utils';
+import { FairysValtioFormAttrsProps } from 'form/form';
 
 /**表单实例*/
 export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+  /***
+   * 判断值是否为代理对象
+   * @param value 值
+   * @returns 是否为代理对象
+   */
+  isValtioProxy = (value: any) => {
+    const { refSet } = unstable_getInternalStates();
+    const canProxyDefault = (x: unknown): boolean =>
+      isObject(x) &&
+      !refSet.has(x) &&
+      (Array.isArray(x) || !(Symbol.iterator in x)) &&
+      !(x instanceof WeakMap) &&
+      !(x instanceof WeakSet) &&
+      !(x instanceof Error) &&
+      !(x instanceof Number) &&
+      !(x instanceof Date) &&
+      !(x instanceof String) &&
+      !(x instanceof RegExp) &&
+      !(x instanceof ArrayBuffer) &&
+      !(x instanceof Promise);
+    return canProxyDefault(value);
+  };
+
   /**状态*/
   state = proxy<T>({} as T);
   /**
@@ -19,18 +43,29 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
   ctor = (options?: {
     formData?: Partial<T>;
     hideState?: Record<PropertyKey, boolean>;
-    initFormDataType?: 'deepCopy' | 'proxy' | 'immutable';
+    initFormDataType?: FairysValtioFormAttrsProps['initFormDataType'];
   }) => {
     const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
+    this.mountRules = {}; //由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)
+    this.nameToPaths = {}; //表单项名称到路径映射
     // 如果是 isProxy,则直接赋值
     this.errorState = proxy<Record<PropertyKey, string[]>>({});
     this.hideState = proxy<Record<PropertyKey, boolean>>(hideState ? copy(hideState) : {});
-    if (initFormDataType === 'deepCopy') {
-      this.state = proxy((formData ? copy(formData) : {}) as T);
-    } else if (initFormDataType === 'proxy') {
-      this.state = proxy(formData as T);
-    } else if (initFormDataType === 'immutable') {
-      this.state = formData as T;
+    // 判断是否是代理对象
+    const isValtioProxy = this.isValtioProxy(formData);
+    if (isValtioProxy) {
+      if (initFormDataType === 'deepCopy') {
+        this.state = proxy(copy(snapshot(formData)) as T);
+      } else {
+        this.state = formData as T;
+      }
+    } else {
+      if (initFormDataType === 'deepCopy') {
+        this.state = proxy(copy(formData || {}) as T);
+      }
+      {
+        this.state = proxy((formData || {}) as T);
+      }
     }
   };
   /**
@@ -119,9 +154,12 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
    * 清理所有数据
    */
   clear = () => {
-    this.state = proxy<T>({} as T);
-    this.errorState = proxy<Record<PropertyKey, string[]>>({});
-    this.hideState = proxy<Record<PropertyKey, boolean>>({});
+    this.state = proxy<T>({} as T); //表单值
+    this.errorState = proxy<Record<PropertyKey, string[]>>({}); //错误信息
+    this.hideState = proxy<Record<PropertyKey, boolean>>({}); //隐藏状态
+    this.mountRules = {}; //由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)
+    this.rules = {}; //表单项规则
+    this.nameToPaths = {}; //表单项名称到路径映射
   };
 
   // ===================================================规则处理================================================================

package/src/{form → common}/utils/index.ts

@@ -106,3 +106,5 @@ export function formateName(name?: string, parentName?: string) {
   }
   return '';
 }
+
+export const isObject = (x: unknown): x is object => typeof x === 'object' && x !== null;