@fairys/pc-valtio-form-basic 0.0.12

package/esm/form.d.ts

@@ -0,0 +1,18 @@
+import { FairysPCValtioFormItem, FairysPCValtioFormHideItem, FairysPCValtioFormItemBase } from './form.item';
+import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState } from '@fairys/valtio-form-basic';
+import type { FairysValtioFormAttrsProps, MObject } from '@fairys/valtio-form-basic';
+export * from '@fairys/valtio-form-basic';
+export * from './form.item';
+export * from './layout';
+export interface FairysPCValtioFormProps<T extends MObject<T> = object> extends FairysValtioFormAttrsProps<T> {
+}
+export declare function FairysPCValtioForm<T extends MObject<T> = object>(props: FairysPCValtioFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace FairysPCValtioForm {
+    var useForm: typeof useFairysValtioFormInstance;
+    var useFormState: typeof useFairysValtioFormInstanceContextState;
+    var useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
+    var useFormInstance: typeof useFairysValtioFormInstanceContext;
+    var FormItemBase: typeof FairysPCValtioFormItemBase;
+    var FormItem: typeof FairysPCValtioFormItem;
+    var FormHideItem: typeof FairysPCValtioFormHideItem;
+}

package/esm/form.item.d.ts

@@ -0,0 +1,16 @@
+/**表单项*/
+import type { FairysValtioFormItemAttrsProps, MObject } from '@fairys/valtio-form-basic';
+export interface FairysPCValtioFormItemProps<T extends MObject<T> = object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FairysValtioFormItemAttrsProps {
+    /**是否使用控制隐藏的表单项*/
+    isHide?: boolean;
+    /**是否使用无样式表单项*/
+    noStyle?: boolean;
+}
+/**普通表单项*/
+export declare function FairysPCValtioFormItemBase<T extends MObject<T> = object>(props: Omit<FairysPCValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**控制隐藏的表单项*/
+export declare function FairysPCValtioFormHideItem<T extends MObject<T> = object>(props: Omit<FairysPCValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**无样式表单项*/
+export declare function FairysPCValtioFormItemNoStyle<T extends MObject<T> = object>(props: Omit<FairysPCValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
+export declare function FairysPCValtioFormItem<T extends MObject<T> = object>(props: FairysPCValtioFormItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/form.item.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { FairysValtioFormParentAttrsContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs } from "@fairys/valtio-form-basic";
+function FairysPCValtioFormItemBase(props) {
+    const { label, extra, helpText } = props;
+    const { itemClassName, itemStyle, containerClassName, itemLabelClassName, itemLabelStyle, itemBodyClassName, itemBodyStyle, itemInputClassName, itemExtraClassName, errorClassName, helpClassName, isInvalid, children, error, formAttrsNameInstance, id } = useFairysValtioFormItemAttrs(props);
+    return /*#__PURE__*/ jsxs("div", {
+        className: itemClassName,
+        style: itemStyle,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: containerClassName,
+                children: [
+                    label ? /*#__PURE__*/ jsx("label", {
+                        htmlFor: id,
+                        className: itemLabelClassName,
+                        style: itemLabelStyle,
+                        children: label
+                    }) : /*#__PURE__*/ jsx(Fragment, {}),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: itemBodyClassName,
+                        style: itemBodyStyle,
+                        children: [
+                            /*#__PURE__*/ jsx(FairysValtioFormParentAttrsContext.Provider, {
+                                value: formAttrsNameInstance,
+                                children: /*#__PURE__*/ jsx("div", {
+                                    className: itemInputClassName,
+                                    children: children
+                                })
+                            }),
+                            extra ? /*#__PURE__*/ jsx("div", {
+                                className: itemExtraClassName,
+                                children: extra
+                            }) : /*#__PURE__*/ jsx(Fragment, {})
+                        ]
+                    })
+                ]
+            }),
+            helpText ? /*#__PURE__*/ jsx("div", {
+                className: helpClassName,
+                children: helpText
+            }) : /*#__PURE__*/ jsx(Fragment, {}),
+            isInvalid ? /*#__PURE__*/ jsx("div", {
+                className: errorClassName,
+                children: error
+            }) : /*#__PURE__*/ jsx(Fragment, {})
+        ]
+    });
+}
+function FairysPCValtioFormHideItem(props) {
+    const [state] = useFairysValtioFormInstanceContextHideState();
+    const isHide = state[props.name];
+    if (isHide) return /*#__PURE__*/ jsx(Fragment, {});
+    return /*#__PURE__*/ jsx(FairysPCValtioFormItemBase, {
+        ...props
+    });
+}
+function FairysPCValtioFormItemNoStyle(props) {
+    const { children, formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormParentAttrsContext.Provider, {
+        value: formAttrsNameInstance,
+        children: children
+    });
+}
+function FairysPCValtioFormItem(props) {
+    const { isHide, noStyle, ...rest } = props;
+    if (isHide) return /*#__PURE__*/ jsx(FairysPCValtioFormHideItem, {
+        ...rest
+    });
+    if (noStyle) return /*#__PURE__*/ jsx(FairysPCValtioFormItemNoStyle, {
+        ...rest
+    });
+    return /*#__PURE__*/ jsx(FairysPCValtioFormItemBase, {
+        ...rest
+    });
+}
+export { FairysPCValtioFormHideItem, FairysPCValtioFormItem, FairysPCValtioFormItemBase, FairysPCValtioFormItemNoStyle };

