sard 1.0.0-canary.0

package/dist/skeleton/index.scss

@@ -0,0 +1,108 @@
+@import '../style/base.scss';
+// #variables
+$sar-skeleton-bg-color: $sar-secondary-bg-color !default;
+$sar-skeleton-border-radius: $sar-rounded-sm !default;
+
+$sar-skeleton-block-height: 16px !default;
+
+$sar-skeleton-avatar-size: 32px !default;
+$sar-skeleton-avatar-margin-right: 16px !default;
+
+$sar-skeleton-title-width: 40% !default;
+$sar-skeleton-title-height: 20px !default;
+$sar-skeleton-title-gap: 16px !default;
+
+$sar-skeleton-row-last-width: 60% !default;
+$sar-skeleton-row-gap: 12px !default;
+
+// 暗黑模式
+$sar-skeleton-dark-bg-color: $sar-dark-secondary-bg-color !default;
+// #endvariables
+
+@include bem(skeleton) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  @include e(block) {
+    @include universal;
+    width: 100%;
+    height: $sar-skeleton-block-height;
+    background-color: $sar-skeleton-bg-color;
+    border-radius: $sar-skeleton-border-radius;
+  }
+
+  @include e(avatar) {
+    @include universal;
+    flex: none;
+    width: $sar-skeleton-avatar-size;
+    height: $sar-skeleton-avatar-size;
+    border-radius: $sar-skeleton-border-radius;
+
+    @include m(in-skeleton) {
+      margin-right: $sar-skeleton-avatar-margin-right;
+    }
+  }
+
+  @include e(title) {
+    @include universal;
+    width: $sar-skeleton-title-width;
+    height: $sar-skeleton-title-height;
+  }
+
+  @include e(row) {
+    @include universal;
+
+    @include m(later) {
+      margin-top: $sar-skeleton-row-gap;
+    }
+    @include m(last) {
+      width: $sar-skeleton-row-last-width;
+    }
+  }
+
+  @include e(content) {
+    @include universal;
+    flex: 1;
+  }
+
+  @include e(paragraph) {
+    @include universal;
+
+    @include m(in-skeleton) {
+      margin-top: $sar-skeleton-title-gap;
+    }
+  }
+
+  @include m(round) {
+    border-radius: $sar-rounded-full;
+  }
+
+  @include m(animated) {
+    @include ifweb {
+      animation: #{bem-ns(skeleton-animated)} 1.2s ease infinite;
+    }
+  }
+}
+
+@include ifweb {
+  @keyframes #{bem-ns(skeleton-animated)} {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    60% {
+      opacity: 0.5;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(skeleton) {
+    @include e(block) {
+      background-color: $sar-skeleton-dark-bg-color;
+    }
+  }
+}

package/dist/slider/index.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode, FC } from 'react';
+import { BaseProps } from '../base';
+type RangeValue = number[];
+export interface SliderBaseProps extends BaseProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    vertical?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    pieceColor?: string;
+    trackColor?: string;
+    trackSize?: number;
+    thumbColor?: string;
+    thumbSize?: string | number;
+    startThumb?: (value: number) => ReactNode;
+    endThumb?: (value: number) => ReactNode;
+    thumb?: (value: number) => ReactNode;
+}
+export interface SliderSingleProps extends SliderBaseProps {
+    range?: false;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    onChanging?: (value: number) => void;
+}
+export interface SliderRangeProps extends SliderBaseProps {
+    range?: true;
+    value?: RangeValue;
+    defaultValue?: RangeValue;
+    onChange?: (value: RangeValue) => void;
+    onChanging?: (value: RangeValue) => void;
+}
+export type SliderProps = SliderSingleProps | SliderRangeProps;
+export declare const Slider: FC<SliderProps>;
+export default Slider;

