sard 1.0.0-canary.0

package/dist/locale/lang/en-US.js

@@ -0,0 +1,92 @@
+const typeTemplate = '${label} is not a valid ${type}';
+export default {
+    calendar: {
+        weeks: {
+            0: 'Sun',
+            1: 'Mon',
+            2: 'Tue',
+            3: 'Wed',
+            4: 'Thu',
+            5: 'Fri',
+            6: 'Sat',
+        },
+        monthTitle: '${year}/${month}',
+        start: 'start',
+        end: 'end',
+    },
+    cascader: {
+        pleaseSelect: 'Please select',
+    },
+    datetimePicker: {
+        y: '',
+        M: '',
+        d: '',
+        h: '',
+        m: '',
+        s: '',
+    },
+    dialog: {
+        confirm: 'Ok',
+        cancel: 'Cancel',
+    },
+    empty: {
+        noData: 'No data',
+    },
+    form: {
+        defaultValidateMessages: {
+            default: 'Field validation error for ${label}',
+            required: '${label} is required',
+            enum: '${label} must be one of [${enum}]',
+            whitespace: '${label} cannot be a blank character',
+            date: {
+                format: '${label} date format is invalid',
+                parse: '${label} cannot be converted to a date',
+                invalid: '${label} is an invalid date',
+            },
+            types: {
+                string: typeTemplate,
+                function: typeTemplate,
+                array: typeTemplate,
+                object: typeTemplate,
+                number: typeTemplate,
+                date: typeTemplate,
+                boolean: typeTemplate,
+                integer: typeTemplate,
+                float: typeTemplate,
+                regexp: typeTemplate,
+                email: typeTemplate,
+                url: typeTemplate,
+                hex: typeTemplate,
+            },
+            string: {
+                len: '${label} must be ${len} characters',
+                min: '${label} must be at least ${min} characters',
+                max: '${label} must be up to ${max} characters',
+                range: '${label} must be between ${min}-${max} characters',
+            },
+            number: {
+                len: '${label} must be equal to ${len}',
+                min: '${label} must be minimum ${min}',
+                max: '${label} must be maximum ${max}',
+                range: '${label} must be between ${min}-${max}',
+            },
+            array: {
+                len: 'Must be ${len} ${label}',
+                min: 'At least ${min} ${label}',
+                max: 'At most ${max} ${label}',
+                range: 'The amount of ${label} must be between ${min}-${max}',
+            },
+            pattern: {
+                mismatch: '${label} does not match the pattern ${pattern}',
+            },
+        },
+    },
+    pagination: {
+        previous: 'Previous',
+        next: 'Next',
+    },
+    popout: {
+        confirm: 'Ok',
+        cancel: 'Cancel',
+    },
+};

package/dist/locale/lang/zh-CN.d.ts

@@ -0,0 +1,92 @@
+declare const _default: {
+    calendar: {
+        weeks: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+        };
+        monthTitle: string;
+        start: string;
+        end: string;
+    };
+    cascader: {
+        pleaseSelect: string;
+    };
+    datetimePicker: {
+        y: string;
+        M: string;
+        d: string;
+        h: string;
+        m: string;
+        s: string;
+    };
+    dialog: {
+        confirm: string;
+        cancel: string;
+    };
+    empty: {
+        noData: string;
+    };
+    form: {
+        defaultValidateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                function: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
+    pagination: {
+        previous: string;
+        next: string;
+    };
+    popout: {
+        confirm: string;
+        cancel: string;
+    };
+};
+export default _default;

package/dist/locale/lang/zh-CN.js

