sard 1.0.0-canary.0

package/dist/calendar/index.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, View } from '@tarojs/components';
+import { useBem, useControllableValue, useEvent } from '../use';
+import { formatDate, getDaysInMonth, getWeekOnFirstDay, toDateNumber, minmaxDate, getPrevMonthDate, getNextMonthDate, getOffsetDaysFromFirstDay, getPadStartDays, getPadEndDays, toMonthNumber, } from '../utils';
+import Halfline from '../halfline';
+import Popout from '../popout';
+import MonthPicker from './MonthPicker';
+import Toolbar from './Toolbar';
+import Weeks from './Weeks';
+import Day from './Day';
+const getMinDate = () => {
+    return new Date(new Date().getFullYear() - 10, 0, 1);
+};
+const getMaxDate = () => {
+    return new Date(new Date().getFullYear() + 10, 11, 31);
+};
+const sortDates = (dates) => {
+    return dates.sort((a, b) => a.getTime() - b.getTime());
+};
+const defaultFormatTemplate = 'YYYY-MM-DD';
+function defaultOutletFormatter(type, value, formatTemplate = defaultFormatTemplate) {
+    switch (type) {
+        case 'single':
+            if (value instanceof Date) {
+                return formatDate(value, formatTemplate);
+            }
+            break;
+        case 'range':
+            if (Array.isArray(value)) {
+                return value.map((date) => formatDate(date, formatTemplate)).join(' - ');
+            }
+            break;
+        case 'multiple':
+            if (Array.isArray(value)) {
+                return value.map((date) => formatDate(date, formatTemplate)).join(', ');
+            }
+    }
+    return '';
+}
+function outletFormatter(props, value) {
+    const formatter = props.outletFormatter ?? Calendar.defaultOutletFormatter;
+    return formatter(props.type || 'single', value, props.formatTemplate);
+}
+export const Calendar = (props) => {
+    const { className, style, type = 'single', value, defaultValue, onChange, min, max, defaultCurrentDate, disabledDate, maxDays = Number.MAX_SAFE_INTEGER, overMaxDays, weekStartsOn = 0, formatter, allowSameDay, withPopout, popoutProps, outletFormatter, formatTemplate, ...restProps } = props;
+    void outletFormatter;
+    void formatTemplate;
+    const [bem] = useBem('calendar');
+    const minDate = useMemo(() => {
+        return min || getMinDate();
+    }, [min]);
+    const maxDate = useMemo(() => {
+        const maxDate = max || getMaxDate();
+        return maxDate.getTime() < minDate.getTime() ? new Date(minDate) : maxDate;
+    }, [max]);
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+        initialValue: () => (type === 'single' ? null : []),
+    });
+    const [currentDate, setCurrentDate] = useState(() => {
+        return minmaxDate(defaultCurrentDate || new Date(), minDate, maxDate);
+    });
+    useEffect(() => {
+        const onlyOneDate = Array.isArray(innerValue)
+            ? innerValue.length === 1
+                ? innerValue[0]
+                : null
+            : innerValue;
+        if (onlyOneDate &&
+            toMonthNumber(onlyOneDate) !== toMonthNumber(currentDate)) {
+            setCurrentDate(onlyOneDate);
+        }
+    }, [innerValue]);
+    const [startDate, setStartDate] = useState(() => {
+        return type === 'range' &&
+            Array.isArray(innerValue) &&
+            innerValue.length === 1
+            ? innerValue[0]
+            : null;
+    });
+    const handleDayClick = useEvent((date) => {
+        let val = null;
+        if (type === 'single') {
+            val = date;
+        }
+        else if (type === 'multiple') {
+            if (Array.isArray(innerValue)) {
+                if (innerValue.some((d) => toDateNumber(d) === toDateNumber(date))) {
+                    val = innerValue.filter((d) => toDateNumber(d) !== toDateNumber(date));
+                }
+                else {
+                    if (innerValue.length >= maxDays) {
+                        overMaxDays?.();
+                        return;
+                    }
+                    val = sortDates(innerValue.concat(date));
+                }
+            }
+        }
+        else if (type === 'range') {
+            if (startDate) {
+                const startDays = toDateNumber(startDate);
+                const endDays = toDateNumber(date);
+                if (!allowSameDay && startDays === endDays) {
+                    return;
+                }
+                const startAgain = endDays < startDays;
+                if (startAgain) {
+                    setStartDate(date);
+                    return;
+                }
+                let endDate = date;
+                if (endDays - startDays + 1 > maxDays) {
+                    overMaxDays?.();
+                    endDate = new Date(startDate);
+                    endDate.setDate(endDate.getDate() + (maxDays - 1));
+                }
+                val = [startDate, endDate];
+            }
+            else {
+                val = [];
+            }
+            setStartDate(startDate ? null : date);
+        }
+        setInnerValue(val);
+    });
+    // picker >>>
+    const pickerRef = useRef(null);
+    const handlePickerConfirm = useEvent((date) => {
+        if (toMonthNumber(currentDate) !== toMonthNumber(date)) {
+            setCurrentDate(date);
+        }
+    });
+    // <<< picker
+    // toolbar >>>
+    const handleCurrentMonthClick = useEvent(() => {
+        pickerRef.current?.setVisible(true);
+        pickerRef.current?.setValue(currentDate);
+    });
+    const handlePrevMonthClick = useEvent(() => {
+        setCurrentDate(getPrevMonthDate(currentDate));
+    });
+    const handleNextMonthClick = useEvent(() => {
+        setCurrentDate(getNextMonthDate(currentDate));
+    });
+    // <<< toolbar
+    const renderMonth = (currentDates, year, month) => {
+        const days = getDaysInMonth(year, month);
+        const offsetDays = getOffsetDaysFromFirstDay(getWeekOnFirstDay(year, month), weekStartsOn);
+        const currentDays = Array(days)
+            .fill(0)
+            .map((_, i) => new Date(year, month, i + 1));
+        const padStartDays = getPadStartDays(year, month, offsetDays);
+        const padEndDays = getPadEndDays(year, month, 42 - offsetDays - days);
+        const allDays = [...padStartDays, ...currentDays, ...padEndDays];
+        function withinMonth(i) {
+            return i >= offsetDays && i < offsetDays + days;
+        }
+        return (_jsxs(View, { className: bem.e('month'), children: [allDays.map((date, i) => (_jsx(Day, { type: type, date: date, minDate: minDate, maxDate: maxDate, currentDates: currentDates, formatter: formatter, disabledDate: disabledDate, within: withinMonth(i), onClick: handleDayClick }, i))), _jsx(View, { className: bem.e('mark'), children: month + 1 })] }, year * 100 + month));
+    };
+    const currentDates = useMemo(() => {
+        let dates;
+        if (type === 'range' && startDate) {
+            dates = [startDate];
+        }
+        else {
+            if (Array.isArray(innerValue)) {
+                dates = innerValue;
+            }
+            else if (innerValue) {
+                dates = [innerValue];
+            }
+            else {
+                dates = [];
+            }
+        }
+        return dates;
+    }, [innerValue, startDate, type]);
+    const renderElement = () => {
+        return (_jsxs(CustomWrapper, { children: [_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: style, catchMove: true, children: [_jsxs(View, { className: bem.e('header'), children: [_jsx(Toolbar, { currentDate: currentDate, minDate: minDate, maxDate: maxDate, onPrevClick: handlePrevMonthClick, onNextClick: handleNextMonthClick, onMonthClick: handleCurrentMonthClick }), _jsx(Weeks, { weekStartsOn: weekStartsOn }), _jsx(Halfline, { direction: "bottom" })] }), _jsx(View, { className: bem.e('body'), children: renderMonth(currentDates, currentDate.getFullYear(), currentDate.getMonth()) })] }), _jsx(MonthPicker, { ref: pickerRef, minDate: minDate, maxDate: maxDate, defaultValue: currentDate, onConfirm: handlePickerConfirm })] }));
+    };
+    if (withPopout) {
+        return _jsx(Popout, { ...popoutProps, children: renderElement() });
+    }
+    return renderElement();
+};
+Calendar.outletFormatter = outletFormatter;
+Calendar.defaultOutletFormatter = defaultOutletFormatter;
+export default Calendar;