package/dist/slider/index.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, View } from '@tarojs/components';
+import { useControllableValue, useEvent, useBem, useSelectorId, useWatchStateSync, } from '../use';
+import { arrayEqual, filterNullish, getRectByElement, getShadow, isNullish, isRN, isUndefined, minmax, mround, toArray, } from '../utils';
+import { usePan } from '../pan-gesture-detector/usePan';
+import PanGestureDetector from '../pan-gesture-detector';
+export const Slider = (props) => {
+    const { className, style, min = 0, max = 100, step = 1, vertical = false, disabled = false, readOnly = false, pieceColor, trackColor, trackSize, thumbColor, thumbSize, startThumb, endThumb, thumb, range = false, value, defaultValue, onChanging, onChange, ...restProps } = props;
+    const [bem] = useBem('slider');
+    const contextId = useSelectorId();
+    const trackRef = useRef(null);
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+        initialValue: () => (range ? [min, min] : min),
+    });
+    const [currentValue, setCurrentValue] = useWatchStateSync(innerValue);
+    const handleSliderClick = useEvent(async (event) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        let touch = event;
+        if (event.changedTouches) {
+            touch = event.changedTouches[0];
+        }
+        const res = await getRectByElement(trackRef.current, contextId);
+        const size = vertical ? res.height : res.width;
+        const tapCoord = isRN
+            ? vertical
+                ? touch.pageY
+                : touch.pageX
+            : vertical
+                ? touch.clientY
+                : touch.clientX;
+        const startCoord = vertical ? res.top : res.left;
+        const offset = tapCoord - startCoord;
+        const ratio = offset / size;
+        const total = max - min;
+        const tapValue = minmax(mround(min + total * ratio, step), min, max);
+        let nextValue;
+        if (Array.isArray(currentValue)) {
+            const [start, end] = currentValue;
+            if (Math.abs(tapValue - end) <= Math.abs(tapValue - start)) {
+                if (tapValue !== currentValue[1]) {
+                    nextValue = [start, tapValue];
+                }
+            }
+            else {
+                if (tapValue !== currentValue[0]) {
+                    nextValue = [tapValue, end];
+                }
+            }
+        }
+        else {
+            if (tapValue !== currentValue) {
+                nextValue = tapValue;
+            }
+        }
+        if (!isUndefined(nextValue)) {
+            setCurrentValue(nextValue);
+            setInnerValue(nextValue);
+            onChanging?.(nextValue);
+        }
+    });
+    const downFields = useRef();
+    const downValue = useRef(currentValue);
+    const moveValue = useRef();
+    const downRatio = useRef(0);
+    const handleTouchStart = useEvent(async (index) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        downFields.current = await getRectByElement(trackRef.current, contextId);
+        const value = Array.isArray(currentValue)
+            ? currentValue[index]
+            : currentValue;
+        downRatio.current = (value - min) / (max - min);
+        downValue.current = currentValue;
+        moveValue.current = currentValue;
+    });
+    const handleTouchMove = useEvent((event, index) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        const res = downFields.current;
+        if (!res) {
+            return;
+        }
+        const size = vertical ? res.height : res.width;
+        const delta = vertical ? event.dy : event.dx;
+        const ratio = delta / size + downRatio.current;
+        const total = max - min;
+        const tapValue = minmax(mround(min + total * ratio, step), min, max);
+        let nextValue;
+        if (Array.isArray(downValue.current)) {
+            const [start, end] = downValue.current;
+            if (index === 1) {
+                nextValue = tapValue < start ? [tapValue, start] : [start, tapValue];
+            }
+            else {
+                nextValue = tapValue > end ? [end, tapValue] : [tapValue, end];
+            }
+        }
+        else {
+            nextValue = tapValue;
+        }
+        if (!arrayEqual(toArray(nextValue), toArray(moveValue.current))) {
+            moveValue.current = nextValue;
+            setCurrentValue(nextValue);
+            onChanging?.(Array.isArray(nextValue) ? [...nextValue] : nextValue);
+        }
+    });
+    const handleTouchEnd = useEvent(() => {
+        if (disabled || readOnly) {
+            return;
+        }
+        const moveVal = moveValue.current;
+        if (!isNullish(moveVal)) {
+            if (!arrayEqual(toArray(moveVal), toArray(downValue.current))) {
+                setInnerValue(moveVal);
+            }
+        }
+        moveValue.current = undefined;
+    });
+    let startValue;
+    let endValue;
+    if (Array.isArray(currentValue)) {
+        startValue = currentValue[0];
+        endValue = currentValue[1];
+    }
+    else {
+        startValue = min;
+        endValue = currentValue;
+    }
+    const startRatio = (startValue - min) / (max - min);
+    const endRatio = (endValue - min) / (max - min);
+    const startPercent = startRatio * 100 + '%';
+    const endPercent = (endRatio - startRatio) * 100 + '%';
+    const startThunbHandlers = usePan({
+        start() {
+            handleTouchStart(0);
+        },
+        move(event) {
+            handleTouchMove(event, 0);
+        },
+        end: handleTouchEnd,
+    });
+    const endThunbHandlers = usePan({
+        start() {
+            handleTouchStart(1);
+        },
+        move(event) {
+            handleTouchMove(event, 1);
+        },
+        end: handleTouchEnd,
+    });
+    const defaultThumb = () => (_jsx(View, { className: classNames(bem.e('thumb')), style: filterNullish({
+            width: thumbSize,
+            height: thumbSize,
+            backgroundColor: thumbColor,
+            ...getShadow('small'),
+        }) }));
+    const renderThumb = (index, handlers) => {
+        const finalThumb = thumb || (index === 0 ? startThumb : endThumb) || defaultThumb;
+        return (_jsx(PanGestureDetector, { handlers: handlers, children: _jsx(View, { className: classNames(bem.e('thumb-container'), bem.e(`thumb-${index === 0 ? 'start' : 'end'}`), bem.em(`thumb-${index === 0 ? 'start' : 'end'}`, 'vertical', vertical), bem.em('thumb-container', 'readonly', readOnly), bem.em('thumb-container', 'disabled', disabled)), children: finalThumb(index === 0 ? startValue : endValue) }) }, index));
+    };
+    return (_jsx(CustomWrapper, { id: contextId, children: _jsx(View, { ...restProps, className: classNames(bem.b(), bem.m('vertical', vertical), className), style: style, onClick: handleSliderClick, children: _jsx(View, { ref: trackRef, className: classNames(bem.e('track'), bem.em('track', 'vertical', vertical)), style: filterNullish({
+                    width: vertical ? trackSize : null,
+                    height: !vertical ? trackSize : null,
+                    backgroundColor: trackColor || null,
+                }), children: _jsx(View, { className: classNames(bem.e('track-piece'), bem.em('track-piece', 'vertical', vertical), bem.em('track-piece', 'disabled', disabled)), style: {
+                        ...filterNullish({
+                            ...(vertical ? { top: startPercent } : { left: startPercent }),
+                            ...(vertical ? { height: endPercent } : { width: endPercent }),
+                            backgroundColor: pieceColor,
+                        }),
+                    }, children: range
+                        ? [
+                            renderThumb(0, startThunbHandlers),
+                            renderThumb(1, endThunbHandlers),
+                        ]
+                        : renderThumb(1, endThunbHandlers) }) }) }) }));
+};
+export default Slider;

