@fairys/valtio-form-basic 0.0.12 → 1.0.0

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": "1.0.0",
   "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,42 @@
-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, removeValueByPaths } from 'common/utils';
+import { FairysValtioFormAttrsProps } from 'form/form';
 
 /**表单实例*/
 export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+  /**
+   * 表单值改变时回调
+   * @param path 表单项路径
+   * @param value 表单项值
+   */
+  onValuesChange?: (path: PropertyKey, value: any) => void;
+  /***
+   * 判断值是否为代理对象
+   * @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 +49,30 @@ 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 || {};
-    // 如果是 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;
+    this.clear();
+    this.updatedHideInfo(hideState ? copy(hideState) : {});
+    // 判断是否是代理对象
+    const isValtioProxy = this.isValtioProxy(formData);
+    if (isValtioProxy) {
+      if (initFormDataType === 'deepCopy') {
+        // this.state = proxy(copy(snapshot(formData)) as T);
+        this.updated(copy(snapshot(formData)) as T, false);
+      } else {
+        // this.state = formData as T;
+        this.updated(formData as T, false);
+      }
+    } else {
+      if (initFormDataType === 'deepCopy') {
+        // this.state = proxy(copy(formData || {}) as T);
+        this.updated(copy(formData || {}) as T, false);
+      }
+      {
+        // this.state = proxy((formData || {}) as T);
+        this.updated((formData || {}) as T, false);
+      }
     }
   };
   /**
@@ -56,7 +98,28 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
   updatedValueByPaths = (path: PropertyKey, value: any) => {
     set(this.state, formatePath(path), value);
     this.validate([path], false);
+    this.onValuesChange?.(path, value);
   };
+
+  /**表单项卸载移除保存值*/
+  removeValueByPaths = (path: PropertyKey) => {
+    removeValueByPaths(this.state, formatePath(path));
+  };
+  /**
+   * 清理值
+   */
+  clearValue = (fields?: PropertyKey[]) => {
+    let _fields = fields;
+    if (!Array.isArray(fields)) {
+      _fields = Object.keys(this.state) as PropertyKey[];
+    }
+    for (let index = 0; index < _fields.length; index++) {
+      const field = _fields[index];
+      delete this.state[field];
+    }
+    return this;
+  };
+
   // ===================================================隐藏状态================================================================
   /**
    * 更新行数据的隐藏信息
@@ -119,9 +182,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.clearValue();
+    this.clearHideInfo();
+    this.clearErrorInfo();
+    this.mountRules = {}; //由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)
+    this.rules = {}; //表单项规则
+    this.nameToPaths = {}; //表单项名称到路径映射
   };
 
   // ===================================================规则处理================================================================
@@ -139,7 +205,10 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
    * @param fields 要验证的字段(可选)
    * @param isReturn 是否返回验证结果(可选)
    */
-  validate = async (fields?: PropertyKey[], isReturn: boolean = true): Promise<ValidateFieldsError | Values> => {
+  validate = async (
+    fields?: PropertyKey[],
+    isReturn: boolean = true,
+  ): Promise<ValidateFieldsError | Values | Partial<T>> => {
     const rules = {
       ...this.rules,
       ...this.mountRules,
@@ -213,7 +282,9 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
 }
 
 /**声明实例*/
-export function useFairysValtioFormInstance<T extends MObject<T> = object>(instance?: FairysValtioFormInstance<T>) {
+export function useFairysValtioFormInstance<T extends MObject<T> = Record<string, any>>(
+  instance?: FairysValtioFormInstance<T>,
+) {
   const ref = useRef<FairysValtioFormInstance<T>>();
   if (!ref.current) {
     if (instance) {
@@ -231,12 +302,12 @@ export const FairysValtioFormInstanceContext = createContext<FairysValtioFormIns
 );
 
 /**表单实例上下文*/
-export function useFairysValtioFormInstanceContext<T extends MObject<T> = object>() {
+export function useFairysValtioFormInstanceContext<T extends MObject<T> = Record<string, any>>() {
   return useContext(FairysValtioFormInstanceContext) as FairysValtioFormInstance<T>;
 }
 
 /**状态取值*/
-export function useFairysValtioFormInstanceContextState<T extends MObject<T> = object>() {
+export function useFairysValtioFormInstanceContextState<T extends MObject<T> = Record<string, any>>() {
   const instance = useFairysValtioFormInstanceContext<T>();
   const state = useSnapshot(instance.state) as T;
   const errorState = useSnapshot(instance.errorState) as Record<PropertyKey, string[]>;
@@ -250,7 +321,7 @@ export function useFairysValtioFormInstanceContextState<T extends MObject<T> = o
 }
 
 /**隐藏组件状态取值*/
-export function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = object>() {
+export function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = Record<string, any>>() {
   const instance = useFairysValtioFormInstanceContext<T>();
   const hideState = useSnapshot(instance.hideState) as Record<PropertyKey, boolean>;
   return [hideState, instance, (hideState as any).__defaultValue] as [
@@ -259,3 +330,21 @@ export function useFairysValtioFormInstanceContextHideState<T extends MObject<T>
     any,
   ];
 }
+/**
+ * 传递表单实例获取状态
+ */
+export function useFairysValtioFormInstanceToState<T extends MObject<T> = Record<string, any>>(
+  formInstance: FairysValtioFormInstance<T>,
+) {
+  const state = useSnapshot(formInstance.state) as T;
+  return state as T;
+}
+/**
+ * 传递表单实例获取隐藏状态
+ */
+export function useFairysValtioFormInstanceToHideState<T extends MObject<T> = Record<string, any>>(
+  formInstance: FairysValtioFormInstance<T>,
+) {
+  const hideState = useSnapshot(formInstance.hideState) as Record<PropertyKey, boolean>;
+  return hideState as Record<PropertyKey, boolean>;
+}

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

@@ -50,6 +50,25 @@ export function get<TDefault = unknown>(value: any, segments: PropertyKey[]): TD
   return current;
 }
 
+/***
+ * 移除值
+ * @param value 任意值
+ * @param segments 键路径
+ */
+export function removeValueByPaths(value: any, segments: PropertyKey[]) {
+  // 移除字段
+  let current: any = value;
+  const lg = segments.length;
+  for (let index = 0; index < lg; index++) {
+    const key = segments[index];
+    if (index === lg - 1) {
+      delete current[key];
+    } else {
+      current = current?.[key];
+    }
+  }
+}
+
 /***
  * 格式化路径，将路径中的数组索引转换为数字
  * @param path 路径
@@ -106,3 +125,5 @@ export function formateName(name?: string, parentName?: string) {
   }
   return '';
 }
+
+export const isObject = (x: unknown): x is object => typeof x === 'object' && x !== null;