@fairys/taro-tools-simple-form-ui 0.0.5

package/esm/components/calendar/index.d.ts

@@ -0,0 +1,10 @@
+import { ViewProps } from '@tarojs/components';
+import { CalendarProps } from '@nutui/nutui-react-taro';
+export interface FairysTaroCalendarProps extends Partial<CalendarProps> {
+    placeholder?: string;
+    value?: string;
+    className?: string;
+    style?: ViewProps['style'];
+    onChange?: (value: string, date: string | string[]) => void;
+}
+export declare const FairysTaroCalendarBase: (props: FairysTaroCalendarProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/calendar/index.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import { Calendar } from "@nutui/nutui-react-taro";
+import { useState } from "react";
+import { FairysTaroTextClearBase } from "../clear/index.js";
+const FairysTaroCalendarBase = (props)=>{
+    const { placeholder = "\u8BF7\u9009\u62E9", value, className, style, onChange, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    return /*#__PURE__*/ jsxs(View, {
+        className: `fairys-taro-calendar ${className || ''}`,
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(FairysTaroTextClearBase, {
+                warpClassName: "fairys-taro-calendar-text",
+                isValue: !!value,
+                onTextClick: ()=>setVisible(true),
+                onClearClick: ()=>onChange?.(void 0, void 0),
+                children: value || placeholder
+            }),
+            /*#__PURE__*/ jsx(Calendar, {
+                ...rest,
+                visible: visible,
+                defaultValue: value,
+                onClose: ()=>setVisible(false),
+                onConfirm: (date)=>{
+                    const [year, month, day] = date;
+                    if (year) onChange?.(`${year}-${month}-${day}`, date);
+                    else onChange?.(void 0, date);
+                    setVisible(false);
+                }
+            })
+        ]
+    });
+};
+export { FairysTaroCalendarBase };

package/esm/components/cascader/index.d.ts

@@ -0,0 +1,10 @@
+import { CascaderProps, CascaderOption } from '@nutui/nutui-react-taro';
+export interface FairysTaroCascaderProps extends Omit<Partial<CascaderProps>, 'visible' | 'onClose' | 'onChange' | 'value'> {
+    placeholder?: string;
+    labelInValue?: boolean;
+    value?: (string | number | CascaderOption)[];
+    onChange?: (value: (string | number | CascaderOption)[], pathNodes: CascaderOption[]) => void;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+}
+export declare const FairysTaroCascaderBase: (props: FairysTaroCascaderProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/cascader/index.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import { Cascader } from "@nutui/nutui-react-taro";
+import { useMemo, useState } from "react";
+import { FairysTaroTextClearBase } from "../clear/index.js";
+const FairysTaroCascaderBase = (props)=>{
+    const { placeholder = "\u8BF7\u9009\u62E9", value, className, style, onChange, labelInValue = true, options, optionKey, bodyClassName, bodyStyle, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    const valueKey = optionKey?.valueKey || 'value';
+    const textKey = optionKey?.textKey || 'text';
+    const childrenKey = optionKey?.childrenKey || 'children';
+    const render = useMemo(()=>{
+        if (Array.isArray(value) && value.length) if (labelInValue) return value.map((it)=>{
+            if ('string' == typeof it || 'number' == typeof it) return it;
+            if (labelInValue) return it?.[textKey] || '';
+            return '';
+        }).filter(Boolean).join('/');
+        else {
+            const _value = [];
+            let _options = options || [];
+            while(_options.length){
+                const it = _options.shift();
+                if ('string' == typeof it || 'number' == typeof it) {
+                    const findx = _options.findIndex((it)=>it[valueKey] === it);
+                    if (findx) {
+                        _value.push(it?.[textKey]);
+                        _options = it?.[childrenKey] || [];
+                    } else break;
+                } else break;
+            }
+            return _value.join('/');
+        }
+        return '';
+    }, [
+        value,
+        labelInValue,
+        valueKey,
+        textKey
+    ]);
+    const _value = useMemo(()=>{
+        if (Array.isArray(value) && value.length) return value.map((it)=>{
+            if ('string' == typeof it || 'number' == typeof it) return it;
+            if (labelInValue) return it[valueKey];
+            return '';
+        }).filter((it)=>'' !== it);
+        return [];
+    }, [
+        value,
+        labelInValue,
+        valueKey
+    ]);
+    return /*#__PURE__*/ jsxs(View, {
+        className: `fairys-taro-cascader ${className || ''}`,
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(FairysTaroTextClearBase, {
+                warpClassName: "fairys-taro-cascader-text",
+                isValue: !!render,
+                onTextClick: ()=>setVisible(true),
+                onClearClick: ()=>onChange?.(void 0, void 0),
+                children: render || placeholder
+            }),
+            /*#__PURE__*/ jsx(Cascader, {
+                ...rest,
+                className: `fairys-taro-cascader-body fairystaroform__text-left ${bodyClassName || ''}`,
+                style: bodyStyle,
+                optionKey: optionKey,
+                options: options,
+                value: _value,
+                visible: visible,
+                onChange: (value, pathNodes)=>{
+                    if (labelInValue) {
+                        const _value = pathNodes.map((it)=>{
+                            const { children, ...rest } = it;
+                            return rest;
+                        });
+                        onChange?.(_value, pathNodes);
+                    } else onChange?.(value, pathNodes);
+                },
+                onClose: ()=>setVisible(false)
+            })
+        ]
+    });
+};
+export { FairysTaroCascaderBase };

package/esm/components/checkbox.group/index.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxGroupProps, CheckboxProps } from '@nutui/nutui-react-taro';
+export interface FairysTaroCheckboxGroupProps extends Partial<CheckboxGroupProps> {
+    items?: Partial<CheckboxProps>[];
+}
+export declare const FairysTaroCheckboxGroupBase: (props: FairysTaroCheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/checkbox.group/index.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox, CheckboxGroup } from "@nutui/nutui-react-taro";
+const FairysTaroCheckboxGroupBase = (props)=>{
+    const { items, className, ...rest } = props;
+    return /*#__PURE__*/ jsx(CheckboxGroup, {
+        className: `fairys-taro-checkbox-group ${className || ''}`,
+        direction: "horizontal",
+        ...rest,
+        children: items?.map((item)=>/*#__PURE__*/ jsx(Checkbox, {
+                ...item
+            }, item.value))
+    });
+};
+export { FairysTaroCheckboxGroupBase };

package/esm/components/clear/index.d.ts

@@ -0,0 +1,21 @@
+import { ITouchEvent } from '@tarojs/components';
+export interface SVG_IconProps {
+    className?: string;
+    style?: React.CSSProperties;
+    viewBox?: string;
+    name?: string;
+    color?: string;
+    width?: string | number;
+    height?: string | number;
+    size?: string | number;
+    svg64?: string;
+    svgSrc?: string;
+    children?: React.ReactNode;
+    fallback?: boolean;
+    isValue?: boolean;
+    warpClassName?: string;
+    warpStyle?: React.CSSProperties;
+    onTextClick?: (event: ITouchEvent) => void;
+    onClearClick?: (event: React.MouseEvent) => void;
+}
+export declare const FairysTaroTextClearBase: (props: SVG_IconProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/clear/index.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close2 } from "@nutui/icons-react-taro";
+import { Text, View } from "@tarojs/components";
+import clsx from "clsx";
+import { Fragment, useMemo } from "react";
+const FairysTaroTextClearBase = (props)=>{
+    const { isValue = true, children, warpClassName, warpStyle, onTextClick, onClearClick, ...rest } = props;
+    const clsx_text = useMemo(()=>clsx('fairys-taro-text fairystaroform__flex-1', {
+            'fairys-taro-text-placeholder fairystaroform__text-gray-600 fairystaroform__font-normal': !isValue,
+            'fairys-taro-text-value fairystaroform__text-black': isValue
+        }), [
+        isValue
+    ]);
+    return /*#__PURE__*/ jsxs(View, {
+        className: `fairys-taro-clear fairystaroform__flex fairystaroform__items-center fairystaroform__gap-1 ${warpClassName || ''}`,
+        style: warpStyle,
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                onClick: onTextClick,
+                className: clsx_text,
+                children: children
+            }),
+            isValue ? /*#__PURE__*/ jsx(Close2, {
+                color: "#c2c4cc",
+                onClick: onClearClick,
+                ...rest
+            }) : /*#__PURE__*/ jsx(Fragment, {})
+        ]
+    });
+};
+export { FairysTaroTextClearBase };