package/esm/form.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { FairysPCValtioFormLayout } from "./layout.js";
+import { FairysPCValtioFormHideItem, FairysPCValtioFormItem, FairysPCValtioFormItemBase } from "./form.item.js";
+import { FairysValtioFormInstanceContext, useFairysValtioForm, useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceContextState } from "@fairys/valtio-form-basic";
+export * from "@fairys/valtio-form-basic";
+export * from "./form.item.js";
+export * from "./layout.js";
+function FairysPCValtioForm(props) {
+    const { formInstance, children, colCount = 4, labelMode = 'top', errorLayout = 'bottom-left', itemBorderType = 'none', platform = 'pc', ...rest } = useFairysValtioForm(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormInstanceContext.Provider, {
+        value: formInstance,
+        children: /*#__PURE__*/ jsx(FairysPCValtioFormLayout, {
+            ...rest,
+            colCount: colCount,
+            labelMode: labelMode,
+            itemBorderType: itemBorderType,
+            errorLayout: errorLayout,
+            platform: platform,
+            children: children
+        })
+    });
+}
+FairysPCValtioForm.useForm = useFairysValtioFormInstance;
+FairysPCValtioForm.useFormState = useFairysValtioFormInstanceContextState;
+FairysPCValtioForm.useFormHideState = useFairysValtioFormInstanceContextHideState;
+FairysPCValtioForm.useFormInstance = useFairysValtioFormInstanceContext;
+FairysPCValtioForm.FormItemBase = FairysPCValtioFormItemBase;
+FairysPCValtioForm.FormItem = FairysPCValtioFormItem;
+FairysPCValtioForm.FormHideItem = FairysPCValtioFormHideItem;
+export { FairysPCValtioForm };

package/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './form';

package/esm/index.js

@@ -0,0 +1 @@
+export * from "./form.js";

package/esm/layout.d.ts

@@ -0,0 +1,4 @@
+import type { FairysValtioFormLayoutAttrsProps } from '@fairys/valtio-form-basic';
+export interface FairysPCValtioFormLayoutProps extends FairysValtioFormLayoutAttrsProps {
+}
+export declare function FairysPCValtioFormLayout(props: FairysPCValtioFormLayoutProps): import("react/jsx-runtime").JSX.Element;

package/esm/layout.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { FairysValtioFormLayoutContext, useFairysValtioFormLayoutAttrs } from "@fairys/valtio-form-basic";
+function FairysPCValtioFormLayout(props) {
+    const { children, title, extra } = props;
+    const { formLayoutInstance, layoutName, layoutStyle, headerName, headerStyle, headerTitleName, headerExtraName, bodyName, bodyStyle } = useFairysValtioFormLayoutAttrs(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormLayoutContext.Provider, {
+        value: formLayoutInstance,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: layoutName,
+            style: layoutStyle,
+            children: [
+                title || extra ? /*#__PURE__*/ jsxs("div", {
+                    style: headerStyle,
+                    className: headerName,
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: headerTitleName,
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: headerExtraName,
+                            children: extra
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsx(Fragment, {}),
+                /*#__PURE__*/ jsx("div", {
+                    className: bodyName,
+                    style: bodyStyle,
+                    children: children
+                })
+            ]
+        })
+    });
+}
+export { FairysPCValtioFormLayout };

