sard 1.0.0-canary.0

package/dist/button/index.scss

@@ -0,0 +1,346 @@
+@import '../style/base.scss';
+// #variables
+$sar-button-sizes: (
+  mini: (
+    height: 24px,
+    padding-x: 8px,
+    border-radius: $sar-rounded-sm,
+    font-size: $sar-text-sm,
+    gap: 4px,
+  ),
+  small: (
+    height: 32px,
+    padding-x: 12px,
+    border-radius: $sar-rounded-sm,
+    font-size: $sar-text-sm,
+    gap: 4px,
+  ),
+  medium: (
+    height: 40px,
+    padding-x: 16px,
+    border-radius: $sar-rounded,
+    font-size: $sar-text-base,
+    gap: 8px,
+  ),
+  large: (
+    height: 48px,
+    padding-x: 20px,
+    border-radius: $sar-rounded-lg,
+    font-size: $sar-text-lg,
+    gap: 8px,
+  ),
+);
+
+$sar-button-transition-duration: 0 !default;
+
+$sar-button-active-opacity: $sar-active-opacity !default;
+$sar-button-default-active-bg-color: rgba(0, 0, 0, 0.25) !default;
+$sar-button-active-bg-color: rgba(0, 0, 0, 0.125) !default;
+$sar-button-mild-bg-color: $sar-gray-200 !default;
+$sar-button-pale-bg-opacity: 0.25 !default;
+$sar-button-text-active-bg-color: $sar-gray-200 !default;
+
+$sar-button-loading-opacity: $sar-loading-opacity !default;
+
+$sar-button-loading-gap: 4px !default;
+
+// 暗黑模式
+$sar-button-secondary-dark-color: $sar-gray-400 !default;
+// #endvariables
+
+@mixin button-size($height, $padding-x, $border-radius, $font-size, $gap) {
+  height: $height;
+  min-width: $height;
+  padding-right: $padding-x;
+  padding-left: $padding-x;
+  border-radius: $border-radius;
+  font-size: $font-size;
+}
+
+@mixin button-set-theme {
+  @include ifrn {
+    @content;
+  }
+
+  @include ifweb {
+    // 浏览器端覆盖默认active样式
+    &,
+    &:not([disabled]):not(.sar-button_disabled):active {
+      @content;
+    }
+  }
+}
+
+@include bem(button) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    margin: 0;
+    flex: none;
+    overflow: hidden;
+    border-width: 0;
+    text-align: center;
+    @include ifweb {
+      transition: $sar-button-transition-duration;
+      cursor: pointer;
+    }
+
+    // 尺寸
+    @each $size, $value in $sar-button-sizes {
+      @include m($size) {
+        @include button-size($value...);
+      }
+    }
+
+    // 圆形按钮
+    @include m(round) {
+      border-radius: $sar-rounded-full;
+    }
+
+    // 按压状态
+    @include m(pressed) {
+      opacity: $sar-button-active-opacity;
+    }
+
+    // 禁用状态
+    @include m(disabled) {
+      @include ifweb {
+        cursor: not-allowed;
+      }
+    }
+
+    // 加载状态
+    @include m(loading) {
+      opacity: $sar-button-loading-opacity;
+      @include ifweb {
+        cursor: not-allowed;
+      }
+    }
+
+    // 图标按钮
+    @include m(is-icon) {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  @include e(content) {
+    @include universal;
+    z-index: 2;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    @each $size, $value in $sar-button-sizes {
+      @include m($size) {
+        font-size: map-get($value, font-size);
+      }
+    }
+
+    // 尺寸
+    @each $size, $value in $sar-button-sizes {
+      @include m(gap-#{$size}) {
+        margin-left: map-get($value, gap);
+      }
+    }
+  }
+
+  @include e(loading-wrapper) {
+    @include universal;
+  }
+
+  // border
+  &::after {
+    display: none;
+  }
+  @include e(halfline-wrapper) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    pointer-events: none;
+  }
+
+  @include e(halfline) {
+    @include ifweb {
+      transition: $sar-button-transition-duration;
+    }
+
+    @each $size, $value in $sar-button-sizes {
+      @include m($size) {
+        border-radius: map-get($value, border-radius);
+      }
+    }
+
+    @include m(round) {
+      border-radius: $sar-rounded-full;
+    }
+  }
+
+  @include e(shade) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 4;
+    opacity: 0;
+    background-color: $sar-button-active-bg-color;
+    @include ifweb {
+      border-radius: inherit;
+      transition: $sar-button-transition-duration;
+    }
+    pointer-events: none;
+
+    @include m(default) {
+      background-color: $sar-button-default-active-bg-color;
+    }
+
+    @include m(pressed) {
+      opacity: 1;
+    }
+  }
+
+  // # 主题色
+  @each $theme, $value in $sar-theme-colors {
+    $color: nth($value, 1);
+    $color-pale: nth($value, 2);
+    $color-saturated: nth($value, 3);
+
+    // ## 默认类型
+    @include m(default-#{$theme}) {
+      @include button-set-theme {
+        background-color: $color;
+      }
+    }
+
+    @include em(content, default-#{$theme}) {
+      color: $sar-white;
+    }
+
+    @include em(loading, default-#{$theme}) {
+      color: $sar-white;
+    }
+
+    // ## 淡颜色类型
+    @include m(pale-#{$theme}) {
+      @include button-set-theme {
+        background-color: rgba($color-pale, $sar-button-pale-bg-opacity);
+      }
+    }
+
+    @include em(content, pale-#{$theme}) {
+      color: $color-saturated;
+    }
+
+    @include em(loading, pale-#{$theme}) {
+      color: $color-saturated;
+    }
+
+    // ## 温和类型
+    @include m(mild-#{$theme}) {
+      @include button-set-theme {
+        background-color: $sar-button-mild-bg-color;
+      }
+    }
+
+    @include em(content, mild-#{$theme}) {
+      color: $color-saturated;
+    }
+
+    @include em(loading, mild-#{$theme}) {
+      color: $color-saturated;
+    }
+
+    // ## 轮廓类型
+    @include m(outline-#{$theme}) {
+      @include button-set-theme {
+        color: $color-saturated;
+        background-color: transparent;
+      }
+    }
+
+    @include em(content, outline-#{$theme}) {
+      color: $color-saturated;
+    }
+
+    @include em(loading, outline-#{$theme}) {
+      color: $color-saturated;
+    }
+
+    @include em(halfline, $theme) {
+      border-color: $color-saturated;
+    }
+
+    // ## 文本类型
+    @include m(text-#{$theme}) {
+      @include button-set-theme {
+        background-color: transparent;
+      }
+    }
+
+    @include em(content, text-#{$theme}) {
+      color: $color-saturated;
+    }
+
+    @include em(loading, text-#{$theme}) {
+      color: $color-saturated;
+    }
+
+    // ## 淡文本类型
+    @include m(pale-text-#{$theme}) {
+      @include button-set-theme {
+        background-color: transparent;
+      }
+    }
+
+    @include em(content, pale-text-#{$theme}) {
+      color: $color-saturated;
+    }
+
+    @include em(loading, pale-text-#{$theme}) {
+      color: $color-saturated;
+    }
+  }
+
+  // # 禁用
+  @include m(default-disabled, pale-disabled, mild-disabled) {
+    background-color: $sar-disabled-deep-bg-color;
+  }
+
+  @include m(outline-disabled) {
+    background-color: $sar-disabled-shallow-bg-color;
+  }
+
+  @include e(halfline) {
+    @include m(disabled) {
+      border-color: $sar-disabled-deep-bg-color;
+    }
+  }
+
+  @include e(content) {
+    @include m(default-disabled, pale-disabled, mild-disabled) {
+      color: $sar-white;
+    }
+    @include m(outline-disabled, text-disabled, pale-text-disabled) {
+      color: $sar-disabled-color;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(button) {
+    @include e(content, loading) {
+      @include m(text-secondary, pale-text-secondary) {
+        color: $sar-button-secondary-dark-color;
+      }
+    }
+  }
+}

package/dist/calendar/Day.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface CalendarDay {
+    date: Date;
+    type: 'same' | 'start' | 'middle' | 'end' | 'disabled' | 'selected' | 'normal';
+    top: ReactNode;
+    text: ReactNode;
+    bottom: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface DayProps {
+    type: 'single' | 'multiple' | 'range';
+    date: Date;
+    minDate: Date;
+    maxDate: Date;
+    currentDates: Date[];
+    formatter?: (day: CalendarDay) => void;
+    disabledDate?: (date: Date) => boolean;
+    within: boolean;
+    onClick: (date: Date) => void;
+}
+export declare const Day: (props: DayProps) => import("react/jsx-runtime").JSX.Element;
+export default Day;

package/dist/calendar/Day.js

@@ -0,0 +1,70 @@
+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 { toDateNumber } from '../utils';
+import useTranslate from '../locale/useTranslate';
+const todayDays = toDateNumber(new Date());
+export const Day = (props) => {
+    const { t } = useTranslate('calendar');
+    const { type, date, minDate, maxDate, currentDates, formatter, disabledDate, within, onClick, } = props;
+    const [bem] = useBem('calendar');
+    const dateNumber = toDateNumber(date);
+    if (!within) {
+        return (_jsx(View, { className: classNames(bem.e('day'), bem.em('day', 'disabled')), children: date.getDate() }, dateNumber));
+    }
+    const selected = currentDates.some((d) => toDateNumber(d) === dateNumber);
+    const prevDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);
+    const prevSelected = currentDates.some((d) => toDateNumber(d) === toDateNumber(prevDate));
+    const nextDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
+    const nextSelected = currentDates.some((d) => toDateNumber(d) === toDateNumber(nextDate));
+    let disabled = false;
+    {
+        if (disabledDate) {
+            disabled = disabledDate(date);
+        }
+        if (dateNumber < toDateNumber(minDate) ||
+            dateNumber > toDateNumber(maxDate)) {
+            disabled = true;
+        }
+    }
+    let isStart = false, isMiddle = false, isEnd = false;
+    if (type === 'range') {
+        isStart = currentDates[0] && toDateNumber(currentDates[0]) === dateNumber;
+        isMiddle =
+            currentDates.length === 2 &&
+                dateNumber > toDateNumber(currentDates[0]) &&
+                dateNumber < toDateNumber(currentDates[1]);
+        isEnd = currentDates[1] && toDateNumber(currentDates[1]) === dateNumber;
+    }
+    const day = {
+        date,
+        top: '',
+        text: date.getDate(),
+        bottom: isStart && isEnd
+            ? `${t('start')}/${t('end')}`
+            : isStart
+                ? t('start')
+                : isEnd
+                    ? t('end')
+                    : '',
+        type: isStart && isEnd
+            ? 'same'
+            : isStart
+                ? 'start'
+                : isMiddle
+                    ? 'middle'
+                    : isEnd
+                        ? 'end'
+                        : disabled
+                            ? 'disabled'
+                            : selected
+                                ? 'selected'
+                                : 'normal',
+    };
+    if (formatter) {
+        formatter(day);
+    }
+    return (_jsxs(View, { className: classNames(bem.e('day'), bem.em('day', 'selected', selected), bem.em('day', 'prev-selected', prevSelected), bem.em('day', 'next-selected', selected && nextSelected), bem.em('day', 'start', isStart), bem.em('day', 'only-start', isStart && !isEnd), bem.em('day', 'end', isEnd), bem.em('day', 'only-end', isEnd && !isStart), bem.em('day', 'middle', isMiddle), bem.em('day', 'disabled', disabled), bem.em('day', 'today', todayDays === dateNumber), day.className), style: day.style, onClick: () => onClick(date), children: [day.text, day.top && (_jsx(View, { className: classNames(bem.e('top'), bem.em('top', 'selected', selected)), children: day.top })), day.bottom && (_jsx(View, { className: classNames(bem.e('bottom'), bem.em('bottom', 'selected', selected)), children: day.bottom }))] }, dateNumber));
+};
+export default Day;

package/dist/calendar/MonthPicker.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface MonthPickerProps {
+    minDate: Date;
+    maxDate: Date;
+    defaultValue: Date;
+    onConfirm: (date: Date) => void;
+}
+export interface MonthPickerRef {
+    setValue: (value: Date) => void;
+    setVisible: (visible: boolean) => void;
+}
+export declare const MonthPicker: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<MonthPickerProps & import("react").RefAttributes<MonthPickerRef>>>;
+export default MonthPicker;

package/dist/calendar/MonthPicker.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo, useImperativeHandle, useState } from 'react';
+import { useEvent } from '../use';
+import Popout from '../popout';
+import DatetimePicker from '../datetime-picker';
+export const MonthPicker = memo(forwardRef((props, ref) => {
+    const { minDate, maxDate, defaultValue, onConfirm } = props;
+    const [visible, setVisible] = useState(false);
+    const [value, setValue] = useState(defaultValue);
+    const handlePickerConfirm = useEvent(() => {
+        onConfirm(value);
+    });
+    useImperativeHandle(ref, () => ({
+        setValue,
+        setVisible,
+    }), []);
+    return (_jsx(Popout, { visible: visible, onVisible: setVisible, type: "compact", onConfirm: handlePickerConfirm, children: _jsx(DatetimePicker, { type: "yM", min: minDate, max: maxDate, value: value, onChange: setValue }) }));
+}), (oldProps, newProps) => {
+    return (oldProps.minDate === newProps.minDate &&
+        oldProps.maxDate === newProps.maxDate);
+});
+export default MonthPicker;