package/esm/components/date.picker/index.d.ts

@@ -0,0 +1,18 @@
+import { DatePickerProps } from '@nutui/nutui-react-taro';
+export interface FairysTaroDatePickerProps extends Omit<Partial<DatePickerProps>, 'value' | 'onChange'> {
+    placeholder?: string;
+    /**
+     * 日期格式
+     * @description
+     * 当 type 为 date 时，格式为 YYYY-MM-DD
+     * 当 type 为 time 时，格式为 HH:mm:ss
+     * 当 type 为 year-month 时，格式为 YYYY-MM
+     * 当 type 为 month-day 时，格式为 MM-DD
+     * 当 type 为 datehour 时，格式为 YYYY-MM-DD HH
+     * 当 type 为 datetime 时，格式为 YYYY-MM-DD HH:mm
+     * 当 type 为 hour-minutes 时，格式为 HH:mm
+     */
+    value?: string | Date;
+    onChange?: (value?: string) => void;
+}
+export declare const FairysTaroDatePickerBase: (props: FairysTaroDatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/date.picker/index.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import { DatePicker } from "@nutui/nutui-react-taro";
+import { useMemo, useState } from "react";
+import { FairysTaroTextClearBase } from "../clear/index.js";
+const getDate = (selectedValue, type)=>{
+    if (Array.isArray(selectedValue) && selectedValue.length) {
+        const [year, month, day, hour, minute, second] = selectedValue;
+        let date = `${year}-${month}-${day} ${hour}:${minute}`;
+        if ('date' === type) date = `${year}-${month}-${day}`;
+        else if ('time' === type) date = `${hour}:${minute}:${second}`;
+        else if ('year-month' === type) date = `${year}-${month}`;
+        else if ('month-day' === type) date = `${month}-${day}`;
+        else if ('datehour' === type) date = `${year}-${month}-${day} ${hour}`;
+        else if ('datetime' === type) date = `${year}-${month}-${day} ${hour}:${minute}`;
+        else if ('hour-minutes' === type) date = `${hour}:${minute}`;
+        return date;
+    }
+};
+const renderDate = (date, type)=>{
+    let renderStr;
+    let _value;
+    const defaultValue = new Date();
+    if (date) {
+        const isDate = date instanceof Date;
+        if ('date' === type) if (isDate) {
+            renderStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+            _value = date;
+        } else {
+            const [year, month, day] = date.split(/[-|\s]/);
+            renderStr = `${year}-${month}-${day}`;
+            _value = new Date(`${year}-${month}-${day}`);
+        }
+        else if ('time' === type) if (isDate) {
+            renderStr = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+            _value = date;
+        } else {
+            const [hour, minute, second] = date.split(/[:|]/);
+            renderStr = `${hour}:${minute}:${second}`;
+            _value = new Date(`${defaultValue.getFullYear()}-${defaultValue.getMonth() + 1}-${defaultValue.getDate()} ${hour}:${minute}:${second}`);
+        }
+        else if ('year-month' === type) if (isDate) {
+            renderStr = `${date.getFullYear()}-${date.getMonth() + 1}`;
+            _value = date;
+        } else {
+            const [year, month] = date.split(/[-|\s]/);
+            renderStr = `${year}-${month}`;
+            _value = new Date(`${year}-${month}-01`);
+        }
+        else if ('month-day' === type) if (isDate) {
+            renderStr = `${date.getMonth() + 1}-${date.getDate()}`;
+            _value = date;
+        } else {
+            const [month, day] = date.split(/[-|\s]/);
+            renderStr = `${month}-${day}`;
+            _value = new Date(`${defaultValue.getFullYear()}-${month}-${day}`);
+        }
+        else if ('datehour' === type) if (isDate) {
+            renderStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}`;
+            _value = date;
+        } else {
+            const [year, month, day, hour] = date.split(/[-|\s|:]/);
+            renderStr = `${year}-${month}-${day} ${hour}`;
+            _value = new Date(`${year}-${month}-${day} ${hour}:00:00`);
+        }
+        else if ('datetime' === type) if (isDate) {
+            renderStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
+            _value = date;
+        } else {
+            const [year, month, day, hour, minute] = date.split(/[-|\s|:]/);
+            renderStr = `${year}-${month}-${day} ${hour}:${minute}`;
+            _value = new Date(`${year}-${month}-${day} ${hour}:${minute}:00`);
+        }
+        else if ('hour-minutes' === type) if (isDate) {
+            renderStr = `${date.getHours()}:${date.getMinutes()}`;
+            _value = date;
+        } else {
+            const [hour, minute] = date.split(/[:|]/);
+            renderStr = `${hour}:${minute}`;
+            _value = new Date(`${defaultValue.getFullYear()}-${defaultValue.getMonth() + 1}-${defaultValue.getDate()} ${hour}:${minute}:00`);
+        }
+    }
+    return {
+        renderStr,
+        _value
+    };
+};
+const FairysTaroDatePickerBase = (props)=>{
+    const { placeholder = "\u8BF7\u9009\u62E9", value, className, style, onChange, type = 'date', ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    const render = useMemo(()=>renderDate(value, type), [
+        value,
+        type
+    ]);
+    return /*#__PURE__*/ jsxs(View, {
+        className: `fairys-taro-date-picker ${className || ''}`,
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(FairysTaroTextClearBase, {
+                warpClassName: "fairys-taro-date-picker-text",
+                isValue: !!render.renderStr,
+                onTextClick: ()=>setVisible(true),
+                onClearClick: ()=>onChange?.(void 0),
+                children: render.renderStr || placeholder
+            }),
+            /*#__PURE__*/ jsx(DatePicker, {
+                type: type,
+                showChinese: true,
+                ...rest,
+                value: render._value,
+                visible: visible,
+                onClose: ()=>setVisible(false),
+                onConfirm: (_, selectedValue)=>{
+                    if (Array.isArray(selectedValue) && selectedValue.length) onChange?.(getDate(selectedValue, type));
+                    else onChange?.(void 0);
+                    setVisible(false);
+                }
+            })
+        ]
+    });
+};
+export { FairysTaroDatePickerBase };

package/esm/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './calendar';
+export * from './cascader';
+export * from './checkbox.group';
+export * from './clear';
+export * from './date.picker';
+export * from './picker';
+export * from './popup.search';
+export * from './radio.group';

package/esm/components/index.js

@@ -0,0 +1,8 @@
+export * from "./calendar/index.js";
+export * from "./cascader/index.js";
+export * from "./checkbox.group/index.js";
+export * from "./clear/index.js";
+export * from "./date.picker/index.js";
+export * from "./picker/index.js";
+export * from "./popup.search/index.js";
+export * from "./radio.group/index.js";

package/esm/components/picker/index.d.ts

@@ -0,0 +1,9 @@
+import { TaroPickerProps, PickerOptions } from '@nutui/nutui-react-taro';
+export interface FairysTaroPickerProps extends Omit<Partial<TaroPickerProps>, 'value' | 'onChange'> {
+    placeholder?: string;
+    value?: PickerOptions;
+    onChange?: (value: PickerOptions) => void;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+}
+export declare const FairysTaroPickerBase: (props: FairysTaroPickerProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/picker/index.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import { Picker } from "@nutui/nutui-react-taro";
+import { useMemo, useState } from "react";
+import { FairysTaroTextClearBase } from "../clear/index.js";
+const FairysTaroPickerBase = (props)=>{
+    const { placeholder = "\u8BF7\u9009\u62E9", bodyClassName, bodyStyle, className, style, value, onChange, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    const _renderValue = useMemo(()=>{
+        if (Array.isArray(value)) return value.map((item)=>item.label).join(' / ');
+    }, [
+        value
+    ]);
+    const _value = useMemo(()=>{
+        if (Array.isArray(value)) return value.map((item)=>item.value);
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ jsxs(View, {
+        className: `fairys-taro-picker ${className || ''}`,
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(FairysTaroTextClearBase, {
+                warpClassName: "fairys-taro-picker-text",
+                isValue: !!_renderValue,
+                onTextClick: ()=>setVisible(true),
+                onClearClick: ()=>onChange?.(void 0),
+                children: _renderValue || placeholder
+            }),
+            /*#__PURE__*/ jsx(Picker, {
+                ...rest,
+                className: `fairys-taro-picker-body fairystaroform__text-left ${bodyClassName || ''}`,
+                style: bodyStyle,
+                value: _value,
+                visible: visible,
+                onClose: ()=>setVisible(false),
+                onConfirm: (selectedOptions)=>{
+                    setVisible(false);
+                    onChange?.(selectedOptions);
+                }
+            })
+        ]
+    });
+};
+export { FairysTaroPickerBase };

package/esm/components/popup.search/base.d.ts

@@ -0,0 +1,2 @@
+export declare function FairysTaroPopupSearchFooterBase<T = any>(): import("react/jsx-runtime").JSX.Element;
+export declare function FairysTaroPopupSearchInputBase<T = any>(): import("react/jsx-runtime").JSX.Element;

package/esm/components/popup.search/base.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "@tarojs/components";
+import { Button, Checkbox, Input } from "@nutui/nutui-react-taro";
+import { Fragment } from "react";
+import { useFairysTaroPopupSearchBaseInstanceContext } from "./instance.js";
+import { Del, Search } from "@nutui/icons-react-taro";
+function FairysTaroPopupSearchFooterBase() {
+    const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext();
+    const operationStatus = state.operationStatus;
+    return /*#__PURE__*/ jsxs(View, {
+        className: "fairys-taro-popup-search-content-footer fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-nowrap fairystaroform__py-2 fairystaroform__box-border  fairystaroform__px-2",
+        children: [
+            /*#__PURE__*/ jsxs(View, {
+                className: "fairystaroform__flex-1 fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-nowrap fairystaroform__justify-between",
+                children: [
+                    /*#__PURE__*/ jsx(View, {
+                        className: "fairystaroform__flex-1",
+                        children: /*#__PURE__*/ jsx(Checkbox, {
+                            checked: state.allChecked,
+                            onChange: instance.onAllChecked,
+                            label: "\u5168\u9009"
+                        })
+                    }),
+                    'manage' === operationStatus ? /*#__PURE__*/ jsx(View, {
+                        className: "fairystaroform__flex-1 fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-nowrap fairystaroform__justify-end",
+                        children: /*#__PURE__*/ jsx(Button, {
+                            icon: /*#__PURE__*/ jsx(Del, {
+                                color: "#fff"
+                            }),
+                            type: "danger",
+                            onClick: ()=>instance.onDeleteData(),
+                            children: "\u5220\u9664"
+                        })
+                    }) : /*#__PURE__*/ jsx(Fragment, {})
+                ]
+            }),
+            'select' === operationStatus ? /*#__PURE__*/ jsx(View, {
+                className: "fairystaroform__flex-1",
+                children: /*#__PURE__*/ jsx(Button, {
+                    onClick: instance.onSave,
+                    block: true,
+                    type: "primary",
+                    children: "\u786E\u5B9A"
+                })
+            }) : /*#__PURE__*/ jsx(Fragment, {})
+        ]
+    });
+}
+function FairysTaroPopupSearchInputBase() {
+    const [state, instance] = useFairysTaroPopupSearchBaseInstanceContext({
+        sync: true
+    });
+    const search = state.search || '';
+    return /*#__PURE__*/ jsxs(View, {
+        className: "fairys-taro-popup-search-content-header fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-nowrap fairystaroform__px-1 fairystaroform__box-border fairystaroform__pr-4 fairystaroform__border-b-1 fairystaroform__border-b-solid fairystaroform__border-b-gray-200",
+        children: [
+            /*#__PURE__*/ jsx(Input, {
+                placeholder: "\u8BF7\u8F93\u5165",
+                value: search,
+                onChange: instance.onSearch
+            }),
+            /*#__PURE__*/ jsx(View, {
+                children: /*#__PURE__*/ jsx(Search, {
+                    className: "fairys-taro-popup-search-content-header-search fairystaroform__text-gray-600 fairystaroform__cursor-pointer"
+                })
+            })
+        ]
+    });
+}
+export { FairysTaroPopupSearchFooterBase, FairysTaroPopupSearchInputBase };

package/esm/components/popup.search/index.d.ts

@@ -0,0 +1,9 @@
+import { TaroPopupProps } from '@nutui/nutui-react-taro';
+import type { FairysTaroPopupSearchBaseInstanceMount } from './instance';
+/**
+ * 如果是多选，怎么移除某几个选中项
+ * */
+export interface FairysTaroPopupSearchProps<T = any> extends Partial<TaroPopupProps>, FairysTaroPopupSearchBaseInstanceMount<T> {
+    placeholder?: string;
+}
+export declare function FairysTaroPopupSearchBase<T = any>(props: FairysTaroPopupSearchProps<T>): import("react/jsx-runtime").JSX.Element;