sard 1.0.0-canary.0

package/dist/dropdown/index.scss

@@ -0,0 +1,236 @@
+@import '../style/base.scss';
+// #variables
+$sar-dropdown-height: 44px !default;
+$sar-dropdown-bg-color: $sar-emphasis-bg-color !default;
+$sar-dropdown-box-shadow: $sar-shadow !default;
+
+$sar-dropdown-item-padding-x: 8px !default;
+$sar-dropdown-item-active-opacity: $sar-active-opacity !default;
+$sar-dropdown-item-show-color: $sar-primary !default;
+
+$sar-dropdown-label-color: $sar-tertiary-color !default;
+$sar-dropdown-label-margin-right: 8px !default;
+
+$sar-dropdown-placeholder-color: $sar-tertiary-color !default;
+
+$sar-dropdown-arrow-margin-left: 4px !default;
+$sar-dropdown-arrow-color: $sar-border-color !default;
+$sar-dropdown-arrow-font-size: $sar-text-sm !default;
+
+$sar-dropdown-popup-z-index: 1000 !default;
+$sar-dropdown-popup-content-bg-color: $sar-emphasis-bg-color !default;
+
+$sar-dropdown-option-active-color: $sar-primary !default;
+
+$sar-dropdown-option-icon-font-size: $sar-text-base !default;
+
+// 暗黑模式
+$sar-dropdown-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+$sar-dropdown-label-dark-color: $sar-dark-tertiary-color !default;
+$sar-dropdown-placeholder-dark-color: $sar-dark-tertiary-color !default;
+$sar-dropdown-arrow-dark-color: $sar-dark-border-color !default;
+$sar-dropdown-popup-content-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+// #endvariables
+
+@include bem(dropdown) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    height: $sar-dropdown-height;
+    background-color: $sar-dropdown-bg-color;
+  }
+
+  @include e(shadow) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    // @include ifweb {
+    //   box-shadow: $sar-dropdown-box-shadow;
+    // }
+
+    @include m(show) {
+      z-index: $sar-dropdown-popup-z-index + 1;
+    }
+  }
+
+  @include e(item) {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: 0 $sar-dropdown-item-padding-x;
+    overflow: hidden;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(show) {
+      @include ifweb {
+        touch-action: none;
+      }
+      color: $sar-dropdown-item-show-color;
+    }
+
+    @include m(some-show) {
+      z-index: $sar-dropdown-popup-z-index + 1;
+    }
+
+    @include m(pressed) {
+      opacity: $sar-dropdown-item-active-opacity;
+    }
+
+    @include m(disabled) {
+      @include ifweb {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(label) {
+    flex: none;
+    color: $sar-dropdown-label-color;
+
+    @include m(disabled) {
+      color: $sar-disabled-color;
+    }
+  }
+
+  @include e(title, value) {
+    flex-grow: 0;
+    flex-shrink: 1;
+
+    @include m(has-label) {
+      margin-left: $sar-dropdown-label-margin-right;
+    }
+
+    @include m(disabled) {
+      color: $sar-disabled-color;
+    }
+  }
+
+  @include e(placeholder) {
+    @include universal;
+    color: $sar-dropdown-placeholder-color;
+
+    @include m(has-label) {
+      margin-left: $sar-dropdown-label-margin-right;
+    }
+  }
+
+  @include e(arrow) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    margin-left: $sar-dropdown-arrow-margin-left;
+
+    @include m(up) {
+      transform: rotate(180deg);
+    }
+  }
+
+  @include e(arrow-icon) {
+    color: $sar-dropdown-arrow-color;
+    font-size: $sar-dropdown-arrow-font-size;
+
+    @include m(show) {
+      color: $sar-dropdown-option-active-color;
+    }
+  }
+
+  @include e(away) {
+    @include universal;
+    @include fixed;
+    z-index: $sar-dropdown-popup-z-index;
+    display: none;
+    opacity: 0;
+    @include ifweb {
+      touch-action: none;
+    }
+
+    @include m(show) {
+      display: flex;
+    }
+  }
+
+  @include e(option) {
+    @include universal;
+    justify-content: space-between;
+
+    @include m(active) {
+      color: $sar-dropdown-option-active-color;
+    }
+  }
+
+  @include e(option-label) {
+    @include m(active) {
+      color: $sar-dropdown-option-active-color;
+    }
+  }
+
+  @include e(option-icon) {
+    @include universal;
+    display: none;
+    margin-left: auto;
+    font-size: $sar-dropdown-option-icon-font-size;
+    color: $sar-dropdown-option-active-color;
+
+    @include m(active) {
+      display: flex;
+    }
+  }
+
+  @include e(popover) {
+    @include universal;
+    @include fixed;
+    z-index: $sar-dropdown-popup-z-index;
+    overflow: hidden;
+  }
+
+  @include e(popup) {
+    position: absolute;
+  }
+
+  @include e(content) {
+    background-color: $sar-dropdown-popup-content-bg-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(dropdown) {
+    @include b() {
+      background-color: $sar-dropdown-dark-bg-color;
+    }
+
+    @include e(label) {
+      color: $sar-dropdown-label-dark-color;
+
+      @include m(disabled) {
+        color: $sar-dark-disabled-color;
+      }
+    }
+
+    @include e(title, value) {
+      @include m(disabled) {
+        color: $sar-dark-disabled-color;
+      }
+    }
+
+    @include e(placeholder) {
+      color: $sar-dropdown-placeholder-dark-color;
+    }
+
+    @include e(arrow-icon) {
+      color: $sar-dropdown-arrow-dark-color;
+    }
+
+    @include e(content) {
+      background-color: $sar-dropdown-popup-content-dark-bg-color;
+    }
+  }
+}

package/dist/ellipsis/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface EllipsisProps extends BaseProps {
+    rows?: number;
+    mode?: 'clip' | 'tail';
+}
+export declare const Ellipsis: FC<EllipsisProps>;
+export default Ellipsis;

package/dist/ellipsis/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import { isRN } from '../utils';
+export const Ellipsis = (props) => {
+    const { className, style, children, rows = 1, mode = 'tail', ...restProps } = props;
+    const [bem] = useBem('ellipsis');
+    if (isRN) {
+        return (_jsx(Text, { ...restProps, numberOfLines: rows, className: className, ellipsizeMode: mode, style: style, children: children }));
+    }
+    return (_jsx(View, { ...restProps, className: classNames(bem.b(), bem.m(mode), className), style: {
+            display: mode === 'clip' ? '' : '-webkit-box',
+            WebkitLineClamp: rows,
+            ...style,
+        }, children: children }));
+};
+export default Ellipsis;

package/dist/ellipsis/index.scss

@@ -0,0 +1,23 @@
+@import '../style/base.scss';
+
+// #variables
+// #endvariables
+
+@include ifweb {
+  @include bem(ellipsis) {
+    @include m(tail) {
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      white-space: normal;
+    }
+
+    @include m(clip) {
+      white-space: nowrap;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}

package/dist/empty/index.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+import { IconProps } from '../icon';
+import { BaseProps } from '../base';
+export interface EmptyProps extends BaseProps {
+    icon?: ReactNode;
+    iconProps?: IconProps;
+    description?: ReactNode;
+}
+export declare const Empty: FC<EmptyProps>;
+export default Empty;

package/dist/empty/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { Icon } from '../icon';
+import useTranslate from '../locale/useTranslate';
+import { isNullish } from '../utils';
+import { useBem } from '../use';
+export const Empty = (props) => {
+    const { t } = useTranslate('empty');
+    const { className, style, children, icon, iconProps, description = t('noData'), ...restProps } = props;
+    const [bem] = useBem('empty');
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: style, children: [_jsx(View, { className: bem.e('icon-wrapper'), children: icon ?? _jsx(Icon, { name: "empty", className: bem.e('icon'), ...iconProps }) }), !isNullish(description) && (_jsx(View, { className: bem.e('description'), children: description })), !isNullish(children) && (_jsx(View, { className: bem.e('extra'), children: children }))] }));
+};
+export default Empty;

package/dist/empty/index.scss

@@ -0,0 +1,59 @@
+@import '../style/base.scss';
+// #variables
+$sar-empty-icon-font-size: 48px !default;
+$sar-empty-icon-color: $sar-gray-300 !default;
+
+$sar-empty-description-margin-top: 16px !default;
+$sar-empty-description-font-size: $sar-text-base !default;
+$sar-empty-description-color: $sar-deemphasis-color !default;
+$sar-empty-extra-margin-top: 20px !default;
+
+// 暗黑模式
+$sar-empty-icon-dark-color: $sar-gray-700 !default;
+$sar-empty-description-dark-color: $sar-dark-deemphasis-color !default;
+// #endvariables
+
+@include bem(empty) {
+  @include b() {
+    @include universal;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  @include e(icon-wrapper) {
+    @include universal;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include e(icon) {
+    font-size: $sar-empty-icon-font-size;
+    line-height: $sar-empty-icon-font-size * $sar-leading-none;
+    color: $sar-empty-icon-color;
+  }
+
+  @include e(description) {
+    @include universal;
+    margin-top: $sar-empty-description-margin-top;
+    font-size: $sar-empty-description-font-size;
+    color: $sar-empty-description-color;
+  }
+
+  @include e(extra) {
+    @include universal;
+    margin-top: $sar-empty-extra-margin-top;
+  }
+}
+
+@include theme(dark) {
+  @include bem(empty) {
+    @include e(icon) {
+      color: $sar-empty-icon-dark-color;
+    }
+
+    @include e(description) {
+      color: $sar-empty-description-dark-color;
+    }
+  }
+}

package/dist/footer-bar/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface FooterBarProps extends BaseProps {
+    showLine?: boolean;
+    gap?: number;
+}
+export declare const FooterBar: FC<FooterBarProps>;
+export default FooterBar;

package/dist/footer-bar/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import Halfline from '../halfline';
+import { filterNullish } from '../utils';
+export const FooterBar = (props) => {
+    const { className, style, children, showLine = true, gap, ...restProps } = props;
+    const [bem] = useBem('footer-bar');
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: {
+            ...style,
+            ...filterNullish({ gap }),
+        }, children: [showLine && _jsx(Halfline, { direction: "top" }), children] }));
+};
+export default FooterBar;