package/dist/calendar/index.scss

@@ -0,0 +1,210 @@
+@use 'sass:math';
+@import '../style/base.scss';
+// #variables
+$sar-calendar-header-margin-bottom: 4px !default;
+$sar-calendar-current-month-font-size: $sar-text-lg !default;
+
+$sar-calendar-week-item-height: 32px !default;
+$sar-calendar-week-item-font-size: $sar-text-base !default;
+
+$sar-calendar-month-body-row-gap: 4px !default;
+
+$sar-calendar-day-height: 48px !default;
+$sar-calendar-day-font-size: $sar-text-base !default;
+$sar-calendar-day-selected-border-radius: $sar-rounded !default;
+$sar-calendar-day-selected-color: $sar-white !default;
+$sar-calendar-day-selected-bg-color: $sar-primary !default;
+$sar-calendar-day-middle-color: $sar-primary !default;
+$sar-calendar-day-middle-bg-color: rgba($sar-blue-100, 0.5) !default;
+$sar-calendar-day-disabled-color: $sar-disabled-color !default;
+
+$sar-calendar-info-font-size: $sar-text-xs !default;
+$sar-calendar-info-line-height: $sar-calendar-info-font-size *
+  $sar-leading-tight !default;
+$sar-calendar-top-gap: 2px !default;
+$sar-calendar-bottom-gap: 2px !default;
+
+$sar-calendar-mark-font-size: 160px !default;
+$sar-calendar-mark-color: $sar-deemphasis-color !default;
+$sar-calendar-mark-opacity: 0.2 !default;
+
+// 暗黑模式
+$sar-calendar-day-middle-dark-bg-color: rgba($sar-blue-100, 0.05) !default;
+$sar-calendar-day-disabled-dark-color: $sar-dark-disabled-color !default;
+$sar-calendar-mark-dark-color: $sar-dark-deemphasis-color !default;
+// #endvariables
+
+@include bem(calendar) {
+  @include b() {
+    @include universal;
+    @include ifweb {
+      touch-action: none;
+    }
+  }
+
+  @include e(header) {
+    @include universal;
+    z-index: 1;
+    flex: none;
+    margin-bottom: $sar-calendar-header-margin-bottom;
+  }
+
+  @include e(toolbar) {
+    @include universal;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include e(current-month) {
+    @include universal;
+    font-size: $sar-calendar-current-month-font-size;
+  }
+
+  @include e(week) {
+    @include universal;
+    flex-direction: row;
+  }
+
+  @include e(week-item) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    height: $sar-calendar-week-item-height;
+    font-size: $sar-calendar-week-item-font-size;
+  }
+
+  @include e(body) {
+    @include universal;
+    z-index: 0;
+    flex: none;
+  }
+
+  @include e(month) {
+    @include universal;
+    flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: $sar-calendar-month-body-row-gap;
+    column-gap: 0;
+  }
+
+  @include e(day-wrapper) {
+    @include universal;
+    z-index: 1;
+    width: #{math.div(100, 7)} + '%';
+    height: $sar-calendar-day-height;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include e(day) {
+    @include universal;
+    z-index: 1;
+    width: #{math.div(100, 7)} + '%';
+    height: $sar-calendar-day-height;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border-radius: $sar-calendar-day-selected-border-radius;
+    font-size: $sar-calendar-day-font-size;
+    line-height: $sar-calendar-day-height;
+    @include ifweb {
+      transition: $sar-duration-fast;
+      cursor: pointer;
+    }
+
+    @include m(today) {
+      font-weight: $sar-font-bold;
+    }
+
+    @include m(disabled) {
+      color: $sar-calendar-day-disabled-color;
+      @include ifweb {
+        cursor: not-allowed;
+      }
+    }
+
+    @include m(selected) {
+      border-radius: $sar-calendar-day-selected-border-radius;
+      color: $sar-calendar-day-selected-color;
+      background-color: $sar-calendar-day-selected-bg-color;
+    }
+
+    @include m(prev-selected, only-end) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    @include m(next-selected, only-start) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    @include m(middle) {
+      color: $sar-calendar-day-middle-color;
+      background-color: $sar-calendar-day-middle-bg-color;
+      border-radius: 0;
+    }
+  }
+
+  @include e(top, bottom) {
+    @include universal;
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    justify-content: center;
+    align-items: center;
+    font-size: $sar-calendar-info-font-size;
+    line-height: $sar-calendar-info-line-height;
+
+    @include m(selected) {
+      color: $sar-calendar-day-selected-color;
+    }
+  }
+
+  @include e(top) {
+    top: $sar-calendar-top-gap;
+  }
+
+  @include e(bottom) {
+    bottom: $sar-calendar-bottom-gap;
+  }
+
+  @include e(mark) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-size: $sar-calendar-mark-font-size;
+    color: $sar-calendar-mark-color;
+    opacity: $sar-calendar-mark-opacity;
+    pointer-events: none;
+  }
+}
+
+@include theme(dark) {
+  @include bem(calendar) {
+    @include e(day) {
+      @include m(middle) {
+        background-color: $sar-calendar-day-middle-dark-bg-color;
+      }
+
+      @include m(disabled) {
+        color: $sar-calendar-day-disabled-dark-color;
+      }
+    }
+
+    @include e(mark) {
+      color: $sar-calendar-mark-dark-color;
+    }
+  }
+}