package/dist/slider/index.scss

@@ -0,0 +1,138 @@
+@use 'sass:math';
+@import '../style/base.scss';
+// #variables
+$sar-slider-track-main-axis-size: 100% !default;
+$sar-slider-track-cross-axis-size: 2px !default;
+$sar-slider-track-bg-color: $sar-secondary-bg-color !default;
+
+$sar-slider-track-piece-bg-color: $sar-primary !default;
+
+$sar-slider-thumb-size: 24px !default;
+$sar-slider-thumb-bg-color: $sar-white !default;
+$sar-slider-thumb-box-shadow: $sar-shadow-sm !default;
+
+$sar-slider-padding: math.div($sar-slider-thumb-size, 2) + 3px !default;
+
+// 暗黑模式
+$sar-slider-track-dark-bg-color: $sar-dark-secondary-bg-color !default;
+$sar-slider-track-piece-dark-bg-color: $sar-primary !default;
+$sar-slider-thumb-dark-bg-color: $sar-white !default;
+// #endvariables
+
+@include bem(slider) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    padding: $sar-slider-padding;
+
+    @include ifweb {
+      cursor: pointer;
+
+      @include m(readonly) {
+        cursor: default;
+      }
+    }
+  }
+
+  @include m(vertical) {
+    width: auto;
+    height: 100%;
+  }
+
+  @include e(track) {
+    @include universal;
+    width: $sar-slider-track-main-axis-size;
+    height: $sar-slider-track-cross-axis-size;
+    background-color: $sar-slider-track-bg-color;
+
+    @include m(vertical) {
+      width: $sar-slider-track-cross-axis-size;
+      height: $sar-slider-track-main-axis-size;
+    }
+  }
+
+  @include e(track-piece) {
+    @include universal;
+    position: absolute;
+    width: auto;
+    height: 100%;
+    background-color: $sar-slider-track-piece-bg-color;
+
+    @include m(vertical) {
+      width: 100%;
+      height: auto;
+    }
+
+    @include m(disabled) {
+      background-color: $sar-disabled-deep-bg-color;
+    }
+  }
+
+  @include e(thumb-container) {
+    @include universal;
+    position: absolute;
+    width: 0;
+    height: 0;
+    justify-content: center;
+    align-items: center;
+    @include ifweb {
+      touch-action: none;
+
+      @include m(readonly, disabled) {
+        touch-action: auto;
+      }
+    }
+  }
+
+  @include e(thumb) {
+    @include universal;
+    flex: none;
+    width: $sar-slider-thumb-size;
+    height: $sar-slider-thumb-size;
+    border-radius: $sar-rounded-full;
+    background-color: $sar-slider-thumb-bg-color;
+    box-shadow: $sar-slider-thumb-box-shadow;
+  }
+
+  @include e(thumb-start) {
+    top: 50%;
+    left: 0;
+
+    @include m(vertical) {
+      top: 0;
+      left: 50%;
+    }
+  }
+
+  @include e(thumb-end) {
+    top: 50%;
+    right: 0;
+
+    @include m(vertical) {
+      top: auto;
+      bottom: 0;
+      left: 50%;
+      right: auto;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(slider) {
+    @include e(track) {
+      background-color: $sar-slider-track-dark-bg-color;
+    }
+
+    @include e(track-piece) {
+      background-color: $sar-slider-track-piece-dark-bg-color;
+
+      @include m(disabled) {
+        background-color: $sar-dark-disabled-deep-bg-color;
+      }
+    }
+
+    @include e(thumb) {
+      background-color: $sar-slider-thumb-dark-bg-color;
+    }
+  }
+}

package/dist/space/index.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export type SpaceAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type SpaceJustify = 'start' | 'center' | 'end' | 'around' | 'between' | 'evenly';
+export interface SpaceProps extends BaseProps {
+    direction?: 'vertical' | 'horizontal';
+    gap?: 'small' | 'medium' | 'large' | number;
+    align?: SpaceAlign;
+    justify?: SpaceJustify;
+    wrap?: boolean;
+}
+export declare const Space: FC<SpaceProps>;
+export default Space;

package/dist/space/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import { filterNullish, isString } from '../utils';
+const mapAlign = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+    baseline: 'baseline',
+};
+const mapJustify = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    around: 'space-around',
+    between: 'space-between',
+    evenly: 'space-evenly',
+};
+export const Space = (props) => {
+    const { className, style, children, direction = 'vertical', wrap, align = 'stretch', justify = 'start', gap = 'small', ...restProps } = props;
+    const [bem] = useBem('space');
+    return (_jsx(View, { ...restProps, style: {
+            ...style,
+            ...filterNullish({
+                gap: !isString(gap) ? gap : null,
+                alignItems: align && mapAlign[align],
+                justifyContent: justify && mapJustify[justify],
+            }),
+        }, className: classNames(bem.b(), bem.m(direction), bem.m(gap, isString(gap)), bem.m('wrap', direction === 'horizontal' && wrap), className), children: children }));
+};
+export default Space;