package/dist/footer-bar/index.scss

@@ -0,0 +1,29 @@
+@import '../style/base.scss';
+// #variables
+$sar-footer-bar-padding-x: 16px !default;
+$sar-footer-bar-padding-y: 10px !default;
+$sar-footer-bar-gap: 8px !default;
+$sar-footer-bar-bg-color: $sar-emphasis-bg-color !default;
+
+// 暗黑模式
+$sar-footer-bar-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+// #endvariables
+
+@include bem(footer-bar) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    gap: $sar-footer-bar-gap;
+    padding: $sar-footer-bar-padding-y $sar-footer-bar-padding-x;
+    background-color: $sar-footer-bar-bg-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(footer-bar) {
+    @include b() {
+      background-color: $sar-footer-bar-dark-bg-color;
+    }
+  }
+}

package/dist/form/CustomForm.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+import { noop } from '../utils';
+export interface CustomFormProps extends BaseProps {
+    onSubmit: any;
+    onReset: any;
+}
+export declare const CustomFormContext: import("react").Context<{
+    submit: typeof noop;
+    reset: typeof noop;
+}>;
+export declare const CustomForm: FC<CustomFormProps>;
+export default CustomForm;

package/dist/form/CustomForm.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useMemo } from 'react';
+import { View } from '@tarojs/components';
+import { noop } from '../utils';
+import { useEvent } from '../use';
+export const CustomFormContext = createContext({
+    submit: noop,
+    reset: noop,
+});
+export const CustomForm = (props) => {
+    const { className, style, children, onSubmit, onReset, ...restProps } = props;
+    const handleSubmit = useEvent(() => {
+        onSubmit?.();
+    });
+    const handleReset = useEvent(() => {
+        onReset?.();
+    });
+    const context = useMemo(() => {
+        return {
+            submit: handleSubmit,
+            reset: handleReset,
+        };
+    }, []);
+    return (_jsx(View, { ...restProps, className: className, style: style, children: _jsx(CustomFormContext.Provider, { value: context, children: children }) }));
+};
+export default CustomForm;