package/dist/card/index.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import { BaseProps } from '../base';
+export interface CardProps extends BaseProps {
+    title?: ReactNode;
+    extra?: ReactNode;
+    footer?: ReactNode;
+    headerStyle?: CSSProperties;
+    headerClass?: string;
+    bodyStyle?: CSSProperties;
+    bodyClass?: string;
+    footerStyle?: CSSProperties;
+    footerClass?: string;
+}
+export declare const Card: FC<CardProps>;
+export default Card;

package/dist/card/index.js

@@ -0,0 +1,14 @@
+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 { isNullish } from '../utils';
+import Halfline from '../halfline';
+export const Card = (props) => {
+    const { className, style, children, title, extra, footer, headerStyle, headerClass, bodyStyle, bodyClass, footerStyle, footerClass, ...restProps } = props;
+    const [bem] = useBem('card');
+    const headless = isNullish(title) && isNullish(extra);
+    const footless = isNullish(footer);
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: style, children: [!headless && (_jsxs(View, { className: classNames(bem.e('header'), headerClass), style: headerStyle, children: [_jsx(View, { className: classNames(bem.e('title')), children: title }), _jsx(View, { className: classNames(bem.e('extra')), children: extra }), _jsx(Halfline, { direction: "bottom" })] })), _jsx(View, { className: classNames(bem.e('body'), bem.em('body', 'headless', headless), bem.em('body', 'footless', footless), bodyClass), style: bodyStyle, children: children }), !footless && (_jsxs(View, { className: classNames(bem.e('footer'), footerClass), style: footerStyle, children: [_jsx(Halfline, { direction: "top" }), footer] }))] }));
+};
+export default Card;

