sard 1.0.0-canary.0

package/dist/notice-bar/index.scss

@@ -0,0 +1,109 @@
+@import '../style/base.scss';
+// #variables
+$sar-notice-bar-min-height: 40px !default;
+$sar-notice-bar-padding-x: 16px !default;
+$sar-notice-bar-padding-y: 10px !default;
+$sar-notice-bar-font-size: $sar-text-base !default;
+$sar-notice-bar-color: $sar-orange !default;
+$sar-notice-bar-bg-color: $sar-orange-100 !default;
+
+$sar-notice-bar-wrap-line-height: $sar-notice-bar-font-size * $sar-leading-snug !default;
+
+$sar-notice-bar-left-icon-size: 20px !default;
+$sar-notice-bar-left-icon-gap: 8px !default;
+$sar-notice-bar-right-icon-gap: 8px !default;
+// #endvariables
+
+@include bem(notice-bar) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    min-height: $sar-notice-bar-min-height;
+    padding: 0 $sar-notice-bar-padding-x;
+    background-color: $sar-notice-bar-bg-color;
+
+    @include m(wrap) {
+      padding-top: $sar-notice-bar-padding-y;
+      padding-bottom: $sar-notice-bar-padding-y;
+    }
+
+    @include m(linkable) {
+      @include ifweb {
+        cursor: pointer;
+      }
+    }
+  }
+
+  @include e(left-icon) {
+    @include universal;
+    margin-right: $sar-notice-bar-left-icon-gap;
+    color: $sar-notice-bar-color;
+  }
+
+  @include e(content) {
+    @include universal;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  @include e(container) {
+    @include universal;
+    flex: none;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: 10000px;
+
+    @include m(wrap) {
+      flex-direction: column;
+      width: 100%;
+    }
+  }
+
+  @include e(wrapper) {
+    @include universal;
+
+    @include m(scrollable) {
+      @include ifweb {
+        animation: #{bem-ns(notice-bar-scroll)} linear both running;
+      }
+    }
+
+    @include m(infinite) {
+      @include ifweb {
+        animation: #{bem-ns(notice-bar-scroll-infinite)} linear both running infinite;
+      }
+    }
+  }
+
+  @include e(text) {
+    font-size: $sar-notice-bar-font-size;
+    color: $sar-notice-bar-color;
+    line-height: $sar-notice-bar-wrap-line-height;
+  }
+
+  @include e(right-icon) {
+    @include universal;
+    padding-left: $sar-notice-bar-right-icon-gap;
+    color: $sar-notice-bar-color;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+  }
+}
+
+@include ifweb {
+  @keyframes #{bem-ns(notice-bar-scroll)} {
+    100% {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+
+  @keyframes #{bem-ns(notice-bar-scroll-infinite)} {
+    100% {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+}

package/dist/notify/Agent.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { NotifyProps, NotifyRef } from './Notify';
+import { AgentProps, MapIdAgent } from '../utils/imperative';
+export declare const mapIdAgent: MapIdAgent<NotifyProps, NotifyRef>;
+export declare const NotifyAgent: (agentProps: AgentProps<NotifyProps>) => import("react").CElement<any, import("react").Component<any, any, any>>;
+export default NotifyAgent;

package/dist/notify/Agent.js

@@ -0,0 +1,7 @@
+import { Notify } from './Notify';
+import { useAgent } from '../utils/imperative';
+export const mapIdAgent = {};
+export const NotifyAgent = (agentProps) => {
+    return useAgent(Notify, agentProps, mapIdAgent, 'notify');
+};
+export default NotifyAgent;

package/dist/notify/Notify.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import { PopupProps } from '../popup';
+export interface NotifyProps extends Omit<PopupProps, 'children'> {
+    type?: 'primary' | 'success' | 'warning' | 'error';
+    message?: ReactNode;
+    duration?: number;
+    color?: string;
+    background?: string;
+    onTimeout?: (visible: false) => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+    placement?: 'top' | 'bottom';
+    popupProps?: PopupProps;
+}
+export interface NotifyRef {
+    cancelHide: () => void;
+    hideLater: () => void;
+}
+export type NotifyFC = ForwardRefExoticComponent<PropsWithoutRef<NotifyProps> & RefAttributes<NotifyRef>>;
+export declare const Notify: NotifyFC;
+export default Notify;

package/dist/notify/Notify.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, forwardRef, useImperativeHandle, } from 'react';
+import classNames from 'classnames';
+import { Text, View } from '@tarojs/components';
+import { Popup } from '../popup';
+import { useBem, useControllableValue, useSetTimeout } from '../use';
+import { filterNullish } from '../utils';
+import SafeArea from '../safe-area';
+const mapPlacementEffect = {
+    top: 'slide-top',
+    bottom: 'slide-bottom',
+};
+export const Notify = forwardRef((props, ref) => {
+    const { className, style, contentClass, contentStyle, type = 'primary', message, duration = 3000, color, background, onTimeout, visible, defaultVisible, onVisible, placement = 'top', mask = false, ...restProps } = props;
+    const [bem] = useBem('notify');
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: false,
+    });
+    const [hideLater, cancelHide] = useSetTimeout(() => {
+        onTimeout?.(false);
+        setInnerVisible?.(false);
+    }, duration, {
+        canDelay: () => duration !== 0,
+    });
+    useEffect(() => {
+        if (innerVisible) {
+            hideLater();
+        }
+        else {
+            cancelHide();
+        }
+    }, [innerVisible, type, duration]);
+    useImperativeHandle(ref, () => ({
+        hideLater,
+        cancelHide,
+    }), []);
+    return (_jsxs(Popup, { ...restProps, mask: mask, visible: innerVisible, effect: mapPlacementEffect[placement], className: classNames(bem.e('popup'), className), style: style, contentClass: classNames(bem.b(), bem.m(placement), contentClass), contentStyle: {
+            ...contentStyle,
+        }, onlyPopup: true, children: [placement === 'top' && (_jsx(SafeArea, { direction: "top", className: bem.e('safe-area') })), _jsx(View, { className: classNames(bem.e('content'), bem.em('content', type)), style: filterNullish({
+                    backgroundColor: background,
+                }), children: _jsx(Text, { className: bem.e('text'), style: filterNullish({
+                        color,
+                    }), children: message }) }), placement === 'bottom' && (_jsx(SafeArea, { direction: "bottom", className: bem.e('safe-area') }))] }));
+});
+export default Notify;

