@fairys/valtio-form-basic 0.0.8

package/src/form/layout.tsx

@@ -0,0 +1,321 @@
+import { createContext, useContext, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import { proxy, useSnapshot } from 'valtio';
+
+export interface FairysValtioFormLayoutContextOptions {
+  /**列数据*/
+  colCount?: number;
+  /**规则校验失败错误提示位置*/
+  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+  /**
+   * label显示模式
+   * @platform taro 支持 between
+   */
+  labelMode?: 'left' | 'top' | 'between';
+  /**表单项 className*/
+  formItemClassName?: string;
+  /**表单项 style*/
+  formItemStyle?: React.CSSProperties;
+  /**表单项 label  className*/
+  formItemLabelClassName?: string;
+  /**表单项 label  style*/
+  formItemLabelStyle?: React.CSSProperties;
+  /**表单项 body  className*/
+  formItemBodyClassName?: string;
+  /**表单项 body  style*/
+  formItemBodyStyle?: React.CSSProperties;
+  /**
+   * 底部边框类型
+   */
+  borderedType?: 'bottom' | 'body';
+}
+
+export interface FairysValtioFormLayoutAttrsProps extends FairysValtioFormLayoutContextOptions {
+  /**
+   * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
+   */
+  gap?: string | number;
+  /**标题*/
+  title?: React.ReactNode;
+  /**额外内容*/
+  extra?: React.ReactNode;
+  /**内容*/
+  children?: React.ReactNode;
+  /**是否占据整行*/
+  isAllColSpan?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  /**头部ClassName*/
+  headerClassName?: string;
+  /**头部样式*/
+  headerStyle?: React.CSSProperties;
+  /**内容ClassName*/
+  bodyClassName?: string;
+  /**内容样式*/
+  bodyStyle?: React.CSSProperties;
+  /**是否边框*/
+  bordered?: boolean;
+  /**显示阴影*/
+  boxShadow?: boolean;
+  /**最后一个是否显示底部边框*/
+  lastItemBordered?: boolean;
+}
+
+export class FairysValtioFormLayoutInstance {
+  state = proxy<FairysValtioFormLayoutContextOptions>({
+    colCount: 1,
+    errorLayout: 'right-bottom',
+    labelMode: 'between',
+    borderedType: 'bottom',
+  });
+  updated = (options: FairysValtioFormLayoutContextOptions = {}) => {
+    const keys = Object.keys(options);
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      this.state[key] = options[key];
+    }
+  };
+}
+
+export const useFairysValtioFormLayoutInstance = (instance?: FairysValtioFormLayoutInstance) => {
+  const ref = useRef<FairysValtioFormLayoutInstance>();
+  if (!ref.current) {
+    if (instance) {
+      ref.current = instance;
+    } else {
+      ref.current = new FairysValtioFormLayoutInstance();
+    }
+  }
+  return ref.current;
+};
+
+export const FairysValtioFormLayoutContext = createContext<FairysValtioFormLayoutInstance>(
+  new FairysValtioFormLayoutInstance(),
+);
+
+export const useFairysValtioFormLayoutContext = () => {
+  const instance = useContext(FairysValtioFormLayoutContext);
+  const state = useSnapshot(instance.state);
+  return [state, instance] as const;
+};
+
+/**
+ * 布局属性处理
+ * 
+ * @example
+ * 
+ * ```tsx
+import { Fragment } from 'react'
+import { useFairysValtioFormLayoutAttrs, FairysValtioFormLayoutContext } from "@fairys/valtio-form"
+import type { FairysValtioFormLayoutAttrsProps } from "@fairys/valtio-form"
+
+export interface LayoutProps extends FairysValtioFormLayoutAttrsProps {}
+
+export const Layout = (props: LayoutProps) => {
+  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}>
+         <div>
+           {title || extra ? (
+             <div style={headerStyle} className={headerName}>
+               <div className={headerTitleName}>{title}</div>
+               <div className={headerExtraName}>{extra}</div>
+             </div>
+           ) : (
+             <Fragment />
+           )}
+         </div>
+         <div className={bodyName} style={bodyStyle}>
+           {children}
+         </div>
+       </div>
+     </FairysValtioFormLayoutContext.Provider>
+   );
+}
+  ```
+ * 
+*/
+export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttrsProps) {
+  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-[12px] 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-[12px]  fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 fairystaroform__box-border`,
+        {
+          'fairystaroform__px-[8px]': bordered || boxShadow,
+          'fairystaroform__px-[4px]': !bordered && !boxShadow,
+        },
+        headerClassName,
+      ),
+    [headerClassName, bordered, boxShadow],
+  );
+  const headerTitleCls = useMemo(
+    () =>
+      clsx(
+        `fairys-valtio-form-layout-header-title fairystaroform__text-[14px] fairystaroform__font-bold fairystaroform__box-border`,
+      ),
+    [],
+  );
+  const headerExtraCls = useMemo(() => clsx(`fairys-valtio-form-layout-header-extra fairystaroform__box-border`), []);
+
+  const body_base = useMemo(() => {
+    return clsx(
+      'fairys-valtio-form-layout-body fairystaroform__px-[8px] fairystaroform__w-full fairystaroform__grid fairystaroform__gap-[2px] fairystaroform__box-border',
+      bodyClassName,
+    );
+  }, [bodyClassName]);
+
+  const styleBase = useMemo(() => {
+    const css: React.CSSProperties = {};
+    if (typeof gap === 'string') {
+      css.gap = gap;
+    }
+    if (typeof gap === 'number') {
+      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 },
+  } as FairysValtioFormLayoutAttrsReturn;
+}
+
+export interface FairysValtioFormLayoutAttrsReturn {
+  /**列数*/
+  colCount: number;
+  /**规则校验失败错误提示位置*/
+  errorLayout: string;
+  /**
+   * label显示模式
+   * @platform taro 支持 between
+   */
+  labelMode: string;
+  /**
+   * 底部边框类型
+   */
+  borderedType: string;
+  /**表单布局实例*/
+  formLayoutInstance: FairysValtioFormLayoutInstance;
+  /**布局ClassName*/
+  layoutName: string;
+  /**布局样式*/
+  layoutStyle: React.CSSProperties;
+  /**头部ClassName*/
+  headerName: string;
+  /**头部样式*/
+  headerStyle: React.CSSProperties;
+  /**头部标题ClassName*/
+  headerTitleName: string;
+  /**头部额外内容ClassName*/
+  headerExtraName: string;
+  /**内容ClassName*/
+  bodyName: string;
+  /**内容样式*/
+  bodyStyle: React.CSSProperties;
+}

package/src/index.tsx

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

package/src/interface.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/src/styles/index.css

@@ -0,0 +1,41 @@
+@unocss preflights;
+@unocss default;
+
+.fairys-valtio-form-item-label.show-colon::after {
+  content: ':';
+  display: inline-block;
+  text-align: center;
+  margin: 0;
+  margin-inline-end: 0.1rem;
+  margin-inline-start: 0.1rem;
+  box-sizing: border-box;
+}
+
+.fairys-valtio-form-item-label.required::before {
+  content: '*';
+  color: red;
+  display: inline-block;
+  margin-inline-end: 0.2rem;
+  box-sizing: border-box;
+}
+
+.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: 0px;
+}