@fairys/valtio-form-basic 0.0.8

package/esm/form/layout.js

@@ -0,0 +1,125 @@
+import { createContext, useContext, useMemo, useRef } from "react";
+import clsx from "clsx";
+import { proxy, useSnapshot } from "valtio";
+class FairysValtioFormLayoutInstance {
+    state = proxy({
+        colCount: 1,
+        errorLayout: 'right-bottom',
+        labelMode: 'between',
+        borderedType: 'bottom'
+    });
+    updated = (options = {})=>{
+        const keys = Object.keys(options);
+        for(let index = 0; index < keys.length; index++){
+            const key = keys[index];
+            this.state[key] = options[key];
+        }
+    };
+}
+const useFairysValtioFormLayoutInstance = (instance)=>{
+    const ref = useRef();
+    if (!ref.current) if (instance) ref.current = instance;
+    else ref.current = new FairysValtioFormLayoutInstance();
+    return ref.current;
+};
+const FairysValtioFormLayoutContext = /*#__PURE__*/ createContext(new FairysValtioFormLayoutInstance());
+const useFairysValtioFormLayoutContext = ()=>{
+    const instance = useContext(FairysValtioFormLayoutContext);
+    const state = useSnapshot(instance.state);
+    return [
+        state,
+        instance
+    ];
+};
+function useFairysValtioFormLayoutAttrs(props) {
+    const formLayoutInstance = useFairysValtioFormLayoutInstance();
+    const [state] = useFairysValtioFormLayoutContext();
+    const parent_colCount = state.colCount || 1;
+    const parent_errorLayout = state.errorLayout || 'right-bottom';
+    const parent_labelMode = state.labelMode || 'between';
+    const parent_formItemClassName = state.formItemClassName;
+    const parent_formItemStyle = state.formItemStyle;
+    const parent_formItemLabelClassName = state.formItemLabelClassName;
+    const parent_formItemLabelStyle = state.formItemLabelStyle;
+    const parent_formItemBodyClassName = state.formItemBodyClassName;
+    const parent_formItemBodyStyle = state.formItemBodyStyle;
+    const parent_borderedType = state.borderedType || 'bottom';
+    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, borderedType = parent_borderedType, lastItemBordered = true, gap, isAllColSpan = false, className, style, headerClassName, headerStyle, bodyClassName, bodyStyle, bordered, boxShadow } = props;
+    useMemo(()=>formLayoutInstance.updated({
+            colCount,
+            errorLayout,
+            labelMode,
+            formItemClassName,
+            formItemStyle,
+            formItemLabelClassName,
+            formItemLabelStyle,
+            formItemBodyClassName,
+            formItemBodyStyle,
+            borderedType
+        }), [
+        colCount,
+        errorLayout,
+        labelMode,
+        formItemClassName,
+        formItemStyle,
+        formItemLabelClassName,
+        formItemLabelStyle,
+        formItemBodyClassName,
+        formItemBodyStyle,
+        borderedType
+    ]);
+    const layoutCls = useMemo(()=>clsx("fairys-valtio-form-layout fairystaroform__text-_zkh1_12px_zhk2_ fairystaroform__w-full fairystaroform__box-border fairystaroform__rounded-md", {
+            'fairys-valtio-form-layout-all-col-span': isAllColSpan,
+            'fairys-taro-form-valtio-layout-box-shadow': boxShadow,
+            'fairystaroform__border fairystaroform__border-solid fairystaroform__border-gray-200': bordered,
+            'fairys-valtio-form-layout-last-item-no-border': !lastItemBordered
+        }, className), [
+        className,
+        isAllColSpan,
+        bordered,
+        boxShadow,
+        lastItemBordered
+    ]);
+    const headerCls = useMemo(()=>clsx("fairys-valtio-form-layout-header fairystaroform__flex fairystaroform__justify-between fairystaroform__items-center fairystaroform__flex-row fairystaroform__py-_zkh1_12px_zhk2_  fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 fairystaroform__box-border", {
+            'fairystaroform__px-_zkh1_8px_zhk2_': bordered || boxShadow,
+            'fairystaroform__px-_zkh1_4px_zhk2_': !bordered && !boxShadow
+        }, headerClassName), [
+        headerClassName,
+        bordered,
+        boxShadow
+    ]);
+    const headerTitleCls = useMemo(()=>clsx("fairys-valtio-form-layout-header-title fairystaroform__text-_zkh1_14px_zhk2_ fairystaroform__font-bold fairystaroform__box-border"), []);
+    const headerExtraCls = useMemo(()=>clsx("fairys-valtio-form-layout-header-extra fairystaroform__box-border"), []);
+    const body_base = useMemo(()=>clsx('fairys-valtio-form-layout-body fairystaroform__px-_zkh1_8px_zhk2_ fairystaroform__w-full fairystaroform__grid fairystaroform__gap-_zkh1_2px_zhk2_ fairystaroform__box-border', bodyClassName), [
+        bodyClassName
+    ]);
+    const styleBase = useMemo(()=>{
+        const css = {};
+        if ('string' == typeof gap) css.gap = gap;
+        if ('number' == typeof gap) css.gap = `${gap}px`;
+        if (colCount) css.gridTemplateColumns = `repeat(${colCount}, auto)`;
+        return css;
+    }, [
+        colCount,
+        gap
+    ]);
+    return {
+        colCount,
+        errorLayout,
+        labelMode,
+        borderedType,
+        formLayoutInstance,
+        layoutName: layoutCls,
+        layoutStyle: style,
+        headerName: headerCls,
+        headerStyle: headerStyle,
+        headerTitleName: headerTitleCls,
+        headerExtraName: headerExtraCls,
+        bodyName: body_base,
+        bodyStyle: {
+            ...styleBase,
+            ...bodyStyle
+        }
+    };
+}
+export { FairysValtioFormLayoutContext, FairysValtioFormLayoutInstance, useFairysValtioFormLayoutAttrs, useFairysValtioFormLayoutContext, useFairysValtioFormLayoutInstance };

