sard 1.0.0-canary.0

package/dist/stepper/index.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { CustomWrapper, View, } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem, useControllableValue, useEvent, useLayoutUpdateEffect, } from '../use';
+import { createMouseBinder, isNullish, isPC, isString, minmax } from '../utils';
+import { Icon } from '../icon';
+import { Input } from '../input';
+import Pressable from '../pressable';
+export const Stepper = (props) => {
+    const { className, style, value, defaultValue, onChange, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, valueOnClear, step = 1, precision, inputStyle, inputType = 'number', placeholder, disabled, readOnly, press = true, pressTime = 350, interval = 150, onBlur, onFocus, size = 36, ...restProps } = props;
+    const [bem] = useBem('stepper');
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+    });
+    const [inputValue, setInputValue] = useState(innerValue);
+    const isMin = !isNullish(innerValue) && Number(innerValue) <= min;
+    const isMax = !isNullish(innerValue) && Number(innerValue) >= max;
+    useLayoutUpdateEffect(() => {
+        function isZeroAfterCoercionButNotLiteral(target) {
+            if (target === null ||
+                target === false ||
+                (isString(target) && target.trim() === '')) {
+                return true;
+            }
+        }
+        const nextInputValue = Number(innerValue);
+        setInputValue(isNaN(nextInputValue) || isZeroAfterCoercionButNotLiteral(innerValue)
+            ? ''
+            : nextInputValue);
+    }, [innerValue]);
+    const setValueEnsureSafe = (val) => {
+        setInnerValue(val);
+        setInputValue(val);
+    };
+    const normalizedValue = (value) => {
+        value = minmax(value, min, max);
+        if (precision !== undefined) {
+            value = +value.toFixed(precision);
+        }
+        return value;
+    };
+    // # 输入框
+    const getValueOnClear = () => {
+        return valueOnClear === 'min'
+            ? min
+            : valueOnClear === 'max'
+                ? max
+                : valueOnClear;
+    };
+    const handleInputChange = (value) => {
+        setInputValue(value);
+        if (value === '') {
+            setInnerValue(getValueOnClear());
+        }
+    };
+    const handleBlur = (event) => {
+        if (inputValue !== '') {
+            const nextValue = Number(inputValue);
+            if (isNaN(nextValue)) {
+                setInputValue('');
+                setInnerValue(getValueOnClear());
+            }
+            else {
+                setValueEnsureSafe(normalizedValue(nextValue));
+            }
+        }
+        onBlur?.(event);
+    };
+    // # 按钮
+    const setByStep = useEvent((delta) => {
+        setValueEnsureSafe(normalizedValue((Number(innerValue) || 0) + step * delta));
+    });
+    const handleClick = (delta, reach) => {
+        if (!disabled && !readOnly && !reach) {
+            setByStep(delta);
+        }
+    };
+    const pressTimer = useRef();
+    const isPressing = useRef(false);
+    const handleLongPress = (delta) => {
+        setTimeout(() => {
+            if (isPressing.current) {
+                setByStep(delta);
+                handleLongPress(delta);
+            }
+        }, interval);
+    };
+    const handleTouchStart = useEvent((delta) => {
+        if (!press ||
+            disabled ||
+            readOnly ||
+            (delta === -1 && isMin) ||
+            (delta === 1 && isMax)) {
+            return;
+        }
+        isPressing.current = false;
+        clearTimeout(pressTimer.current);
+        pressTimer.current = setTimeout(() => {
+            isPressing.current = true;
+            handleLongPress(delta);
+        }, pressTime);
+    });
+    const handleTouchEnd = useEvent((event) => {
+        clearTimeout(pressTimer.current);
+        if (isPressing.current) {
+            isPressing.current = false;
+            event.preventDefault?.();
+        }
+    });
+    const minusMouseBinder = useMemo(() => {
+        return isPC
+            ? createMouseBinder({
+                onStart() {
+                    handleTouchStart(-1);
+                },
+                onEnd: handleTouchEnd,
+            })
+            : null;
+    }, []);
+    const plusMouseBinder = useMemo(() => {
+        return isPC
+            ? createMouseBinder({
+                onStart() {
+                    handleTouchStart(1);
+                },
+                onEnd: handleTouchEnd,
+            })
+            : null;
+    }, []);
+    const renderButton = (delta, icon, reach, cls, mouseBinder) => {
+        return (_jsx(Pressable, { disabled: reach || disabled || readOnly, onTouchStart: () => handleTouchStart(delta), onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, children: ({ pressed }) => (_jsx(View, { className: classNames(bem.e('button'), bem.e(cls), bem.em('button', 'disabled', disabled || reach), bem.em('button', 'readonly', readOnly), bem.em('button', 'pressed', pressed)), style: { width: size, height: size }, onClick: () => handleClick(delta, reach), ...mouseBinder, children: _jsx(Icon, { name: icon, className: classNames(bem.e('icon'), bem.em('icon', 'disabled', disabled)) }) })) }));
+    };
+    return (_jsx(CustomWrapper, { children: _jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m('disabled', disabled), bem.m('readonly', readOnly), className), style: style, children: [renderButton(-1, 'minus', isMin, 'decrease', minusMouseBinder), _jsx(Input, { type: inputType, className: bem.e('input'), placeholder: placeholder, style: { ...inputStyle, height: size }, value: String(inputValue ?? ''), onChange: handleInputChange, onBlur: handleBlur, onFocus: onFocus, disabled: disabled, readOnly: readOnly }), renderButton(1, 'plus', isMax, 'increase', plusMouseBinder)] }) }));
+};
+export default Stepper;