package/dist/card/index.scss

@@ -0,0 +1,64 @@
+@import '../style/base.scss';
+// #variables
+$sar-card-border-radius: $sar-rounded-lg !default;
+$sar-card-bg-color: $sar-emphasis-bg-color !default;
+
+$sar-card-header-padding-y: 10px !default;
+$sar-card-header-padding-x: 16px !default;
+
+$sar-card-title-font-size: $sar-text-lg !default;
+$sar-card-title-line-height: $sar-card-title-font-size * $sar-leading-normal !default;
+
+$sar-card-body-padding-y: 10px !default;
+$sar-card-body-padding-x: 16px !default;
+
+$sar-card-footer-padding-y: 10px !default;
+$sar-card-footer-padding-x: 16px !default;
+
+// 暗黑模式
+$sar-card-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+// #endvariables
+
+@include bem(card) {
+  @include b() {
+    @include universal;
+    background-color: $sar-card-bg-color;
+    border-radius: $sar-card-border-radius;
+  }
+
+  @include e(header) {
+    @include universal;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: $sar-card-header-padding-y $sar-card-header-padding-x;
+  }
+
+  @include e(title) {
+    @include universal;
+    font-size: $sar-card-title-font-size;
+    line-height: $sar-card-title-line-height;
+  }
+
+  @include e(extra) {
+    @include universal;
+  }
+
+  @include e(body) {
+    @include universal;
+    padding: $sar-card-body-padding-y $sar-card-body-padding-x;
+  }
+
+  @include e(footer) {
+    @include universal;
+    padding: $sar-card-footer-padding-y $sar-card-footer-padding-x;
+  }
+}
+
+@include theme(dark) {
+  @include bem(card) {
+    @include b() {
+      background-color: $sar-card-dark-bg-color;
+    }
+  }
+}

package/dist/cascader/index.d.ts

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react';
+import { BaseProps } from '../base';
+import { PopoutProps } from '../popout';
+export interface CascaderFieldNames {
+    label?: string;
+    value?: string;
+    disabled?: string;
+    children?: string;
+}
+export interface CascaderOption {
+    label?: string;
+    value?: string | number;
+    disabled?: boolean;
+    children?: CascaderOption[];
+    [key: PropertyKey]: any;
+}
+export interface CascaderTab {
+    options: CascaderOption[];
+    selected: CascaderOption | null;
+}
+export interface CascaderProps<T = CascaderOption> extends Omit<BaseProps, 'children'> {
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number, selectedOptions: T[]) => void;
+    options?: T[];
+    fieldNames?: CascaderFieldNames;
+    placeholder?: string;
+    onSelect?: (option: T, tabIndex: number) => void;
+    labelRender?: (option: T, selected: boolean | null) => ReactNode;
+    optionTop?: ReactNode | ((tabIndex: number) => ReactNode);
+    optionBottom?: ReactNode | ((tabIndex: number) => ReactNode);
+    withPopout?: boolean;
+    popoutProps?: PopoutProps;
+    outletFormatter?: (labels: string[]) => string;
+}
+declare function defaultOutletFormatter(labels: string[]): string;
+declare function outletFormatter(props: CascaderProps, value: string | number): string;
+export interface CascaderFC extends FC<CascaderProps> {
+    outletFormatter: typeof outletFormatter;
+    defaultOutletFormatter: typeof defaultOutletFormatter;
+}
+export declare const Cascader: CascaderFC;
+export default Cascader;