package/esm/index.d.ts

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

package/esm/index.js

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

package/esm/interface.d.ts

@@ -0,0 +1,4 @@
+export type MObject<T> = {
+    [K in keyof T]: T[K];
+};
+export type MakeFieldRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

package/esm/styles/index.css

@@ -0,0 +1,266 @@
+*, :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_-14px_zhk2_ {
+  bottom: -14px;
+}
+
+.fairystaroform__left-0 {
+  left: 0;
+}
+
+.fairystaroform__right-0 {
+  right: 0;
+}
+
+.fairystaroform__top-_zkh1_-14px_zhk2_ {
+  top: -14px;
+}
+
+.fairystaroform__z-10 {
+  z-index: 10;
+}
+
+.fairystaroform__grid {
+  display: grid;
+}
+
+.fairystaroform__box-border {
+  box-sizing: border-box;
+}
+
+.fairystaroform__h-full {
+  height: 100%;
+}
+
+.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-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_2px_zhk2_ {
+  gap: 2px;
+}
+
+.fairystaroform__gap-_zkh1_4px_zhk2_ {
+  gap: 4px;
+}
+
+.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-md {
+  border-radius: .375rem;
+}
+
+.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_12px_zhk2_ {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.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;
+}
+
+.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-form-layout-all-col-span {
+  grid-column: 1 / -1;
+}
+
+.fairys-valtio-form-layout.fairys-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, .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 {
+  border-bottom: 0;
+}
+

package/lib/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __webpack_modules__ = {
+    "./form/form.item": function(module) {
+        module.exports = require("./form/form.item.js");
+    },
+    "./form/form": function(module) {
+        module.exports = require("./form/form.js");
+    },
+    "./form/instance": function(module) {
+        module.exports = require("./form/instance/index.js");
+    },
+    "./form/layout": function(module) {
+        module.exports = require("./form/layout.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 _form_instance__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./form/instance");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _form_instance__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form_instance__WEBPACK_IMPORTED_MODULE_0__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _form_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./form/layout");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _form_layout__WEBPACK_IMPORTED_MODULE_1__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form_layout__WEBPACK_IMPORTED_MODULE_1__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _form_form__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./form/form");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _form_form__WEBPACK_IMPORTED_MODULE_2__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form_form__WEBPACK_IMPORTED_MODULE_2__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _form_form_item__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./form/form.item");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _form_form_item__WEBPACK_IMPORTED_MODULE_3__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form_form_item__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/package.json

@@ -0,0 +1,38 @@
+{
+  "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.8",
+  "main": "lib/index.js",
+  "types": "esm/index.d.ts",
+  "module": "esm/index.js",
+  "license": "ISC",
+  "scripts": {
+    "build": "carefrees-rslib build --config=./rslib.config.ts",
+    "watch": "carefrees-rslib build --watch --config=./rslib.config.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/autumn-fairy-tales/fairys-taro-react.git",
+    "directory": "packages/valtio-form-basic"
+  },
+  "files": [
+    "src",
+    "esm"
+  ],
+  "dependencies": {
+    "@nutui/nutui-react-taro": "^3.0.18",
+    "async-validator": "~4.2.5",
+    "clsx": "2.1.1",
+    "fast-copy": "~4.0.2",
+    "valtio": "~2.1.5"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.21",
+    "react": "^18.0.0"
+  }
+}