package/dist/stepper/index.scss

@@ -0,0 +1,106 @@
+@import '../style/base.scss';
+// #variables
+$sar-stepper-height: 36px !default;
+$sar-stepper-bg-color: $sar-secondary-bg-color !default;
+
+$sar-stepper-input-gap: 4px !default;
+$sar-stepper-input-width: 50px !default;
+$sar-stepper-input-padding-x: 5px !default;
+
+$sar-stepper-button-width: $sar-stepper-height !default;
+$sar-stepper-button-font-size: 18px !default;
+$sar-stepper-button-border-radius: $sar-rounded-sm !default;
+$sar-stepper-button-active-bg-color: $sar-active-deep-bg-color !default;
+
+// 暗黑模式
+$sar-stepper-dark-bg-color: $sar-dark-secondary-bg-color !default;
+$sar-stepper-button-active-dark-bg-color: $sar-dark-active-deep-bg-color !default;
+// #endvariables
+
+@include bem(stepper) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: $sar-stepper-input-gap;
+    height: $sar-stepper-height;
+  }
+
+  @include e(button) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    width: $sar-stepper-button-width;
+    font-size: $sar-stepper-button-font-size;
+    background-color: $sar-stepper-bg-color;
+
+    @include ifweb {
+      cursor: pointer;
+
+      @include m(readonly) {
+        cursor: default;
+      }
+    }
+
+    @include m(pressed) {
+      background-color: $sar-stepper-button-active-bg-color;
+    }
+
+    @include m(disabled) {
+      background-color: $sar-disabled-shallow-bg-color;
+    }
+  }
+
+  @include e(decrease) {
+    flex: none;
+    border-top-left-radius: $sar-stepper-button-border-radius;
+    border-bottom-left-radius: $sar-stepper-button-border-radius;
+  }
+
+  @include e(increase) {
+    flex: none;
+    border-top-right-radius: $sar-stepper-button-border-radius;
+    border-bottom-right-radius: $sar-stepper-button-border-radius;
+  }
+
+  @include e(icon) {
+    @include m(disabled) {
+      color: $sar-disabled-color;
+    }
+  }
+
+  @include e(input) {
+    width: $sar-stepper-input-width;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: $sar-stepper-input-padding-x;
+    padding-right: $sar-stepper-input-padding-x;
+    border: 0;
+    border-radius: 0;
+    text-align: center;
+    background-color: $sar-stepper-bg-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(stepper) {
+    @include e(button) {
+      background-color: $sar-stepper-dark-bg-color;
+
+      @include m(pressed) {
+        background-color: $sar-stepper-button-active-dark-bg-color;
+      }
+    }
+
+    @include e(input) {
+      background-color: $sar-stepper-dark-bg-color;
+    }
+
+    @include e(icon) {
+      @include m(disabled) {
+        color: $sar-dark-disabled-color;
+      }
+    }
+  }
+}