package/dist/form/ErrorList.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export interface FormErrorListProps {
+    errors?: string[];
+}
+export declare const FormErrorList: FC<FormErrorListProps>;
+export default FormErrorList;

package/dist/form/ErrorList.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem } from '../use';
+export const FormErrorList = (props) => {
+    const { errors } = props;
+    const [bem] = useBem('form-field');
+    if (!errors) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: errors.map((error, index) => {
+            return (_jsx(View, { className: classNames(bem.e('feedback'), bem.em('feedback', 'failed')), children: error }, index));
+        }) }));
+};
+export default FormErrorList;

package/dist/form/Field.d.ts

@@ -0,0 +1,41 @@
+import { FC, ReactNode } from 'react';
+import { AnyFunction, BaseProps } from '../base';
+import { FormStore } from './createFormStore';
+import { ValidateStatus, NamePath, NodeName } from './type';
+import { Rule } from './Validator';
+export interface FormFieldProps extends Omit<BaseProps, 'children'> {
+    children?: ReactNode | ((params: {
+        value: any;
+        onChange: AnyFunction;
+        disabled: boolean;
+        readOnly: boolean;
+        required: boolean;
+    } & FormStore) => ReactNode);
+    layout?: 'horizontal' | 'vertical';
+    label?: ReactNode;
+    labelWidth?: number | string;
+    labelAlign?: 'start' | 'center' | 'end';
+    labelValign?: 'start' | 'center' | 'end';
+    starPosition?: 'left' | 'right';
+    required?: boolean;
+    hidden?: boolean;
+    unstyled?: boolean;
+    underline?: boolean;
+    inlaid?: boolean;
+    name?: NodeName;
+    valuePropName?: string;
+    trigger?: string;
+    initialValue?: any;
+    getValueFromEvent?: AnyFunction;
+    disabled?: boolean;
+    readOnly?: boolean;
+    rules?: Rule[];
+    validateFirst?: boolean;
+    validateTrigger?: string | string[];
+    validateStatus?: ValidateStatus;
+    feedback?: ReactNode;
+    extra?: ReactNode;
+    watch?: NamePath[];
+}
+export declare const FormField: FC<FormFieldProps>;
+export default FormField;