package/lib/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __webpack_modules__ = {
+    "./form": function(module) {
+        module.exports = require("./form.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__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./form");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _form__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form__WEBPACK_IMPORTED_MODULE_0__[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,34 @@
+{
+  "name": "@fairys/pc-valtio-form-basic",
+  "author": "SunLxy <1011771396@qq.com>",
+  "description": "pc表单框架组件",
+  "homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
+  "version": "0.0.12",
+  "main": "lib/index.js",
+  "types": "esm/index.d.ts",
+  "module": "esm/index.js",
+  "license": "ISC",
+  "scripts": {
+    "build": "carefrees-rslib build ",
+    "watch": "carefrees-rslib build --watch"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/autumn-fairy-tales/valtio-form-basic.git",
+    "directory": "packages/pc-valtio-form"
+  },
+  "files": [
+    "src",
+    "esm"
+  ],
+  "dependencies": {
+    "@fairys/valtio-form-basic": "^0.0.12"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.21",
+    "react": "^18.0.0"
+  }
+}

package/src/form.item.tsx

@@ -0,0 +1,101 @@
+/**表单项*/
+
+import { Fragment } from 'react';
+import type { FairysValtioFormItemAttrsProps, MObject } from '@fairys/valtio-form-basic';
+import {
+  useFairysValtioFormItemAttrs,
+  useFairysValtioFormInstanceContextHideState,
+  useFairysValtioFormItemNoStyleAttrs,
+  FairysValtioFormParentAttrsContext,
+} from '@fairys/valtio-form-basic';
+
+export interface FairysPCValtioFormItemProps<T extends MObject<T> = object>
+  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    FairysValtioFormItemAttrsProps {
+  /**是否使用控制隐藏的表单项*/
+  isHide?: boolean;
+  /**是否使用无样式表单项*/
+  noStyle?: boolean;
+}
+
+/**普通表单项*/
+export function FairysPCValtioFormItemBase<T extends MObject<T> = object>(
+  props: Omit<FairysPCValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  const { label, extra, helpText } = props;
+  const {
+    itemClassName,
+    itemStyle,
+    containerClassName,
+    itemLabelClassName,
+    itemLabelStyle,
+    itemBodyClassName,
+    itemBodyStyle,
+    itemInputClassName,
+    itemExtraClassName,
+    errorClassName,
+    helpClassName,
+    isInvalid,
+    children,
+    error,
+    formAttrsNameInstance,
+    id,
+  } = useFairysValtioFormItemAttrs(props);
+
+  return (
+    <div className={itemClassName} style={itemStyle}>
+      <div className={containerClassName}>
+        {label ? (
+          <label htmlFor={id} className={itemLabelClassName} style={itemLabelStyle}>
+            {label}
+          </label>
+        ) : (
+          <Fragment />
+        )}
+        <div className={itemBodyClassName} style={itemBodyStyle}>
+          <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
+            <div className={itemInputClassName}>{children}</div>
+          </FairysValtioFormParentAttrsContext.Provider>
+          {extra ? <div className={itemExtraClassName}>{extra}</div> : <Fragment />}
+        </div>
+      </div>
+      {helpText ? <div className={helpClassName}>{helpText}</div> : <Fragment />}
+      {isInvalid ? <div className={errorClassName}>{error}</div> : <Fragment />}
+    </div>
+  );
+}
+/**控制隐藏的表单项*/
+export function FairysPCValtioFormHideItem<T extends MObject<T> = object>(
+  props: Omit<FairysPCValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  const [state] = useFairysValtioFormInstanceContextHideState();
+  const isHide = state[props.name];
+  if (isHide) {
+    return <Fragment />;
+  }
+  return <FairysPCValtioFormItemBase<T> {...props} />;
+}
+
+/**无样式表单项*/
+export function FairysPCValtioFormItemNoStyle<T extends MObject<T> = object>(
+  props: Omit<FairysPCValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  const { children, formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props);
+  return (
+    <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
+      {children}
+    </FairysValtioFormParentAttrsContext.Provider>
+  );
+}
+
+/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
+export function FairysPCValtioFormItem<T extends MObject<T> = object>(props: FairysPCValtioFormItemProps<T>) {
+  const { isHide, noStyle, ...rest } = props;
+  if (isHide) {
+    return <FairysPCValtioFormHideItem<T> {...rest} />;
+  }
+  if (noStyle) {
+    return <FairysPCValtioFormItemNoStyle<T> {...rest} />;
+  }
+  return <FairysPCValtioFormItemBase<T> {...rest} />;
+}

package/src/form.tsx

@@ -0,0 +1,56 @@
+import { FairysPCValtioFormLayout } from './layout';
+import { FairysPCValtioFormItem, FairysPCValtioFormHideItem, FairysPCValtioFormItemBase } from './form.item';
+import {
+  useFairysValtioForm,
+  FairysValtioFormInstanceContext,
+  useFairysValtioFormInstance,
+  useFairysValtioFormInstanceContext,
+  useFairysValtioFormInstanceContextState,
+  useFairysValtioFormInstanceContextHideState,
+} from '@fairys/valtio-form-basic';
+import type { FairysValtioFormAttrsProps, MObject } from '@fairys/valtio-form-basic';
+export * from '@fairys/valtio-form-basic';
+export * from './form.item';
+export * from './layout';
+export interface FairysPCValtioFormProps<T extends MObject<T> = object> extends FairysValtioFormAttrsProps<T> {}
+
+export function FairysPCValtioForm<T extends MObject<T> = object>(props: FairysPCValtioFormProps<T>) {
+  const {
+    formInstance,
+    children,
+    colCount = 4,
+    labelMode = 'top',
+    errorLayout = 'bottom-left',
+    itemBorderType = 'none',
+    platform = 'pc',
+    ...rest
+  } = useFairysValtioForm(props);
+  return (
+    <FairysValtioFormInstanceContext.Provider value={formInstance}>
+      <FairysPCValtioFormLayout
+        {...rest}
+        colCount={colCount}
+        labelMode={labelMode}
+        itemBorderType={itemBorderType}
+        errorLayout={errorLayout}
+        platform={platform}
+      >
+        {children}
+      </FairysPCValtioFormLayout>
+    </FairysValtioFormInstanceContext.Provider>
+  );
+}
+/**初始化实例*/
+FairysPCValtioForm.useForm = useFairysValtioFormInstance;
+/**获取状态*/
+FairysPCValtioForm.useFormState = useFairysValtioFormInstanceContextState;
+/**获取隐藏状态*/
+FairysPCValtioForm.useFormHideState = useFairysValtioFormInstanceContextHideState;
+/**获取上下文实例*/
+FairysPCValtioForm.useFormInstance = useFairysValtioFormInstanceContext;
+/**表单项基础组件*/
+FairysPCValtioForm.FormItemBase = FairysPCValtioFormItemBase;
+/**表单项*/
+FairysPCValtioForm.FormItem = FairysPCValtioFormItem;
+/**隐藏表单想*/
+FairysPCValtioForm.FormHideItem = FairysPCValtioFormHideItem;

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './form';

package/src/layout.tsx

@@ -0,0 +1,38 @@
+import { Fragment } from 'react';
+import type { FairysValtioFormLayoutAttrsProps } from '@fairys/valtio-form-basic';
+import { FairysValtioFormLayoutContext, useFairysValtioFormLayoutAttrs } from '@fairys/valtio-form-basic';
+export interface FairysPCValtioFormLayoutProps extends FairysValtioFormLayoutAttrsProps { }
+
+export function FairysPCValtioFormLayout(props: FairysPCValtioFormLayoutProps) {
+  const { children, title, extra } = props;
+
+  const {
+    formLayoutInstance,
+    layoutName,
+    layoutStyle,
+    headerName,
+    headerStyle,
+    headerTitleName,
+    headerExtraName,
+    bodyName,
+    bodyStyle,
+  } = useFairysValtioFormLayoutAttrs(props);
+
+  return (
+    <FairysValtioFormLayoutContext.Provider value={formLayoutInstance}>
+      <div className={layoutName} style={layoutStyle}>
+        {title || extra ? (
+          <div style={headerStyle} className={headerName}>
+            <div className={headerTitleName}>{title}</div>
+            <div className={headerExtraName}>{extra}</div>
+          </div>
+        ) : (
+          <Fragment />
+        )}
+        <div className={bodyName} style={bodyStyle}>
+          {children}
+        </div>
+      </div>
+    </FairysValtioFormLayoutContext.Provider>
+  );
+}