package/dist/steps/Step.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { StepsStatus } from './index';
+import { IconProps } from '../icon';
+import { BaseProps } from '../base';
+export interface StepsStepProps extends Omit<BaseProps, 'children'> {
+    children?: ReactNode | ((status: StepsStatus) => ReactNode);
+    status?: StepsStatus;
+    color?: string;
+    lineColor?: string;
+    disabled?: boolean;
+    icon?: ReactNode | ((status: StepsStatus) => ReactNode);
+    iconProps?: IconProps | ((status: StepsStatus) => IconProps);
+    onClick?: (event: ITouchEvent) => void;
+    center?: boolean;
+    direction?: 'vertical' | 'horizontal';
+    clickable?: boolean;
+    _placement?: number;
+    _first?: boolean;
+    _last?: boolean;
+}
+export declare const StepsStep: FC<StepsStepProps>;
+export default StepsStep;

package/dist/steps/Step.js

@@ -0,0 +1,41 @@
+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 { useBem, useEvent } from '../use';
+import { filterNullish, isFunction } from '../utils';
+import Pressable from '../pressable';
+const mapStatusIcon = {
+    finish: 'check-circle-fill',
+    process: 'circle',
+    wait: 'circle',
+    error: 'x-circle',
+};
+function getPosition(num) {
+    return num < 0 ? 'behind' : num === 0 ? 'self' : 'front';
+}
+export const StepsStep = (props) => {
+    const { className, style, children, status = 'wait', color, lineColor, disabled = false, icon, iconProps, onClick, center, direction, clickable, _placement, _first, _last, ...restProps } = props;
+    const [bem] = useBem('steps');
+    const placement = getPosition(_placement);
+    const handleClick = useEvent((event) => {
+        if (!disabled) {
+            onClick?.(event);
+        }
+    });
+    const lineClass = classNames(bem.e('line'), bem.em('line', 'behind', placement === 'behind'), bem.em('line', 'last', _last), bem.em('line', 'center-last', center && _last), bem.em('line', direction), bem.em('line', `${direction}-center-last`, center && _last));
+    return (_jsx(Pressable, { disabled: !clickable || disabled, children: ({ pressed }) => (_jsxs(View, { ...restProps, className: classNames(bem.e('step'), bem.em('step', 'last', _last), bem.em('step', 'center', center), bem.em('step', 'center-last', center && _last), bem.em('step', `${direction}-center`, center), bem.em('step', `${direction}-center-last`, center && _last), bem.em('step', direction), bem.em('step', `${direction}-last`, _last), bem.em('step', 'clickable', clickable), bem.em('step', 'disabled', disabled), className), style: style, onClick: handleClick, children: [_jsxs(View, { className: classNames(bem.e('header'), bem.em('header', direction), bem.em('header', `${direction}-center`, center)), children: [_jsx(View, { className: classNames(lineClass, bem.e('line-before'), bem.em('line-before', 'self', placement === 'self'), bem.em('line-before', 'first', _first), bem.em('line-before', 'center', center), bem.em('line-before', `${direction}-center`, center)), style: filterNullish({
+                                backgroundColor: placement === 'behind' || placement === 'self'
+                                    ? color
+                                    : lineColor,
+                            }) }), isFunction(icon)
+                            ? icon(status)
+                            : icon ?? (_jsx(Icon, { name: mapStatusIcon[status], ...(isFunction(iconProps) ? iconProps(status) : iconProps), color: status === 'finish' || status === 'process'
+                                    ? color
+                                    : undefined, className: classNames(bem.e('icon'), bem.em('icon', status), bem.em('icon', 'pressed', pressed)) })), _jsx(View, { className: classNames(lineClass, bem.e('line-after'), bem.em('line-after', 'last', _last), bem.em('line-after', 'center', center), bem.em('line-after', `${direction}-center`, center)), style: filterNullish({
+                                backgroundColor: placement === 'behind' ? color : lineColor,
+                            }) })] }), _jsx(View, { className: classNames(bem.e('body'), bem.em('body', direction), bem.em('body', 'center', center), bem.em('body', `${direction}-center`, center), bem.em('body', 'pressed', pressed), bem.em('body', status)), style: filterNullish({
+                        color: status === 'process' ? color : null,
+                    }), children: isFunction(children) ? children(status) : children })] })) }));
+};
+export default StepsStep;