package/dist/notify/imperative.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { NotifyProps } from './Notify';
+export interface NotifyOptions extends NotifyProps {
+    id?: string;
+}
+export interface NotifyShow {
+    (options: NotifyOptions): void;
+    (message: ReactNode, options?: NotifyOptions): void;
+}
+export interface NotifyInternalShow {
+    (optionsOrMessage: ReactNode | NotifyOptions, options?: NotifyOptions, innerType?: NotifyOptions['type']): void;
+}
+export declare const show: NotifyShow;
+export declare const success: NotifyShow;
+export declare const warning: NotifyShow;
+export declare const error: NotifyShow;
+export declare const hide: (id?: string) => void;
+export declare const hideAll: () => void;

package/dist/notify/imperative.js

@@ -0,0 +1,35 @@
+import { mapIdAgent } from './Agent';
+import { isNotReactNode } from '../utils';
+const internalShow = (optionsOrMessage, options = {}, internalType) => {
+    if (isNotReactNode(optionsOrMessage)) {
+        options = optionsOrMessage;
+    }
+    else {
+        options.message = optionsOrMessage;
+    }
+    options.type = internalType;
+    const { id = 'notify' } = options;
+    const ref = mapIdAgent[id];
+    if (ref) {
+        ref.current?.hideLater();
+        ref.current?.show(options);
+    }
+};
+export const show = (optionsOrMessage, options) => {
+    internalShow(optionsOrMessage, options, 'primary');
+};
+export const success = (optionsOrMessage, options) => {
+    internalShow(optionsOrMessage, options, 'success');
+};
+export const warning = (optionsOrMessage, options) => {
+    internalShow(optionsOrMessage, options, 'warning');
+};
+export const error = (optionsOrMessage, options) => {
+    internalShow(optionsOrMessage, options, 'error');
+};
+export const hide = (id = 'notify') => {
+    mapIdAgent[id]?.current?.hide();
+};
+export const hideAll = () => {
+    Object.keys(mapIdAgent).forEach((key) => mapIdAgent[key]?.current?.hide());
+};

package/dist/notify/index.d.ts

@@ -0,0 +1,15 @@
+import type { NotifyFC as NotifyOriginFC, NotifyProps, NotifyRef } from './Notify';
+import { show, success, warning, error, hide, hideAll } from './imperative';
+import { NotifyAgent } from './Agent';
+export interface NotifyFC extends NotifyOriginFC {
+    show: typeof show;
+    success: typeof success;
+    warning: typeof warning;
+    error: typeof error;
+    hide: typeof hide;
+    hideAll: typeof hideAll;
+    Agent: typeof NotifyAgent;
+}
+declare const Notify: NotifyFC;
+export { Notify, NotifyAgent, NotifyProps, NotifyRef };
+export default Notify;