package/dist/space/index.scss

@@ -0,0 +1,36 @@
+@import '../style/base.scss';
+// #variables
+$sar-space-gap-small: 8px !default;
+$sar-space-gap-medium: 16px !default;
+$sar-space-gap-large: 24px !default;
+// #endvariables
+
+@include bem(space) {
+  @include b() {
+    @include universal;
+
+    @include m(vertical) {
+      flex-direction: column;
+    }
+
+    @include m(horizontal) {
+      flex-direction: row;
+    }
+
+    @include m(wrap) {
+      flex-wrap: wrap;
+    }
+
+    @include m(small) {
+      gap: $sar-space-gap-small;
+    }
+
+    @include m(medium) {
+      gap: $sar-space-gap-medium;
+    }
+
+    @include m(large) {
+      gap: $sar-space-gap-large;
+    }
+  }
+}

package/dist/stepper/index.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, FC } from 'react';
+import { InputProps } from '@tarojs/components';
+import { BaseProps } from '../base';
+export interface StepperProps extends Omit<BaseProps, 'children'> {
+    value?: number | string;
+    defaultValue?: number | string;
+    onChange?: (value: number | string) => void;
+    min?: number;
+    max?: number;
+    valueOnClear?: number | null | 'min' | 'max';
+    step?: number;
+    precision?: number;
+    inputStyle?: CSSProperties;
+    inputType?: 'number' | 'digit' | 'text';
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    press?: boolean;
+    pressTime?: number;
+    interval?: number;
+    onBlur?: InputProps['onBlur'];
+    onFocus?: InputProps['onFocus'];
+    size?: number;
+}
+export declare const Stepper: FC<StepperProps>;
+export default Stepper;