listpage-next 0.0.125 → 0.0.127

package/dist/components/FilterGroup/components/FilterForm/index.d.ts

@@ -11,7 +11,8 @@ export interface FilterFormOption {
 export interface FilterFormProps<FormValue = any> {
     options: FilterFormOption[];
     initialValues?: FormValue;
+    labelInline?: boolean;
     onSubmit?: (values?: FormValue) => void;
     onReset?: () => void;
 }
-export declare const FilterForm: <T = any>({ options, initialValues, onSubmit, onReset, }: FilterFormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterForm: <T = any>({ options, initialValues, onSubmit, onReset, labelInline, }: FilterFormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterGroup/components/FilterForm/index.js

@@ -6,13 +6,14 @@ import { FilterGridLayout } from "../FilterGridLayout/index.js";
 import { FilterItem } from "../FilterItem/index.js";
 import { getComponent } from "../../utils/getComponent.js";
 import { cleanUpFormValues } from "../../utils/format.js";
-const FilterForm = ({ options, initialValues, onSubmit, onReset })=>{
+const FilterForm = ({ options, initialValues, onSubmit, onReset, labelInline })=>{
     const formRef = useRef(null);
     const items = useMemo(()=>(options ?? []).map(({ colSpan, component, label, ...props })=>{
             const renderComponent = getComponent(component);
             return {
                 key: props.name,
                 node: /*#__PURE__*/ jsx(FilterItem, {
+                    labelInline: labelInline,
                     label: label,
                     formItemProps: props,
                     children: renderComponent

package/dist/components/FilterGroup/components/FilterGridLayout/index.js

@@ -4,8 +4,8 @@ import styled_components from "styled-components";
 const GridContainer = styled_components.div`
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  row-gap: 0;
   column-gap: 1rem;
+  row-gap: 1rem;
 `;
 const GridItem = styled_components.div`
   grid-column: span ${(props)=>props.$colSpan};

package/dist/components/FilterGroup/components/FilterItem/index.d.ts

@@ -4,5 +4,6 @@ export interface FilterItemProps {
     label?: ReactNode;
     children: ReactElement;
     formItemProps: FormItemProps;
+    labelInline?: boolean;
 }
 export declare const FilterItem: (props: FilterItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterGroup/components/FilterItem/index.js

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Form, Input } from "antd";
-import { LabelWrapper } from "../LabelWrapper/index.js";
+import { LabelInline, LabelWrapper } from "../LabelWrapper/index.js";
 import { cloneElement, useState } from "react";
 import { omit } from "lodash";
 const FilterItem = (props)=>{
-    const { label, children, formItemProps } = props;
+    const { label, children, formItemProps, labelInline } = props;
     const [focus, setFocus] = useState(false);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -37,6 +37,12 @@ const FilterItem = (props)=>{
                     });
                     const disabled = children.props.disabled;
                     const status = disabled ? 'disabled' : focus ? 'focused' : errors?.length ? 'error' : void 0;
+                    if (labelInline) return /*#__PURE__*/ jsx(LabelInline, {
+                        status: status,
+                        errors: errors,
+                        label: label,
+                        children: realChildren
+                    });
                     return /*#__PURE__*/ jsx(LabelWrapper, {
                         status: status,
                         errors: errors,

package/dist/components/FilterGroup/components/LabelWrapper/index.d.ts

@@ -6,3 +6,4 @@ export interface LabelWrapperProps<V = any> {
     errors?: string[];
 }
 export declare const LabelWrapper: <T = any>({ label, status, children, errors, }: LabelWrapperProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const LabelInline: <T = any>({ label, status, children, errors, }: LabelWrapperProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterGroup/components/LabelWrapper/index.js

@@ -1,14 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "antd";
 import styled_components from "styled-components";
 const WrapperContainer = styled_components.div`
   position: relative;
-  margin-bottom: 1.5rem;
+  // margin-bottom: 1.5rem;
 `;
 const ChildrenContainer = styled_components.div`
   & > div {
     width: 100%;
   }
 `;
+const InlineLabelWrapperContainer = styled_components.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+`;
+const InlineLabelChildrenContainer = styled_components.div`
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  & > * {
+    width: 100%;
+  }
+`;
+const InlineLabel = styled_components.label`
+  font-size: 14px;
+  font-weight: 400;
+  flex-shrink: 0;
+  color: ${(props)=>{
+    if ('disabled' === props.$status) return '#9ca3af';
+    if ('error' === props.$status) return '#ef4444';
+    if ('focused' === props.$status) return '#3b82f6';
+    return '#374151';
+}};
+`;
 const Label = styled_components.label`
   position: absolute;
   left: 1rem;
@@ -62,4 +87,21 @@ const LabelWrapper = ({ label, status, children, errors = [] })=>/*#__PURE__*/ j
             })
         ]
     });
-export { LabelWrapper };
+const LabelInline = ({ label, status, children, errors = [] })=>/*#__PURE__*/ jsxs(InlineLabelWrapperContainer, {
+        children: [
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: errors?.length > 0 && /*#__PURE__*/ jsx(ErrorMessage, {
+                    children: errors.join(', ')
+                }),
+                children: /*#__PURE__*/ jsx(InlineLabel, {
+                    htmlFor: "label",
+                    $status: status,
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ jsx(InlineLabelChildrenContainer, {
+                children: children
+            })
+        ]
+    });
+export { LabelInline, LabelWrapper };

package/dist/demos/demo1.js

@@ -37,6 +37,7 @@ const Demo1 = ()=>{
         console.log(values);
     };
     return /*#__PURE__*/ jsx(FilterForm, {
+        labelInline: true,
         options: options,
         onSubmit: onSubmit
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.125",
+  "version": "0.0.127",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",