package/dist/form/Field.js

@@ -0,0 +1,124 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useContext, useEffect, useRef, } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem, useEvent } from '../use';
+import { mergeProps, toArray, scrollIntoView, isFunction, isNullish, noop, filterNullish, } from '../utils';
+import FieldContext from './FieldContext';
+import { useNode } from './useNode';
+import { NodeContext, useDescendant } from './NodeContext';
+import useInternalWatch from './useInternalWatch';
+import Halfline from '../halfline';
+export const FormField = (props) => {
+    const { className, style, children, layout, label, labelWidth, labelAlign, labelValign, starPosition, required, hidden, unstyled = false, underline = true, inlaid, name, valuePropName = 'value', trigger = 'onChange', initialValue, getValueFromEvent = (value) => value, disabled, readOnly, rules, validateFirst, validateTrigger, validateStatus, feedback, extra, watch, ...restProps } = props;
+    const [bem] = useBem('form-field');
+    const { mergedValidateFirst, mergedValidateTrigger } = useDescendant({
+        validateFirst,
+        validateTrigger,
+    });
+    useInternalWatch(watch);
+    const [node] = useNode({
+        type: 'field',
+        name,
+        label,
+        initialValue,
+        rules,
+        validateFirst: mergedValidateFirst,
+        validateStatus,
+        required,
+    });
+    const { errors, validate, setValue, value, finalRequired, finalValidateStatus, } = node;
+    const { formStore, layout: formLayout, labelWidth: formLabelWidth, labelAlign: formLabelAlign, labelValign: formlabelValign, starPosition: formStarPosition, disabled: formDisabled, readOnly: fromReadOnly, contextId, pageScrollTop, scrollIntoViewOptions, } = useContext(FieldContext);
+    const mergedLyaout = layout || formLayout;
+    const mergedLabelWidth = labelWidth || formLabelWidth;
+    const mergedLabelAlign = labelAlign || formLabelAlign;
+    const mergedLabelValign = labelValign || formlabelValign;
+    const mergedStarPosition = starPosition || formStarPosition;
+    const mergedDisabled = disabled || formDisabled;
+    const mergedReadOnly = readOnly || fromReadOnly;
+    const mergedFeedback = toArray(feedback ?? errors).filter(Boolean);
+    // 实例方法
+    const fieldElementRef = useRef();
+    const scrollToField = useEvent((options) => {
+        if (fieldElementRef.current) {
+            scrollIntoView(pageScrollTop.current, fieldElementRef.current, {
+                offsetTop: 16,
+                ...scrollIntoViewOptions,
+                ...options,
+                contextId,
+            });
+        }
+    });
+    node.data.scrollToField = scrollToField;
+    const changeTriggerNameList = useRef([]);
+    useEffect(() => {
+        if (changeTriggerNameList.current.length > 0) {
+            Promise.all(changeTriggerNameList.current.map((trigger) => validate({
+                triggerName: trigger,
+            }).catch(noop))).finally(() => {
+                changeTriggerNameList.current = [];
+            });
+        }
+    }, [value]);
+    const renderField = () => {
+        function renderFunction(children) {
+            return children({
+                ...formStore,
+                value,
+                onChange: handleChange,
+                disabled: mergedDisabled,
+                readOnly: mergedReadOnly,
+                required: finalRequired,
+            });
+        }
+        if (!isValidElement(children) || isNullish(name)) {
+            return isFunction(children) ? renderFunction(children) : children;
+        }
+        const triggerProps = {};
+        toArray(mergedValidateTrigger)
+            .filter(Boolean)
+            .forEach((item) => {
+            triggerProps[item] = () => {
+                changeTriggerNameList.current.push(item);
+            };
+        });
+        const handleChange = (...args) => {
+            setValue(getValueFromEvent(...args));
+        };
+        if (isFunction(children)) {
+            return renderFunction(children);
+        }
+        return cloneElement(children, mergeProps({
+            [valuePropName]: value,
+            [trigger]: (...args) => {
+                handleChange(...args);
+                children.props[trigger]?.(...args);
+            },
+            disabled: mergedDisabled,
+            readOnly: mergedReadOnly,
+        }, triggerProps));
+    };
+    const mayWrapByNode = (children) => {
+        if (isNullish(name)) {
+            return _jsx(_Fragment, { children: children });
+        }
+        else {
+            return (_jsx(NodeContext.Provider, { value: node, children: children }));
+        }
+    };
+    const renderLabel = () => {
+        const text = (_jsx(View, { className: bem.e('label-text'), children: label }, "label"));
+        const star = finalRequired && (_jsx(View, { className: classNames(bem.e('star'), bem.em('star', mergedStarPosition)), children: "*" }, "star"));
+        return mergedStarPosition === 'right' ? [text, star] : [star, text];
+    };
+    const renderStyledField = () => {
+        return (_jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m(mergedLyaout), bem.m(finalValidateStatus, finalValidateStatus), bem.m('hidden', hidden), bem.m('inlaid', inlaid), className), style: style, ref: fieldElementRef, children: [!isNullish(label) && (_jsx(View, { className: classNames(bem.e('label'), bem.em('label', `align-${mergedLabelAlign}`), bem.em('label', `valign-${mergedLabelValign}`), bem.em('label', mergedLyaout)), style: filterNullish({
+                        width: mergedLabelWidth,
+                    }), children: renderLabel() })), _jsxs(View, { className: classNames(bem.e('content'), bem.em('content', mergedLyaout)), children: [_jsx(View, { className: bem.e('control'), children: renderField() }), mergedFeedback.map((item, i) => (_jsx(View, { className: classNames(bem.e('feedback'), bem.em('feedback', finalValidateStatus, finalValidateStatus)), children: item }, i))), extra && _jsx(View, { className: bem.e('extra'), children: extra })] }), underline && !inlaid && (_jsx(Halfline, { direction: "bottom", className: bem.e('underline') }))] }));
+    };
+    const renderUnstyledField = () => {
+        return renderField();
+    };
+    return mayWrapByNode(unstyled ? renderUnstyledField() : renderStyledField());
+};
+export default FormField;

package/dist/form/FieldContext.d.ts

@@ -0,0 +1,18 @@
+import { MutableRefObject } from 'react';
+import { FormStore } from './createFormStore';
+import { ScrollIntoViewOptions } from '../utils';
+export interface FieldContextValue {
+    formStore?: FormStore;
+    layout?: 'horizontal' | 'vertical';
+    labelWidth?: number | string;
+    labelAlign?: 'start' | 'center' | 'end';
+    labelValign?: 'start' | 'center' | 'end';
+    starPosition?: 'left' | 'right';
+    disabled?: boolean;
+    readOnly?: boolean;
+    contextId: string;
+    pageScrollTop: MutableRefObject<number>;
+    scrollIntoViewOptions?: ScrollIntoViewOptions;
+}
+declare const FieldContext: import("react").Context<FieldContextValue>;
+export default FieldContext;