package/dist/calendar/Toolbar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ToolbarProps {
+    currentDate: Date;
+    minDate: Date;
+    maxDate: Date;
+    onPrevClick: () => void;
+    onNextClick: () => void;
+    onMonthClick: () => void;
+}
+export declare const Toolbar: import("react").MemoExoticComponent<(props: ToolbarProps) => import("react/jsx-runtime").JSX.Element>;
+export default Toolbar;

package/dist/calendar/Toolbar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { View } from '@tarojs/components';
+import { useBem } from '../use';
+import Button from '../button';
+import Icon from '../icon';
+import useTranslate from '../locale/useTranslate';
+import { toMonthNumber } from '../utils';
+export const Toolbar = memo((props) => {
+    const { t } = useTranslate('calendar');
+    const { currentDate, minDate, maxDate, onPrevClick, onNextClick, onMonthClick, } = props;
+    const [bem] = useBem('calendar');
+    return (_jsxs(View, { className: bem.e('toolbar'), children: [_jsx(Button, { type: "pale-text", theme: "secondary", disabled: toMonthNumber(currentDate) <= toMonthNumber(minDate), onClick: onPrevClick, children: _jsx(Icon, { name: "left", size: 16 }) }), _jsx(Button, { type: "pale-text", theme: "secondary", onClick: onMonthClick, children: t('monthTitle', {
+                    year: currentDate.getFullYear(),
+                    month: String(currentDate.getMonth() + 1).padStart(2, '0'),
+                }) }), _jsx(Button, { type: "pale-text", theme: "secondary", disabled: toMonthNumber(currentDate) >= toMonthNumber(maxDate), onClick: onNextClick, children: _jsx(Icon, { name: "right", size: 16 }) })] }));
+});
+export default Toolbar;