package/dist/notify/index.js

@@ -0,0 +1,13 @@
+import { Notify as NotifyOrigin } from './Notify';
+import { show, success, warning, error, hide, hideAll } from './imperative';
+import { NotifyAgent } from './Agent';
+const Notify = NotifyOrigin;
+Notify.show = show;
+Notify.success = success;
+Notify.warning = warning;
+Notify.error = error;
+Notify.hide = hide;
+Notify.hideAll = hideAll;
+Notify.Agent = NotifyAgent;
+export { Notify, NotifyAgent };
+export default Notify;

package/dist/notify/index.scss

@@ -0,0 +1,65 @@
+@import '../style/base.scss';
+// #variables
+$sar-notify-z-index: 1190 !default;
+
+$sar-notify-width: 90% !default;
+$sar-notify-safe-area-min-height: 16px !default;
+$sar-notify-paddding-x: 16px !default;
+$sar-notify-paddding-y: 8px !default;
+$sar-notify-border-radius: $sar-rounded !default;
+$sar-notify-box-shadow: $sar-shadow-lg !default;
+$sar-notify-font-size: $sar-text-base !default;
+$sar-notify-color: $sar-white !default;
+// #endvariables
+
+@include bem(notify) {
+  @include b() {
+    @include universal;
+    width: $sar-notify-width;
+    pointer-events: box-none;
+    @include ifweb {
+      pointer-events: none;
+    }
+  }
+
+  @include e(popup) {
+    align-items: center;
+    z-index: $sar-notify-z-index;
+  }
+
+  @include e(safe-area) {
+    min-height: $sar-notify-safe-area-min-height;
+  }
+
+  @include e(content) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: $sar-notify-paddding-y $sar-notify-paddding-x;
+    border-radius: $sar-notify-border-radius;
+    box-shadow: $sar-notify-box-shadow;
+    @include ifweb {
+      pointer-events: auto;
+    }
+
+    @each $type,
+      $color
+        in (
+          primary: $sar-primary,
+          success: $sar-success,
+          warning: $sar-warning,
+          error: $sar-danger
+        )
+    {
+      @include m($type) {
+        background-color: $color;
+      }
+    }
+  }
+
+  @include e(text) {
+    font-size: $sar-notify-font-size;
+    color: $sar-white;
+  }
+}

package/dist/number-keyboard/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BaseProps } from '../base';
+export interface NumberKeyboardProps extends BaseProps {
+    onInput?: (key: string) => void;
+    onDelete?: () => void;
+    extraKey?: string;
+    random?: boolean;
+}
+export declare const NumberKeyboard: import("react").MemoExoticComponent<(props: NumberKeyboardProps) => import("react/jsx-runtime").JSX.Element>;
+export default NumberKeyboard;

package/dist/number-keyboard/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { Icon } from '../icon';
+import { useBem, useEvent } from '../use';
+import { shuffle } from '../utils';
+import Pressable from '../pressable';
+export const NumberKeyboard = memo((props) => {
+    const { className, style, onInput, onDelete, extraKey, random, ...restProps } = props;
+    const [bem] = useBem('number-keyboard');
+    const handleKeyClick = useEvent((key) => {
+        onInput?.(key);
+    });
+    const handleDelete = useEvent(() => {
+        onDelete?.();
+    });
+    const numArray = useMemo(() => {
+        const arr = Array(10)
+            .fill(0)
+            .map((_, i) => (i + 1) % 10);
+        if (random) {
+            shuffle(arr, true);
+        }
+        return arr;
+    }, [random]);
+    const keysElement = useMemo(() => {
+        const keys = [...numArray];
+        if (extraKey) {
+            keys.splice(keys.length - 1, 0, 'extra');
+        }
+        keys.push('backspace');
+        return keys.map((n) => {
+            return (_jsx(View, { className: classNames(bem.e(n), bem.e('key-wrapper')), children: _jsx(Pressable, { children: ({ pressed }) => (_jsx(View, { className: classNames(bem.e('key'), bem.em('key', 'pressed', pressed)), onClick: () => {
+                            switch (n) {
+                                case 'backspace':
+                                    handleDelete();
+                                    break;
+                                default:
+                                    handleKeyClick(String(n));
+                                    break;
+                            }
+                        }, children: n === 'extra' ? (extraKey) : n === 'backspace' ? (_jsx(Icon, { name: "backspace", className: bem.e('backspace-icon') })) : (n) })) }) }, n));
+        });
+    }, [numArray, extraKey]);
+    const renderKeyboard = () => {
+        return (_jsx(View, { ...restProps, className: classNames(bem.b(), className), style: style, children: _jsx(View, { className: bem.e('body'), children: keysElement }) }));
+    };
+    return renderKeyboard();
+});
+export default NumberKeyboard;