@@ -0,0 +1,92 @@
+const typeTemplate = '${label}不是一个有效的${type}';
+export default {
+    calendar: {
+        weeks: {
+            0: '日',
+            1: '一',
+            2: '二',
+            3: '三',
+            4: '四',
+            5: '五',
+            6: '六',
+        },
+        monthTitle: '${year}年${month}月',
+        start: '开始',
+        end: '结束',
+    },
+    cascader: {
+        pleaseSelect: '请选择',
+    },
+    datetimePicker: {
+        y: '年',
+        M: '月',
+        d: '日',
+        h: '时',
+        m: '分',
+        s: '秒',
+    },
+    dialog: {
+        confirm: '确定',
+        cancel: '取消',
+    },
+    empty: {
+        noData: '暂无数据',
+    },
+    form: {
+        defaultValidateMessages: {
+            default: '字段验证错误${label}',
+            required: '${label}是必需的',
+            enum: '${label}必须是其中一个[${enum}]',
+            whitespace: '${label}不能为空字符',
+            date: {
+                format: '${label}日期格式无效',
+                parse: '${label}不能转换为日期',
+                invalid: '${label}是一个无效日期',
+            },
+            types: {
+                string: typeTemplate,
+                function: typeTemplate,
+                array: typeTemplate,
+                object: typeTemplate,
+                number: typeTemplate,
+                date: typeTemplate,
+                boolean: typeTemplate,
+                integer: typeTemplate,
+                float: typeTemplate,
+                regexp: typeTemplate,
+                email: typeTemplate,
+                url: typeTemplate,
+                hex: typeTemplate,
+            },
+            string: {
+                len: '${label}须为${len}个字符',
+                min: '${label}最少${min}个字符',
+                max: '${label}最多${max}个字符',
+                range: '${label}须在${min}-${max}字符之间',
+            },
+            number: {
+                len: '${label}必须等于${len}',
+                min: '${label}最小值为${min}',
+                max: '${label}最大值为${max}',
+                range: '${label}须在${min}-${max}之间',
+            },
+            array: {
+                len: '须为${len}个${label}',
+                min: '最少${min}个${label}',
+                max: '最多${max}个${label}',
+                range: '${label}数量须在${min}-${max}之间',
+            },
+            pattern: {
+                mismatch: '${label}与模式不匹配${pattern}',
+            },
+        },
+    },
+    pagination: {
+        previous: '上一页',
+        next: '下一页',
+    },
+    popout: {
+        confirm: '确定',
+        cancel: '取消',
+    },
+};

package/dist/locale/useTranslate.d.ts

@@ -0,0 +1,7 @@
+export declare function useTranslate(prefix?: string): {
+    t: (chain?: string | Record<string, number | string | object>, data?: Record<string, number | string | object>) => string;
+    translate: (chain?: string | Record<string, number | string | object>, data?: Record<string, number | string | object>) => string;
+    select: (chain?: string) => any;
+    lang: string;
+};
+export default useTranslate;

package/dist/locale/useTranslate.js

@@ -0,0 +1,41 @@
+import { useContext } from 'react';
+import { LocaleContext, langMap } from './index';
+import { useEvent } from '../use';
+import { chainSelect, isString } from '../utils';
+export function useTranslate(prefix) {
+    const { lang } = useContext(LocaleContext);
+    const translate = useEvent((chain, data) => {
+        const mergedChain = isString(chain)
+            ? prefix
+                ? prefix + '.' + chain
+                : chain
+            : prefix;
+        data = chain && typeof chain === 'object' ? chain : data;
+        const result = chainSelect(langMap[lang], mergedChain);
+        if (isString(result)) {
+            if (data) {
+                return result.replace(/\${([^}]*)}/g, (_, p1) => {
+                    return data[p1];
+                });
+            }
+            return result;
+        }
+        return mergedChain;
+    });
+    const select = useEvent((chain) => {
+        const mergedChain = isString(chain)
+            ? prefix
+                ? prefix + '.' + chain
+                : chain
+            : prefix;
+        const result = chainSelect(langMap[lang], mergedChain);
+        return result;
+    });
+    return {
+        t: translate,
+        translate,
+        select,
+        lang,
+    };
+}
+export default useTranslate;

package/dist/mask/index.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { BaseProps } from '../base';
+import { TransitionTimeout } from '../transition';
+export interface MaskProps extends BaseProps {
+    visible?: boolean;
+    zIndex?: number;
+    timeout?: TransitionTimeout;
+    transparent?: boolean;
+    onClick?: (event: ITouchEvent) => void;
+}
+export declare const Mask: FC<MaskProps>;
+export default Mask;

package/dist/mask/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem, useEvent } from '../use';
+import { CSSTransition } from '../transition/CSSTransition';
+import { filterNullish } from '../utils';
+export const Mask = (props) => {
+    const { className, style, visible, zIndex, timeout, transparent, onClick, ...restProps } = props;
+    const [bem] = useBem('mask');
+    const [realVisible, setRealVisible] = useState(visible);
+    const handleEnter = useEvent(() => {
+        setRealVisible(true);
+    });
+    const handleExited = useEvent(() => {
+        setRealVisible(false);
+    });
+    return (_jsx(CSSTransition, { in: visible, appear: true, timeout: timeout, effect: "fade", onEnter: handleEnter, onExited: handleExited, ...restProps, className: classNames(bem.b(), bem.m('transparent', transparent), className), style: {
+            ...style,
+            ...filterNullish({
+                zIndex,
+            }),
+            display: realVisible ? 'flex' : 'none',
+        }, catchMove: true, children: _jsx(View, { onClick: onClick, style: { width: '100%', height: '100%' } }) }));
+};
+export default Mask;

package/dist/mask/index.scss

@@ -0,0 +1,24 @@
+@import '../style/base.scss';
+// #variables
+$sar-mask-bg-color: $sar-mask !default;
+// #endvariables
+
+@include bem(mask) {
+  @include b() {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: none;
+    background-color: $sar-mask-bg-color;
+    pointer-events: auto;
+    @include ifweb {
+      touch-action: none;
+    }
+
+    @include m(transparent) {
+      background-color: transparent;
+    }
+  }
+}