package/dist/calendar/Weeks.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface WeeksProps {
+    weekStartsOn: number;
+}
+export declare const Weeks: import("react").MemoExoticComponent<(props: WeeksProps) => import("react/jsx-runtime").JSX.Element>;
+export default Weeks;

package/dist/calendar/Weeks.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { View } from '@tarojs/components';
+import { useBem } from '../use';
+import useTranslate from '../locale/useTranslate';
+const weeks = [0, 1, 2, 3, 4, 5, 6];
+const getWeeks = (weekStartsOn) => {
+    return weeks.slice(weekStartsOn).concat(weeks.slice(0, weekStartsOn));
+};
+export const Weeks = memo((props) => {
+    const { t } = useTranslate('calendar');
+    const { weekStartsOn = 0 } = props;
+    const [bem] = useBem('calendar');
+    return (_jsx(View, { className: bem.e('week'), children: getWeeks(weekStartsOn).map((item) => {
+            return (_jsx(View, { className: bem.e('week-item'), children: t(`weeks.${item}`) }, item));
+        }) }));
+});
+export default Weeks;

package/dist/calendar/index.d.ts

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+import { PopoutProps } from '../popout';
+import { CalendarDay } from './Day';
+export type CalendarType = 'single' | 'multiple' | 'range';
+export type { CalendarDay };
+interface CalendarBaseProps extends Omit<BaseProps, 'children'> {
+    min?: Date;
+    max?: Date;
+    defaultCurrentDate?: Date;
+    disabledDate?: (date: Date) => boolean;
+    maxDays?: number;
+    overMaxDays?: () => void;
+    weekStartsOn?: number;
+    formatter?: (day: CalendarDay) => void;
+    allowSameDay?: boolean;
+    withPopout?: boolean;
+    popoutProps?: PopoutProps;
+    outletFormatter?: (type: CalendarType, value: Date | Date[] | null | undefined) => string;
+    formatTemplate?: string;
+}
+export interface CalendarSingleProps extends CalendarBaseProps {
+    type?: 'single';
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (value: Date) => void;
+}
+export interface CalendarMultipleProps extends CalendarBaseProps {
+    type?: 'multiple';
+    value?: Date[];
+    defaultValue?: Date[];
+    onChange?: (value: Date[]) => void;
+}
+export interface CalendarRangeProps extends CalendarBaseProps {
+    type?: 'range';
+    value?: Date[];
+    defaultValue?: Date[];
+    onChange?: (value: Date[]) => void;
+}
+export type CalendarProps = CalendarSingleProps | CalendarMultipleProps | CalendarRangeProps;
+export interface CalendarFC extends FC<CalendarProps> {
+    outletFormatter: typeof outletFormatter;
+    defaultOutletFormatter: typeof defaultOutletFormatter;
+}
+declare function defaultOutletFormatter(type: CalendarType, value: Date | Date[] | null | undefined, formatTemplate?: string): string;
+declare function outletFormatter(props: CalendarProps, value: Date | Date[] | null | undefined): string;
+export declare const Calendar: CalendarFC;
+export default Calendar;