package/dist/number-keyboard/index.scss

@@ -0,0 +1,93 @@
+@use 'sass:math';
+@import '../style/base.scss';
+// #variables
+$sar-number-keyboard-bg-color: $sar-gray-200 !default;
+
+$sar-number-keyboard-body-padding-x: 6px !default;
+$sar-number-keyboard-body-padding-y: 6px !default;
+
+$sar-number-keyboard-key-gap: 6px !default;
+$sar-number-keyboard-key-height: 48px !default;
+$sar-number-keyboard-key-border-radius: $sar-rounded !default;
+$sar-number-keyboard-key-font-size: $sar-text-2xl !default;
+$sar-number-keyboard-key-color: $sar-body-color !default;
+$sar-number-keyboard-key-bg-color: $sar-white !default;
+$sar-number-keyboard-key-active-bg-color: $sar-gray-200 !default;
+
+// 暗黑模式
+$sar-number-keyboard-dark-bg-color: $sar-gray-800 !default;
+$sar-number-keyboard-key-dark-color: $sar-white !default;
+$sar-number-keyboard-key-dark-bg-color: $sar-gray-700 !default;
+$sar-number-keyboard-key-active-dark-bg-color: $sar-gray-600 !default;
+// #endvariables
+
+@include bem(number-keyboard) {
+  @include b() {
+    @include universal;
+    background-color: $sar-number-keyboard-bg-color;
+  }
+
+  @include e(body) {
+    @include universal;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: $sar-number-keyboard-body-padding-y
+      $sar-number-keyboard-body-padding-x;
+    margin: math.div($sar-number-keyboard-key-gap, 2) * -1;
+  }
+
+  @include e(key-wrapper) {
+    @include universal;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 33.3333%;
+    width: 33.3333%;
+    padding: math.div($sar-number-keyboard-key-gap, 2);
+  }
+
+  @include e(backspace) {
+    @include universal;
+    max-width: 33.3333%;
+  }
+
+  @include e(key) {
+    @include universal;
+    align-items: center;
+    justify-content: center;
+
+    height: $sar-number-keyboard-key-height;
+    border-radius: $sar-number-keyboard-key-border-radius;
+    font-size: $sar-number-keyboard-key-font-size;
+    color: $sar-number-keyboard-key-color;
+    background-color: $sar-number-keyboard-key-bg-color;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(pressed) {
+      background-color: $sar-number-keyboard-key-active-bg-color;
+    }
+  }
+
+  @include e(backspace-icon) {
+    font-size: $sar-number-keyboard-key-font-size;
+  }
+}
+
+@include theme(dark) {
+  @include bem(number-keyboard) {
+    @include b() {
+      background-color: $sar-number-keyboard-dark-bg-color;
+    }
+
+    @include e(key) {
+      color: $sar-number-keyboard-key-dark-color;
+      background-color: $sar-number-keyboard-key-dark-bg-color;
+
+      @include m(pressed) {
+        background-color: $sar-number-keyboard-key-active-dark-bg-color;
+      }
+    }
+  }
+}

package/dist/pagination/index.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import { BaseProps } from '../base';
+export interface PaginationProps extends BaseProps {
+    total?: number;
+    pageSize?: number;
+    current?: number;
+    defaultCurrent?: number;
+    onChange?: (page: number) => void;
+    pageCount?: number;
+    pageButtonCount?: number;
+    hideOnSinglePage?: boolean;
+    type?: 'simple' | 'multi';
+    ellipsis?: boolean;
+    multiCount?: number;
+    prev?: ReactNode;
+    next?: ReactNode;
+    page?: (page: number, active: boolean) => ReactNode;
+}
+export declare const Pagination: FC<PaginationProps>;
+export default Pagination;