package/dist/menu/Item.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+import { BaseProps } from '../base';
+import { IconProps } from '../icon';
+export interface MenuItemProps extends BaseProps {
+    text?: ReactNode;
+    disabled?: boolean;
+    iconProps?: IconProps;
+    direction?: 'vertical' | 'horizontal';
+    theme?: 'dark' | 'light';
+    index?: number;
+    count?: number;
+    onClick?: () => void;
+}
+export declare const MenuItem: FC<MenuItemProps>;
+export default MenuItem;

package/dist/menu/Item.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import Icon from '../icon';
+import Halfline from '../halfline';
+import Pressable from '../pressable';
+export const MenuItem = (props) => {
+    const { className, style, text, disabled, iconProps, direction, theme, onClick, index, count, ...restProps } = props;
+    const [bem] = useBem('menu');
+    return (_jsx(Pressable, { disabled: disabled, children: ({ pressed }) => (_createElement(View, { ...restProps, className: classNames(bem.e('item'), bem.em('item', direction), bem.em('item', `${direction}-first`, index === 0), bem.em('item', `${direction}-last`, index === count - 1), bem.em('item', `${theme}-active`, pressed), bem.em('item', `${theme}-${direction}-later`, index > 0), bem.em('item', 'disabled', disabled), className), style: style, key: index, onClick: onClick },
+            index > 0 && direction === 'horizontal' && (_jsx(Halfline, { direction: "left", className: bem.em('divider', theme) })),
+            iconProps && (_jsx(Icon, { ...iconProps, className: classNames(bem.e('icon'), bem.em('icon', direction), bem.em('icon', theme)) })),
+            _jsxs(View, { className: classNames(bem.e('text'), bem.em('text', `${theme}-${direction}-later`, index > 0), bem.em('text', theme), bem.em('text', 'has-icon', !!iconProps)), children: [index > 0 && direction === 'vertical' && (_jsx(Halfline, { direction: "top", className: bem.em('divider', theme) })), text] }))) }));
+};
+export default MenuItem;

package/dist/menu/index.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { BaseProps } from '../base';
+import { IconProps } from '../icon';
+export interface MenuOption {
+    text?: ReactNode;
+    disabled?: boolean;
+    iconProps?: IconProps;
+    [key: PropertyKey]: any;
+}
+export interface MenuProps extends Omit<BaseProps, 'children'> {
+    options?: MenuOption[];
+    direction?: 'vertical' | 'horizontal';
+    theme?: 'dark' | 'light';
+    onSelect?: (option: MenuOption) => void;
+}
+export declare const Menu: FC<MenuProps>;
+export default Menu;

package/dist/menu/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import MenuItem from './Item';
+const defaultOptions = [];
+export const Menu = (props) => {
+    const { className, style, options = defaultOptions, direction, theme, onSelect, ...restProps } = props;
+    const [bem] = useBem('menu');
+    return (_jsx(View, { ...restProps, className: classNames(bem.b(), bem.m(direction), className), style: style, children: options.map((option, index) => {
+            return (_createElement(MenuItem, { ...option, key: index, index: index, direction: direction, count: options.length, theme: theme, onClick: () => !option.disabled && onSelect?.(option) }));
+        }) }));
+};
+export default Menu;

package/dist/menu/index.scss