package/dist/steps/index.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import { StepsStep } from './Step';
+import { BaseProps } from '../base';
+import { IconProps } from '../icon';
+export * from './Step';
+export type StepsStatus = 'wait' | 'process' | 'error' | 'finish';
+export interface StepsProps extends BaseProps {
+    center?: boolean;
+    direction?: 'vertical' | 'horizontal';
+    current?: number;
+    status?: StepsStatus;
+    color?: string;
+    lineColor?: string;
+    clickable?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode | ((status: StepsStatus) => ReactNode);
+    iconProps?: IconProps | ((status: StepsStatus) => IconProps);
+}
+export interface StepsFC extends FC<StepsProps> {
+    Step: typeof StepsStep;
+}
+export declare const Steps: StepsFC;
+export default Steps;

package/dist/steps/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { StepsStep } from './Step';
+import { useBem } from '../use';
+import { pickNonNullish } from '../utils';
+export * from './Step';
+export const Steps = (props) => {
+    const { className, style, children, center = false, direction = 'horizontal', current = 0, status, color, lineColor, clickable, disabled = false, icon, iconProps, ...restProps } = props;
+    const [bem] = useBem('steps');
+    const count = Children.count(children);
+    return (_jsx(View, { ...restProps, className: classNames(bem.b(), bem.m(direction), className), style: style, children: Children.map(children, (item, index) => {
+            return cloneElement(item, {
+                status: item.props.status ??
+                    (index < current
+                        ? 'finish'
+                        : index === current
+                            ? status ?? 'process'
+                            : 'wait'),
+                ...pickNonNullish({
+                    color,
+                    lineColor,
+                    disabled,
+                    icon,
+                    iconProps,
+                }, item.props),
+                center,
+                direction,
+                clickable,
+                _placement: index - current,
+                _first: index === 0,
+                _last: index === count - 1,
+            });
+        }) }));
+};
+Steps.Step = StepsStep;
+export default Steps;

package/dist/steps/index.scss