package/dist/pagination/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text, View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem, useControllableValue } from '../use';
+import { getPageRange, minmax } from '../utils';
+import useTranslate from '../locale/useTranslate';
+import Pressable from '../pressable';
+import Halfline from '../halfline';
+export const Pagination = (props) => {
+    const { t } = useTranslate('pagination');
+    const { className, style, total = 0, pageSize = 10, current, defaultCurrent, onChange, pageCount, pageButtonCount = 5, hideOnSinglePage = false, type = 'multi', ellipsis, multiCount = 5, prev, next, page: pageSlot, ...restProps } = props;
+    const [bem] = useBem('pagination');
+    const innerPageCount = (pageCount ?? Math.ceil(total / pageSize)) || 1;
+    const [innerCurrent, setInnerCurrent] = useControllableValue({
+        value: current,
+        defaultValue: defaultCurrent,
+        trigger: onChange,
+        initialValue: 1,
+        postValue: (value) => minmax(value, 1, innerPageCount),
+    });
+    const [min, max] = getPageRange(innerCurrent, innerPageCount, pageButtonCount);
+    const handlePrevClick = () => {
+        if (innerCurrent > 1) {
+            changeTo(innerCurrent - 1);
+        }
+    };
+    const handleNextClick = () => {
+        if (innerCurrent < innerPageCount) {
+            changeTo(innerCurrent + 1);
+        }
+    };
+    const handleItemClick = (page, type) => {
+        changeTo(type === 0
+            ? page
+            : minmax(innerCurrent + type * multiCount, 1, innerPageCount));
+    };
+    const changeTo = (page) => {
+        if (page !== innerCurrent) {
+            setInnerCurrent(page);
+        }
+    };
+    const renderMulti = () => {
+        const length = max - min + 1;
+        return Array(length)
+            .fill(0)
+            .map((_, i) => {
+            const page = i + min;
+            const isPrevMulti = i === 0 && page !== 1;
+            const isNextMulti = i === length - 1 && page !== innerPageCount;
+            const type = isPrevMulti ? -1 : isNextMulti ? 1 : 0;
+            return (_jsx(Pressable, { disabled: innerCurrent === page, children: ({ pressed }) => (_jsxs(View, { className: classNames(bem.e('item'), bem.em('item', 'current', innerCurrent === page), bem.em('item', 'pressed', pressed)), onClick: () => handleItemClick(page, type), children: [_jsx(Halfline, { direction: "around", className: classNames(bem.e('halfline'), bem.em('halfline', 'current', innerCurrent === page)), style: { borderLeftWidth: 0 } }), _jsx(Text, { className: classNames(bem.e('item-text'), bem.em('item-text', 'current', innerCurrent === page)), children: ellipsis && (isPrevMulti || isNextMulti)
+                                ? '...'
+                                : pageSlot
+                                    ? pageSlot(page, innerCurrent === page)
+                                    : page })] })) }, page));
+        });
+    };
+    const renderSimple = () => {
+        return (_jsxs(View, { className: bem.e('ratio'), children: [innerCurrent, "/", innerPageCount] }));
+    };
+    return (_jsx(_Fragment, { children: (!hideOnSinglePage || innerPageCount > 1) && (_jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m(type), className), style: style, children: [_jsx(Pressable, { disabled: innerCurrent === 1, children: ({ pressed }) => (_jsxs(View, { className: classNames(bem.e('item'), bem.em('item', 'disabled', innerCurrent === 1), bem.em('item', 'pressed', pressed), bem.em('item', 'first'), bem.e('prev'), bem.em('prev', type)), onClick: handlePrevClick, children: [_jsx(Halfline, { direction: "around", className: classNames(bem.em('halfline', 'first'), bem.em('halfline', type)) }), _jsx(Text, { className: bem.e('item-text'), children: prev ?? t('previous') })] })) }), type === 'simple' ? renderSimple() : renderMulti(), _jsx(Pressable, { disabled: innerCurrent === innerPageCount, children: ({ pressed }) => (_jsxs(View, { className: classNames(bem.e('item'), bem.em('item', 'disabled', innerCurrent === innerPageCount), bem.em('item', 'pressed', pressed), bem.em('item', 'last'), bem.e('next'), bem.em('next', type)), onClick: handleNextClick, children: [_jsx(Halfline, { direction: "around", className: classNames(bem.em('halfline', 'last'), bem.em('halfline', type)), style: {
+                                    ...(type === 'multi' ? { borderLeftWidth: 0 } : null),
+                                } }), _jsx(Text, { className: bem.e('item-text'), children: next ?? t('next') })] })) })] })) }));
+};
+export default Pagination;