@fairys/valtio-form-basic 0.0.12 → 0.0.13

package/esm/form/layout.js

@@ -48,7 +48,8 @@ function useFairysValtioFormLayoutAttrs(props) {
     const parent_isInvalidBorderRed = state.isInvalidBorderRed;
     const parent_isInvalidTextRed = state.isInvalidTextRed;
     const parent_showColon = state.showColon;
-    const { colCount = parent_colCount, errorLayout = parent_errorLayout, labelMode = parent_labelMode, formItemClassName = parent_formItemClassName, formItemStyle = parent_formItemStyle, formItemLabelClassName = parent_formItemLabelClassName, formItemLabelStyle = parent_formItemLabelStyle, formItemBodyClassName = parent_formItemBodyClassName, formItemBodyStyle = parent_formItemBodyStyle, itemBorderType = parent_borderedType, itemBorderColor = parent_itemBorderColor, lastItemBordered = true, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, showColon = parent_showColon, gap, isAllColSpan = false, className, style, headerClassName, headerStyle, bodyClassName, bodyStyle, bordered, boxShadow } = props;
+    const parent_platform = state.platform;
+    const { colCount = parent_colCount, errorLayout = parent_errorLayout, labelMode = parent_labelMode, formItemClassName = parent_formItemClassName, formItemStyle = parent_formItemStyle, formItemLabelClassName = parent_formItemLabelClassName, formItemLabelStyle = parent_formItemLabelStyle, formItemBodyClassName = parent_formItemBodyClassName, formItemBodyStyle = parent_formItemBodyStyle, itemBorderType = parent_borderedType, itemBorderColor = parent_itemBorderColor, lastItemBordered = true, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, showColon = parent_showColon, platform = parent_platform, gap, isAllColSpan = false, className, style, headerClassName, headerStyle, bodyClassName, bodyStyle, bordered, boxShadow } = props;
     useMemo(()=>formLayoutInstance.updated({
             colCount,
             errorLayout,
@@ -63,7 +64,8 @@ function useFairysValtioFormLayoutAttrs(props) {
             itemBorderColor,
             isInvalidBorderRed,
             isInvalidTextRed,
-            showColon
+            showColon,
+            platform
         }), [
         colCount,
         errorLayout,
@@ -78,7 +80,8 @@ function useFairysValtioFormLayoutAttrs(props) {
         itemBorderColor,
         isInvalidBorderRed,
         isInvalidTextRed,
-        showColon
+        showColon,
+        platform
     ]);
     const layoutCls = useMemo(()=>clsx("fairys-valtio-form-layout fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__text-_zkh1_12px_zhk2_ fairystaroform__w-full fairystaroform__box-border fairystaroform__rounded-_zkh1_8px_zhk2_", {
             'fairys-valtio-form-layout-all-col-span': isAllColSpan,
@@ -102,7 +105,7 @@ function useFairysValtioFormLayoutAttrs(props) {
     ]);
     const headerTitleCls = useMemo(()=>clsx("fairys-valtio-form-layout-header-title fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__text-_zkh1_14px_zhk2_ fairystaroform__font-bold fairystaroform__box-border"), []);
     const headerExtraCls = useMemo(()=>clsx("fairys-valtio-form-layout-header-extra fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__box-border"), []);
-    const body_base = useMemo(()=>clsx('fairys-valtio-form-layout-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__px-_zkh1_8px_zhk2_ fairystaroform__w-full fairystaroform__grid fairystaroform__gap-_zkh1_2px_zhk2_ fairystaroform__box-border', bodyClassName), [
+    const body_base = useMemo(()=>clsx('fairys-valtio-form-layout-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__px-_zkh1_8px_zhk2_ fairystaroform__w-full fairystaroform__grid  fairystaroform__box-border fairystaroform__pt-_zkh1_8px_zhk2_ fairystaroform__pb-_zkh1_12px_zhk2_ fairystaroform__gap-_zkh1_6px_zhk2_', bodyClassName), [
         bodyClassName
     ]);
     const styleBase = useMemo(()=>{

package/esm/index.d.ts

@@ -1,5 +1,4 @@
-export * from './form/hooks';
-export * from './form/instance';
+export * from './common';
 export * from './form/layout';
 export * from './form/form';
 export * from './form/form.item';

package/esm/index.js

@@ -1,5 +1,4 @@
-export * from "./form/hooks/index.js";
-export * from "./form/instance/index.js";
+export * from "./common/index.js";
 export * from "./form/layout.js";
 export * from "./form/form.js";
 export * from "./form/form.item.js";

package/esm/styles/index.css

@@ -59,6 +59,10 @@
   position: relative;
 }
 
+.fairystaroform__bottom-_zkh1_-10px_zhk2_ {
+  bottom: -10px;
+}
+
 .fairystaroform__bottom-_zkh1_-14px_zhk2_ {
   bottom: -14px;
 }
@@ -119,6 +123,10 @@
   flex-direction: column;
 }
 
+.fairystaroform__items-start {
+  align-items: flex-start;
+}
+
 .fairystaroform__items-center {
   align-items: center;
 }
@@ -139,14 +147,14 @@
   justify-content: space-between;
 }
 
-.fairystaroform__gap-_zkh1_2px_zhk2_ {
-  gap: 2px;
-}
-
 .fairystaroform__gap-_zkh1_4px_zhk2_ {
   gap: 4px;
 }
 
+.fairystaroform__gap-_zkh1_6px_zhk2_ {
+  gap: 6px;
+}
+
 .fairystaroform__gap-_zkh1_8px_zhk2_ {
   gap: 8px;
 }
@@ -205,6 +213,14 @@
   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;
 }

package/lib/common/hooks/index.d.ts

@@ -0,0 +1,35 @@
+export interface FairysValtioFormParentAttrsState {
+    name?: string;
+}
+/***
+ * 父级属性
+ */
+export declare class FairysValtioFormParentAttrs {
+    state: FairysValtioFormParentAttrsState;
+    updated: (attrs: Record<string, any>) => void;
+    /***更新父级字段值*/
+    updatedName: (name?: string, parentName?: string) => void;
+}
+/**初始化父级属性*/
+export declare const useFairysValtioFormParentAttrs: (instance?: FairysValtioFormParentAttrs) => FairysValtioFormParentAttrs;
+/***父级属性上下文*/
+export declare const FairysValtioFormParentAttrsContext: import("react").Context<FairysValtioFormParentAttrs>;
+/***获取父级属性实例*/
+export declare const useFairysValtioFormParentAttrsContext: () => FairysValtioFormParentAttrs;
+/***获取父级属性状态*/
+export declare const useFairysValtioFormParentAttrsState: () => readonly [{
+    readonly name?: string;
+}, FairysValtioFormParentAttrs];
+export interface FairysValtioFormAttrsNameOptions {
+    name?: string;
+    /**是否拼接父级字段名*/
+    isJoinParentField?: boolean;
+}
+/***获取属性名和路径*/
+export declare const useFairysValtioFormAttrsName: (options?: FairysValtioFormAttrsNameOptions) => {
+    formAttrsNameInstance: FairysValtioFormParentAttrs;
+    parentName: string;
+    name: string;
+    paths: (number | symbol)[] | (string | number)[];
+};
+export declare const useId: (suffix?: string) => string;

package/lib/common/hooks/index.js

@@ -0,0 +1,117 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useId: ()=>useId,
+    FairysValtioFormParentAttrsContext: ()=>FairysValtioFormParentAttrsContext,
+    useFairysValtioFormAttrsName: ()=>useFairysValtioFormAttrsName,
+    useFairysValtioFormParentAttrs: ()=>useFairysValtioFormParentAttrs,
+    useFairysValtioFormParentAttrsContext: ()=>useFairysValtioFormParentAttrsContext,
+    FairysValtioFormParentAttrs: ()=>FairysValtioFormParentAttrs,
+    useFairysValtioFormParentAttrsState: ()=>useFairysValtioFormParentAttrsState
+});
+const external_react_namespaceObject = require("react");
+const external_valtio_namespaceObject = require("valtio");
+const index_js_namespaceObject = require("../utils/index.js");
+class FairysValtioFormParentAttrs {
+    state = (0, external_valtio_namespaceObject.proxy)({
+        name: ''
+    });
+    updated = (attrs)=>{
+        this.state = {
+            ...this.state,
+            ...attrs
+        };
+    };
+    updatedName = (name, parentName)=>{
+        this.state.name = (0, index_js_namespaceObject.formateName)(name, parentName);
+    };
+}
+const useFairysValtioFormParentAttrs = (instance)=>{
+    const parentAttrs = (0, external_react_namespaceObject.useRef)();
+    if (!parentAttrs.current) if (instance) parentAttrs.current = instance;
+    else parentAttrs.current = new FairysValtioFormParentAttrs();
+    return parentAttrs.current;
+};
+const FairysValtioFormParentAttrsContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(new FairysValtioFormParentAttrs());
+const useFairysValtioFormParentAttrsContext = ()=>(0, external_react_namespaceObject.useContext)(FairysValtioFormParentAttrsContext);
+const useFairysValtioFormParentAttrsState = ()=>{
+    const instance = useFairysValtioFormParentAttrsContext();
+    const state = (0, external_valtio_namespaceObject.useSnapshot)(instance.state);
+    return [
+        state,
+        instance
+    ];
+};
+const useFairysValtioFormAttrsName = (options = {})=>{
+    const { name, isJoinParentField = true } = options;
+    const formAttrsNameInstance = useFairysValtioFormParentAttrs();
+    const [state] = useFairysValtioFormParentAttrsState();
+    const parentName = state.name;
+    const _name = (0, external_react_namespaceObject.useMemo)(()=>isJoinParentField ? (0, index_js_namespaceObject.formateName)(name, parentName) : name, [
+        name,
+        parentName,
+        isJoinParentField
+    ]);
+    const _paths = (0, external_react_namespaceObject.useMemo)(()=>(0, index_js_namespaceObject.formatePath)(_name), [
+        _name
+    ]);
+    (0, external_react_namespaceObject.useMemo)(()=>formAttrsNameInstance.updatedName(_name), [
+        _name
+    ]);
+    return {
+        formAttrsNameInstance,
+        parentName,
+        name: _name,
+        paths: _paths
+    };
+};
+let localId = 0;
+const useId = (suffix = 'form-item-input')=>{
+    const count = (0, external_react_namespaceObject.useRef)(localId++);
+    return (0, external_react_namespaceObject.useMemo)(()=>`fairys-valtio-form_${count.current.toString(32)}_${suffix}`, [
+        count.current,
+        suffix
+    ]);
+};
+exports.FairysValtioFormParentAttrs = __webpack_exports__.FairysValtioFormParentAttrs;
+exports.FairysValtioFormParentAttrsContext = __webpack_exports__.FairysValtioFormParentAttrsContext;
+exports.useFairysValtioFormAttrsName = __webpack_exports__.useFairysValtioFormAttrsName;
+exports.useFairysValtioFormParentAttrs = __webpack_exports__.useFairysValtioFormParentAttrs;
+exports.useFairysValtioFormParentAttrsContext = __webpack_exports__.useFairysValtioFormParentAttrsContext;
+exports.useFairysValtioFormParentAttrsState = __webpack_exports__.useFairysValtioFormParentAttrsState;
+exports.useId = __webpack_exports__.useId;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FairysValtioFormParentAttrs",
+    "FairysValtioFormParentAttrsContext",
+    "useFairysValtioFormAttrsName",
+    "useFairysValtioFormParentAttrs",
+    "useFairysValtioFormParentAttrsContext",
+    "useFairysValtioFormParentAttrsState",
+    "useId"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/common/index.d.ts

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

package/lib/common/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __webpack_modules__ = {
+    "./hooks": function(module) {
+        module.exports = require("./hooks/index.js");
+    },
+    "./instance": function(module) {
+        module.exports = require("./instance/index.js");
+    },
+    "./interface": function(module) {
+        module.exports = require("./interface.js");
+    },
+    "./utils": function(module) {
+        module.exports = require("./utils/index.js");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./hooks");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _hooks__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _hooks__WEBPACK_IMPORTED_MODULE_0__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _instance__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./instance");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _instance__WEBPACK_IMPORTED_MODULE_1__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _instance__WEBPACK_IMPORTED_MODULE_1__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./utils");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _utils__WEBPACK_IMPORTED_MODULE_2__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _utils__WEBPACK_IMPORTED_MODULE_2__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _interface__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./interface");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _interface__WEBPACK_IMPORTED_MODULE_3__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _interface__WEBPACK_IMPORTED_MODULE_3__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+})();
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/common/instance/index.d.ts

@@ -0,0 +1,88 @@
+import { MObject } from '../interface';
+import { RuleItem, ValidateFieldsError, Values } from 'async-validator';
+import { FairysValtioFormAttrsProps } from '../../form/form';
+/**表单实例*/
+export declare class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+    /***
+     * 判断值是否为代理对象
+     * @param value 值
+     * @returns 是否为代理对象
+     */
+    isValtioProxy: (value: any) => boolean;
+    /**状态*/
+    state: T;
+    /**
+     * 错误信息
+     */
+    errorState: Record<PropertyKey, string[]>;
+    /**隐藏状态*/
+    hideState: Record<PropertyKey, boolean>;
+    /**初始化表单值*/
+    ctor: (options?: {
+        formData?: Partial<T>;
+        hideState?: Record<PropertyKey, boolean>;
+        initFormDataType?: FairysValtioFormAttrsProps["initFormDataType"];
+    }) => void;
+    /**
+     * 更新数据
+     * @param state 更新数据对象
+     * @param isValidate 是否验证(可选)
+     */
+    updated: <M = T>(state: Partial<M>, isValidate?: boolean) => void;
+    /**根据路径设置值
+     * @param path 值路径
+     * @param value 值
+     */
+    updatedValueByPaths: (path: PropertyKey, value: any) => void;
+    /**
+     * 更新行数据的隐藏信息
+     * @param objectHideInfo 行数据隐藏信息对象
+     */
+    updatedHideInfo: (objectHideInfo: Record<PropertyKey, boolean>) => this;
+    /**
+     * 清理隐藏信息
+     */
+    clearHideInfo: (fields?: PropertyKey[]) => this;
+    /**
+     * 更新行数据的错误信息
+     * @param objectErrorInfo 行数据错误信息对象
+     */
+    updatedErrorInfo: (objectErrorInfo: Record<PropertyKey, string[]>) => this;
+    /**
+     * 清理错误信息
+     */
+    clearErrorInfo: (fields?: PropertyKey[]) => this;
+    /**
+     * 清理所有数据
+     */
+    clear: () => void;
+    /**由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)*/
+    mountRules: Record<PropertyKey, RuleItem[]>;
+    /**移除表单项挂载规则*/
+    removeRules: (name: PropertyKey) => void;
+    /**表单项规则*/
+    rules: Record<PropertyKey, RuleItem[]>;
+    /**表单项名称到路径映射*/
+    nameToPaths: Record<PropertyKey, PropertyKey[]>;
+    /**验证表单项规则
+     * @param fields 要验证的字段(可选)
+     * @param isReturn 是否返回验证结果(可选)
+     */
+    validate: (fields?: PropertyKey[], isReturn?: boolean) => Promise<ValidateFieldsError | Values>;
+    /**
+     * 验证某些前缀的字段
+     * @param prefix 前缀字段数组
+     * @param isReturn 是否返回验证结果(可选)
+     */
+    validatePrefixFields: (prefix: string[], isReturn?: boolean) => Promise<ValidateFieldsError | Values>;
+}
+/**声明实例*/
+export declare function useFairysValtioFormInstance<T extends MObject<T> = object>(instance?: FairysValtioFormInstance<T>): FairysValtioFormInstance<T>;
+/**表单实例上下文*/
+export declare const FairysValtioFormInstanceContext: import("react").Context<FairysValtioFormInstance<any>>;
+/**表单实例上下文*/
+export declare function useFairysValtioFormInstanceContext<T extends MObject<T> = object>(): FairysValtioFormInstance<T>;
+/**状态取值*/
+export declare function useFairysValtioFormInstanceContextState<T extends MObject<T> = object>(): [T, Record<PropertyKey, string[]>, FairysValtioFormInstance<T>, any, any];
+/**隐藏组件状态取值*/
+export declare function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = object>(): [Record<PropertyKey, boolean>, FairysValtioFormInstance<T>, any];