@@ -0,0 +1,300 @@
+@use 'sass:math';
+@import '../style/base.scss';
+// #variables
+$sar-steps-step-font-size: $sar-text-base !default;
+$sar-steps-step-active-opacity: $sar-active-opacity !default;
+
+$sar-steps-icon-finish-color: $sar-primary !default;
+$sar-steps-icon-process-color: $sar-primary !default;
+$sar-steps-icon-wait-color: $sar-tertiary-color !default;
+$sar-steps-icon-error-color: $sar-danger !default;
+
+$sar-steps-text-finish-color: $sar-body-color !default;
+$sar-steps-text-process-color: $sar-primary !default;
+$sar-steps-text-wait-color: $sar-tertiary-color !default;
+$sar-steps-text-error-color: $sar-danger !default;
+
+$sar-steps-header-gap-y: 4px !default;
+$sar-steps-header-gap-x: 12px !default;
+$sar-steps-header-vertical-top: 4px !default;
+
+$sar-steps-line-thickness: 1px !default;
+$sar-steps-line-gap: 3px !default;
+$sar-steps-line-color: $sar-border-color !default;
+$sar-steps-line-active-color: $sar-primary !default;
+
+$sar-steps-icon-font-size: $sar-text-base !default;
+
+$sar-steps-body-padding-x: 8px !default;
+$sar-steps-body-padding-y: 4px !default;
+
+// 暗黑模式
+$sar-steps-icon-wait-dark-color: $sar-dark-tertiary-color !default;
+$sar-steps-text-finish-dark-color: $sar-dark-body-color !default;
+$sar-steps-text-wait-dark-color: $sar-dark-tertiary-color !default;
+$sar-steps-line-dark-color: $sar-dark-border-color !default;
+$sar-steps-line-active-dark-color: $sar-primary !default;
+// #endvariables
+
+@include bem(steps) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  @include e(step) {
+    @include universal;
+    flex: 1;
+    font-size: $sar-steps-step-font-size;
+
+    @include m(last) {
+      flex: none;
+      @include ifweb {
+        white-space: nowrap;
+      }
+    }
+
+    @include m(center) {
+      justify-content: center;
+    }
+
+    @include m(center-last) {
+      flex: 1;
+      @include ifweb {
+        white-space: unset;
+      }
+    }
+
+    @include m(vertical) {
+      flex-direction: row;
+    }
+
+    @include m(vertical-center) {
+      justify-content: center;
+      align-items: center;
+    }
+
+    @include m(vertical-center-last) {
+      flex: 1;
+      @include ifweb {
+        white-space: unset;
+      }
+    }
+
+    @include m(clickable) {
+      @include ifweb {
+        cursor: pointer;
+      }
+    }
+
+    @include m(disabled) {
+      @include disabled;
+    }
+  }
+
+  @include e(header) {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    padding-top: $sar-steps-header-gap-y;
+    padding-bottom: $sar-steps-header-gap-y;
+
+    @include m(vertical) {
+      top: $sar-steps-header-vertical-top + $sar-steps-body-padding-y;
+      flex: none;
+      flex-direction: column;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-left: $sar-steps-header-gap-x;
+      padding-right: $sar-steps-header-gap-x;
+    }
+
+    @include m(vertical-center) {
+      top: 0;
+      align-self: stretch;
+    }
+  }
+
+  @include e(line) {
+    @include universal;
+    height: $sar-steps-line-thickness;
+    width: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    margin-left: $sar-steps-line-gap;
+    margin-right: $sar-steps-line-gap;
+    background-color: $sar-steps-line-color;
+
+    @include m(behind) {
+      background-color: $sar-steps-line-active-color;
+    }
+
+    @include m(last) {
+      display: none;
+    }
+
+    @include m(center-last) {
+      display: flex;
+    }
+
+    @include m(vertical) {
+      width: $sar-steps-line-thickness;
+      height: 0;
+      margin-left: 0;
+      margin-right: 0;
+      margin-top: $sar-steps-line-gap;
+      margin-bottom: $sar-steps-line-gap;
+    }
+
+    @include m(vertical-last) {
+      @include ifweb {
+        white-space: unset;
+      }
+    }
+
+    @include m(vertical-center-last) {
+      display: flex;
+    }
+  }
+
+  @include e(line-before) {
+    display: none;
+
+    @include m(self) {
+      background-color: $sar-steps-line-active-color;
+    }
+
+    @include m(first) {
+      opacity: 0;
+    }
+
+    @include m(center) {
+      display: flex;
+      margin-left: 0;
+    }
+
+    @include m(vertical-center) {
+      margin-top: 0;
+    }
+  }
+
+  @include e(line-after) {
+    @include m(last) {
+      opacity: 0;
+    }
+
+    @include m(center) {
+      margin-right: 0;
+    }
+
+    @include m(vertical-center) {
+      margin-bottom: 0;
+    }
+  }
+
+  @include e(icon) {
+    @include universal;
+    font-size: $sar-steps-icon-font-size;
+
+    @include m(finish) {
+      color: $sar-steps-icon-finish-color;
+    }
+
+    @include m(process) {
+      color: $sar-steps-icon-process-color;
+    }
+
+    @include m(wait) {
+      color: $sar-steps-icon-wait-color;
+    }
+
+    @include m(error) {
+      color: $sar-steps-icon-error-color;
+    }
+
+    @include m(pressed) {
+      opacity: $sar-steps-step-active-opacity;
+    }
+  }
+
+  @include e(body) {
+    @include universal;
+
+    @include m(vertical) {
+      flex: 1;
+      padding-top: $sar-steps-body-padding-y;
+      padding-bottom: $sar-steps-body-padding-y;
+    }
+
+    @include m(center) {
+      align-items: center;
+    }
+
+    @include m(vertical-center) {
+      justify-content: center;
+      align-items: flex-start;
+    }
+
+    @include m(finish) {
+      color: $sar-steps-text-finish-color;
+    }
+
+    @include m(process) {
+      color: $sar-steps-text-process-color;
+    }
+
+    @include m(wait) {
+      color: $sar-steps-text-wait-color;
+    }
+
+    @include m(error) {
+      color: $sar-steps-text-error-color;
+    }
+
+    @include m(pressed) {
+      opacity: $sar-steps-step-active-opacity;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(steps) {
+    @include e(line) {
+      background-color: $sar-steps-line-dark-color;
+
+      @include m(behind) {
+        background-color: $sar-steps-line-active-dark-color;
+      }
+    }
+
+    @include e(line-before) {
+      @include m(self) {
+        background-color: $sar-steps-line-active-dark-color;
+      }
+    }
+
+    @include e(icon) {
+      @include m(wait) {
+        color: $sar-steps-icon-wait-dark-color;
+      }
+    }
+
+    @include e(body) {
+      @include m(finish) {
+        color: $sar-steps-text-finish-dark-color;
+      }
+
+      @include m(wait) {
+        color: $sar-steps-text-wait-dark-color;
+      }
+    }
+  }
+}

package/dist/style/base.scss

@@ -0,0 +1,3 @@
+@import './variables.scss';
+@import './functions.scss';
+@import './mixins.scss';