@@ -0,0 +1,128 @@
+@import '../style/base.scss';
+// #variables
+$sar-menu-item-border-radius: $sar-rounded !default;
+$sar-menu-item-height: 44px !default;
+$sar-menu-item-padding-x: 16px !default;
+$sar-menu-item-font-size: $sar-text-base !default;
+$sar-menu-item-active-bg-color: $sar-active-bg-color !default;
+
+$sar-menu-item-dark-active-bg-color: $sar-gray-900 !default;
+$sar-menu-item-dark-color: $sar-white !default;
+$sar-menu-dark-border-color: $sar-dark-border-color !default;
+
+$sar-menu-item-horizontal-height: 34px !default;
+
+$sar-menu-icon-margin-right: 12px !default;
+$sar-menu-icon-horizontal-margin-right: 8px !default;
+// #endvariables
+
+@include bem(menu) {
+  @include b() {
+    @include universal;
+
+    @include m(vertical) {
+      flex-direction: column;
+    }
+
+    @include m(horizontal) {
+      flex-direction: row;
+    }
+  }
+
+  @include e(item) {
+    @include universal;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: $sar-menu-item-height;
+    padding-left: $sar-menu-item-padding-x;
+    padding-right: $sar-menu-item-padding-x;
+    font-size: $sar-menu-item-font-size;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(vertical-first) {
+      border-top-left-radius: $sar-menu-item-border-radius;
+      border-top-right-radius: $sar-menu-item-border-radius;
+    }
+
+    @include m(vertical-last) {
+      border-bottom-left-radius: $sar-menu-item-border-radius;
+      border-bottom-right-radius: $sar-menu-item-border-radius;
+    }
+
+    @include m(horizontal-first) {
+      border-top-left-radius: $sar-menu-item-border-radius;
+      border-bottom-left-radius: $sar-menu-item-border-radius;
+    }
+
+    @include m(horizontal-last) {
+      border-top-right-radius: $sar-menu-item-border-radius;
+      border-bottom-right-radius: $sar-menu-item-border-radius;
+    }
+
+    @include m(disabled) {
+      @include disabled;
+    }
+
+    @include m(light-active) {
+      background-color: $sar-menu-item-active-bg-color;
+    }
+
+    @include m(dark-active) {
+      background-color: $sar-menu-item-dark-active-bg-color;
+    }
+
+    @include m(horizontal) {
+      height: $sar-menu-item-horizontal-height;
+    }
+  }
+
+  @include e(divider) {
+    @include m(dark) {
+      background-color: $sar-menu-dark-border-color;
+    }
+  }
+
+  @include e(icon) {
+    @include universal;
+    margin-right: $sar-menu-icon-margin-right;
+
+    @include m(horizontal) {
+      margin-right: $sar-menu-icon-horizontal-margin-right;
+    }
+
+    @include m(dark) {
+      color: $sar-menu-item-dark-color;
+    }
+  }
+
+  @include e(text) {
+    @include universal;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    flex-grow: 1;
+
+    @include m(has-icon) {
+      justify-content: flex-start;
+    }
+
+    @include m(dark) {
+      color: $sar-menu-item-dark-color;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(menu) {
+    @include e(item) {
+      @include m(light-active) {
+        background-color: $sar-menu-item-dark-active-bg-color;
+      }
+    }
+  }
+}

package/dist/mesh/Item.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { IconProps } from '../icon';
+import { BaseProps } from '../base';
+import { MeshCommonProps } from './type';
+export interface MeshItemProps extends BaseProps, MeshCommonProps {
+    text?: ReactNode;
+    iconProps?: IconProps;
+    onClick?: (event: ITouchEvent) => void;
+    wrapperStyle?: CSSProperties;
+    wrapperClass?: string;
+    _isBottom?: boolean;
+    _isRight?: boolean;
+}
+export declare const MeshItem: FC<MeshItemProps>;
+export default MeshItem;

package/dist/mesh/Item.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import Icon from '../icon';
+import { useBem } from '../use';
+import Halfline from '../halfline';
+import Pressable from '../pressable';
+export const MeshItem = (props) => {
+    const { children, className, style, text, iconProps, onClick, wrapperStyle, wrapperClass, _isRight, _isBottom, gap = 0, border, square, center, clickable, direction = 'vertical', reverse, ...restProps } = props;
+    const [bem] = useBem('mesh');
+    const renderContent = () => {
+        return (_jsx(View, { className: classNames(bem.e('item-content'), bem.m('center', center), bem.em('item-content', 'square', square), bem.m(direction, !reverse), bem.m(`${direction}-reverse`, reverse), wrapperClass), style: wrapperStyle, children: children ?? (_jsxs(_Fragment, { children: [iconProps && (_jsx(View, { className: bem.e('item-icon'), children: _jsx(Icon, { size: 24, ...iconProps }) })), text && (_jsx(View, { className: classNames(bem.e('item-text'), bem.em('item-text', direction, iconProps && !reverse), bem.em('item-text', `${direction}-reverse`, iconProps && reverse)), children: text }))] })) }));
+    };
+    return (_jsx(Pressable, { disabled: !clickable, children: ({ pressed }) => (_jsxs(View, { ...restProps, className: classNames(bem.e('item'), bem.m('pressed', pressed), bem.m('clickable', clickable), className), style: style, onClick: onClick, children: [square ? (_jsx(View, { className: classNames(bem.e('item-wrapper')), children: renderContent() })) : (renderContent()), border && !gap && !_isRight && _jsx(Halfline, { direction: "right" }), border && !gap && !_isBottom && _jsx(Halfline, { direction: "bottom" }), border && !!gap && _jsx(Halfline, {})] })) }));
+};
+export default MeshItem;

package/dist/mesh/index.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+import { MeshCommonProps } from './type';
+import { MeshItem } from './Item';
+export interface Mesh extends BaseProps, MeshCommonProps {
+    columns?: number;
+    outline?: boolean;
+    outlineVertical?: boolean;
+}
+export interface MeshFC extends FC<Mesh> {
+    Item: typeof MeshItem;
+}
+export declare const Mesh: MeshFC;
+export default Mesh;