one-design-next 0.0.4-alpha.100

package/dist/date-picker/style/index.css

@@ -0,0 +1,511 @@
+html {
+  --odn-dp-padding-block-end: 16px;
+  --odn-dp-padding-inline: 16px;
+  --odn-dp-border-radius: 6px;
+  --odn-dp-nav-padding-block-start: 6px;
+  --odn-dp-nav-padding-block-end: 6px;
+  --odn-dp-nav-padding-inline: 16px;
+  --odn-dp-nav-shadow: 0 -1px 0 #e6e6e6 inset;
+  --odn-dp-nav-button-size: 30px;
+  --odn-dp-month-margin-block-start: 12px;
+  --odn-dp-month-margin-block-end: 0px;
+  --odn-dp-month-margin-inline-start: 0px;
+  --odn-dp-month-margin-inline-end: 0px;
+  --odn-dp-weekday-width: 30px;
+  --odn-dp-weekday-height: 30px;
+  --odn-dp-weekday-font-size: 12px;
+  --odn-dp-weekday-font-weight: 400;
+  --odn-dp-weekday-color: var(--odn-color-black-9);
+  --odn-dp-table-row-gap: 4px;
+  --odn-dp-day-size: 30px;
+  --odn-dp-td-hover-fill-offset-y: 0px;
+  --odn-dp-td-hover-fill-offset-x: 0px;
+  --odn-dp-hover-fill-color: var(--odn-color-black-1);
+  --odn-dp-shortcuts-width: 100px;
+  --odn-dp-grid-body-padding-block-start: 16px;
+  --odn-dp-grid-body-padding-block-end: 16px;
+  --odn-dp-grid-body-padding-inline-start: 16px;
+  --odn-dp-grid-body-padding-inline-end: 16px;
+  --odn-dp-month-grid-columns: 4;
+  --odn-dp-quarter-grid-columns: 4;
+  --odn-dp-year-grid-columns: 4;
+  --odn-dp-month-grid-item-width: 44px;
+  --odn-dp-month-grid-item-height: 36px;
+  --odn-dp-quarter-grid-item-width: 44px;
+  --odn-dp-quarter-grid-item-height: 36px;
+  --odn-dp-year-grid-item-width: 44px;
+  --odn-dp-year-grid-item-height: 36px;
+  --odn-dp-grid-popup-min-width: 242px;
+}
+
+@layer components {
+  [data-odn-date-picker-popup] {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    user-select: none;
+  }
+  [data-odn-date-picker-shortcuts] {
+    flex: none;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    width: var(--odn-dp-shortcuts-width);
+    box-shadow: 1px 0 0 0 #ebebeb;
+  }
+  [data-odn-date-picker-shortcut] {
+    padding-left: 12px;
+    padding-right: 8px;
+    max-width: 100%;
+    line-height: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-odn-date-picker-shortcut-active=true] {
+    font-weight: 600;
+    color: var(--odn-color-primary);
+  }
+  [data-odn-date-picker-popup-content] {
+    flex: 1;
+  }
+  [data-odn-date-picker-caption-nav] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--odn-dp-nav-padding-block-start) var(--odn-dp-nav-padding-inline) var(--odn-dp-nav-padding-block-end);
+    box-shadow: var(--odn-dp-nav-shadow);
+  }
+  [data-odn-date-picker-caption-nav-button] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--odn-dp-nav-button-size);
+    height: var(--odn-dp-nav-button-size);
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  }
+  [data-odn-date-picker-caption-nav-icon] {
+    fill: currentcolor;
+  }
+  [data-odn-date-picker-caption-nav-button-disabled=true] {
+    color: #c7c7c7;
+    pointer-events: none;
+  }
+  [data-odn-date-picker-caption-select] {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    cursor: pointer;
+    pointer-events: initial;
+  }
+  [data-odn-date-picker-caption-select-input] {
+    position: relative;
+    z-index: 1;
+    padding-left: 11px;
+    width: 100%;
+    font-size: 13px;
+    font-weight: 600;
+    background-color: transparent;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    appearance: none;
+  }
+  [data-odn-date-picker-caption-select-input] option {
+    background-color: transparent !important;
+  }
+  [data-odn-date-picker-caption-select-input]:focus {
+    outline: none;
+  }
+  [data-odn-date-picker-caption-select-month] [data-odn-date-picker-caption-select-input] {
+    letter-spacing: -0.5px;
+  }
+  [data-odn-date-picker-caption-icon] {
+    position: absolute;
+    top: 6px;
+    right: 3px;
+    fill: #6b6b6b;
+  }
+  [data-odn-date-picker-container] {
+    position: relative;
+    display: inline-block;
+  }
+  [data-odn-date-picker-container-picker=day] {
+    width: 132px;
+  }
+  [data-odn-date-picker-container-picker=week],
+  [data-odn-date-picker-container-picker=month],
+  [data-odn-date-picker-container-picker=quarter],
+  [data-odn-date-picker-container-picker=year] {
+    width: 120px;
+  }
+  [data-odn-date-picker-container-disabled=true] [data-odn-date-picker-input] {
+    color: var(--odn-color-black-8);
+    background: var(--odn-color-black-3);
+    border: 1px solid var(--odn-color-black-6);
+    cursor: not-allowed;
+  }
+  [data-odn-date-picker-container-disabled=true] [data-odn-date-picker-icon-container] {
+    cursor: not-allowed;
+  }
+  [data-odn-date-picker-container-disabled=true] [data-odn-date-picker-icon] {
+    color: var(--odn-color-black-8);
+  }
+  [data-odn-date-picker-container-selected=true][data-odn-date-picker-container-disabled=false][data-odn-date-picker-container-allow-clear=true]:hover [data-odn-date-picker-icon-clear] {
+    opacity: 1;
+  }
+  [data-odn-date-picker-container-selected=true][data-odn-date-picker-container-disabled=false][data-odn-date-picker-container-allow-clear=true]:hover [data-odn-date-picker-icon-calendar] {
+    opacity: 0;
+  }
+  [data-odn-date-picker-container-range] {
+    width: 242px;
+  }
+  [data-odn-date-picker-input] {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    min-height: 100%;
+    max-height: 100%;
+    font-family: inherit;
+    text-align: inherit;
+    line-height: 1.5;
+    color: #1f1f1f;
+    background-color: #fff;
+    border-radius: var(--odn-dp-border-radius);
+    outline: none;
+    appearance: none;
+    transition: 0.2s cubic-bezier(0.32, 0.72, 0, 1) background-color, 0.2s cubic-bezier(0.32, 0.72, 0, 1) border-color;
+    padding: 6px 32px 6px 12px;
+    height: 36px;
+    font-size: 14px;
+    border: 1px solid var(--odn-color-black-6);
+  }
+  [data-odn-date-picker-input-format] {
+    cursor: pointer;
+  }
+  [data-odn-date-picker-input]:not([data-odn-date-picker-input-disabled=true]):hover {
+    border: 1px solid var(--odn-color-black-7);
+  }
+  [data-odn-date-picker-input]:not([data-odn-date-picker-input-disabled=true]):focus {
+    border: 1px solid var(--odn-color-primary);
+  }
+  [data-odn-date-picker-container-allow-clear=false] [data-odn-date-picker-icon-container],
+  [data-odn-date-picker-container-selected=false] [data-odn-date-picker-icon-container] {
+    pointer-events: none;
+  }
+  [data-odn-date-picker-icon-container] {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    right: 8px;
+    width: 16px;
+    height: 16px;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+  [data-odn-date-picker-icon] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-date-picker-icon-calendar] {
+    color: var(--odn-color-black-9);
+  }
+  [data-odn-date-picker-icon-clear] {
+    opacity: 0;
+    color: var(--odn-color-black-7);
+  }
+  [data-odn-date-picker-icon-clear]:hover {
+    color: var(--odn-color-black-8);
+  }
+  [data-odn-date-picker-icon-clear]:active {
+    color: var(--odn-color-black-9);
+  }
+  [data-odn-date-picker-caption-nav-hover-fill] {
+    position: absolute;
+    top: 10px;
+    left: 16px;
+    height: var(--odn-dp-nav-button-size);
+    background-color: transparent;
+    pointer-events: none;
+    border-radius: 4px;
+    transition: left 0.15s cubic-bezier(0.32, 0.72, 0, 1), width 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-date-picker-caption-nav-hover-fill-inner] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    border-radius: 4px;
+    transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1), background 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-date-picker-popup-picker=week] [data-odn-date-picker-td-hover-fill] {
+    width: calc(var(--odn-dp-day-size) * 7);
+  }
+  [data-odn-date-picker-td-hover-fill] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--odn-dp-day-size);
+    height: var(--odn-dp-day-size);
+    pointer-events: none;
+    transition: top 0.15s cubic-bezier(0.32, 0.72, 0, 1), left 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-date-picker-td-hover-fill-inner] {
+    position: absolute;
+    top: var(--odn-dp-td-hover-fill-offset-y);
+    left: var(--odn-dp-td-hover-fill-offset-x);
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    border-radius: 4px;
+    transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1), background 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  .rdp-root {
+    position: relative;
+  }
+  .rdp-months {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    padding-right: var(--odn-dp-padding-inline);
+    padding-bottom: var(--odn-dp-padding-block-end);
+    padding-left: var(--odn-dp-padding-inline);
+  }
+  .rdp-month_caption {
+    text-align: center;
+  }
+  .rdp-caption_label,
+  .rdp-dropdowns {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    padding: var(--odn-dp-nav-padding-block-start) calc(var(--odn-dp-nav-padding-inline) * -1) var(--odn-dp-nav-padding-block-end);
+    height: calc(var(--odn-dp-nav-button-size) + var(--odn-dp-nav-padding-block-start) + var(--odn-dp-nav-padding-block-end));
+    pointer-events: none;
+  }
+  .rdp-caption_label {
+    align-items: center;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  .rdp-month_grid {
+    margin: var(--odn-dp-month-margin-block-start) var(--odn-dp-month-margin-inline-end) var(--odn-dp-month-margin-block-end) var(--odn-dp-month-margin-inline-start);
+  }
+  .rdp-weekday {
+    padding: 0;
+    padding-bottom: var(--odn-dp-table-row-gap);
+    width: var(--odn-dp-weekday-width);
+    height: calc(var(--odn-dp-weekday-height) + var(--odn-dp-table-row-gap));
+    vertical-align: middle;
+    text-align: center;
+    color: var(--odn-dp-weekday-color);
+    font-size: var(--odn-dp-weekday-font-size);
+    font-weight: var(--odn-dp-weekday-font-weight);
+  }
+  .rdp-week_number {
+    color: #c7c7c7;
+    font-weight: 400;
+  }
+  .rdp-week_number,
+  .rdp-weekdays,
+  .rdp-week {
+    border-bottom: none;
+  }
+  .rdp-week:not(:last-child) .rdp-day,
+  .rdp-week:not(:last-child) .rdp-week_number {
+    padding-bottom: var(--odn-dp-table-row-gap);
+  }
+  .rdp-day,
+  .rdp-week_number {
+    position: relative;
+    display: table-cell;
+    padding: 0;
+    width: var(--odn-dp-day-size);
+    height: var(--odn-dp-day-size);
+    vertical-align: middle;
+    text-align: center;
+    font-size: 13px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.1s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  .rdp-disabled {
+    pointer-events: none;
+    color: #c7c7c7;
+  }
+  .rdp-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+  .rdp-outside {
+    color: #c7c7c7;
+  }
+  .rdp-range_end [data-odn-date-picker-day] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .rdp-range_start [data-odn-date-picker-day] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .rdp-range_middle [data-odn-date-picker-day] {
+    font-weight: 400;
+    color: #1f1f1f;
+    background: #eaf0fd;
+    border-radius: 0;
+  }
+  [data-odn-date-picker-day] {
+    width: var(--odn-dp-day-size);
+    height: var(--odn-dp-day-size);
+    cursor: pointer;
+    background: none;
+    border: none;
+    outline: none;
+    border-radius: 4px;
+  }
+  [data-odn-date-picker-locale=enUS] [data-odn-date-picker-caption-select-year] {
+    width: 66px;
+  }
+  [data-odn-date-picker-locale=zhCN] [data-odn-date-picker-caption-select-year] {
+    width: 80px;
+  }
+  [data-odn-date-picker-caption-select-month] {
+    width: 55px;
+  }
+  [data-odn-date-picker-day-selected=true],
+  [data-odn-date-picker-day-range-start=true],
+  [data-odn-date-picker-day-range-end=true] {
+    color: #fff;
+    background-color: var(--odn-color-primary);
+    font-weight: 600;
+  }
+  [data-odn-date-picker-day-range-start=true],
+  [data-odn-date-picker-day-range-start-hover=true] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  [data-odn-date-picker-day-range-start-hover=true]:not([data-odn-date-picker-day-range-end=true]),
+  [data-odn-date-picker-day-range-end-hover=true]:not([data-odn-date-picker-day-range-start=true]) {
+    background: #d4e1fc;
+  }
+  [data-odn-date-picker-day-range-end=true],
+  [data-odn-date-picker-day-range-end-hover=true] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  [data-odn-date-picker-day-selected-range=true] {
+    background: #eaf0fd;
+    border-radius: 0;
+  }
+  [data-odn-date-picker-day-selected-range=true]:hover {
+    background: #d4e1fc;
+  }
+  [data-odn-date-picker-container-light=true] [data-odn-date-picker-input] {
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+  [data-odn-date-picker-container-light=true] [data-odn-date-picker-input]:hover {
+    border: 1px solid transparent;
+  }
+  [data-odn-date-picker-container-light=true] [data-odn-date-picker-input]:focus {
+    background-color: #fff;
+    border: 1px solid var(--odn-color-primary);
+  }
+  [data-odn-date-picker-grid-popup] {
+    min-width: var(--odn-dp-grid-popup-min-width);
+  }
+  [data-odn-date-picker-grid-caption] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--odn-dp-nav-padding-inline);
+    height: 42px;
+    font-size: 13px;
+    font-weight: 600;
+  }
+  [data-odn-date-picker-grid-caption] [data-odn-date-picker-caption-nav] {
+    line-height: 30px;
+    justify-content: center;
+    pointer-events: none;
+  }
+  [data-odn-date-picker-grid-body] {
+    display: grid;
+    row-gap: 4px;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--odn-dp-grid-body-padding-block-start) var(--odn-dp-grid-body-padding-inline-end) var(--odn-dp-grid-body-padding-block-end) var(--odn-dp-grid-body-padding-inline-start);
+  }
+  [data-odn-date-picker-grid-body-month] {
+    grid-template-columns: repeat(var(--odn-dp-month-grid-columns), auto);
+  }
+  [data-odn-date-picker-grid-body-month] [data-odn-date-picker-grid-item-wrapper],
+  [data-odn-date-picker-grid-body-month] [data-odn-date-picker-grid-item] {
+    width: var(--odn-dp-month-grid-item-width);
+    height: var(--odn-dp-month-grid-item-height);
+  }
+  [data-odn-date-picker-grid-body-quarter] {
+    grid-template-columns: repeat(var(--odn-dp-quarter-grid-columns), auto);
+  }
+  [data-odn-date-picker-grid-body-quarter] [data-odn-date-picker-grid-item-wrapper],
+  [data-odn-date-picker-grid-body-quarter] [data-odn-date-picker-grid-item] {
+    width: var(--odn-dp-quarter-grid-item-width);
+    height: var(--odn-dp-quarter-grid-item-height);
+  }
+  [data-odn-date-picker-grid-body-year] {
+    grid-template-columns: repeat(var(--odn-dp-year-grid-columns), auto);
+  }
+  [data-odn-date-picker-grid-body-year] [data-odn-date-picker-grid-item-wrapper],
+  [data-odn-date-picker-grid-body-year] [data-odn-date-picker-grid-item] {
+    width: var(--odn-dp-year-grid-item-width);
+    height: var(--odn-dp-year-grid-item-height);
+  }
+  [data-odn-date-picker-grid-item] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-date-picker-grid-item]:not([data-odn-date-picker-grid-item-disabled=true]):hover {
+    color: var(--odn-color-primary);
+  }
+  [data-odn-date-picker-grid-item-disabled=true] {
+    cursor: not-allowed;
+    color: #c7c7c7;
+  }
+  [data-odn-date-picker-grid-item][data-odn-date-picker-grid-item-active=true] {
+    color: #fff;
+    background-color: var(--odn-color-primary);
+  }
+  [data-odn-date-picker-grid-item][data-odn-date-picker-grid-item-active=true]:hover {
+    color: #fff;
+  }
+  [data-odn-date-picker-prefix] {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 11px;
+    padding-right: 4px;
+    color: var(--odn-color-black-9);
+    font-size: 14px;
+  }
+}

package/dist/date-picker/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/date-picker/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/date-range-picker/index.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { DatePickerCommonProps } from '../date-picker';
+import '../date-picker/style';
+import { type PopoverProps } from '../pop-base';
+export interface DatePickerRangeProps extends DatePickerCommonProps {
+    /**
+     * @description 值
+     */
+    value?: [Date, Date] | null;
+    /**
+     * @description 值变化回调, 参数为日期区间和 info 对象
+     */
+    onChange?: (date: [Date, Date] | null, info: {
+        dateString: string;
+    }) => void;
+    /**
+     * @description 开始日期选择回调
+     */
+    onStartDaySelect?: (date?: Date) => void;
+    /**
+     * @description 结束日期选择回调
+     */
+    onEndDaySelect?: (date?: Date) => void;
+    /**
+     * @description 快捷选项
+     */
+    shortcuts?: {
+        label: string;
+        value?: [Date, Date];
+        active?: boolean;
+        onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    }[];
+    /**
+     * @description 自定义日期格式，当使用自定义格式时，将不提供 input 的输入功能
+     */
+    format?: (date: [Date, Date] | null, info: {
+        dateString: string;
+    }) => string;
+    /**
+     * @description 最多选择天数
+     */
+    maxDays?: number;
+    /**
+     * @description 最少选择天数
+     */
+    minDays?: number;
+    /**
+     * @description 显示的月份数量
+     * @default 2
+     */
+    numberOfMonths?: number;
+    /**
+     * @description Popover 属性透传
+     */
+    popoverProps?: Omit<PopoverProps, 'popup' | 'children'>;
+}
+declare const DateRangePicker: ({ allowClear, minDate, maxDate, value: valueProp, onChange, visible: visibleProp, onVisibleChange, disabled, lang, disabledDays, placeholder, onStartDaySelect, onEndDaySelect, shortcuts, popupRender, light, triggerElement, popupStyle, captionLayout, captionPrevIcon, captionNextIcon, components, classNames, format, closeOnSelect, onClick, maxDays, minDays, numberOfMonths, prefix, popoverProps, ...otherProps }: DatePickerRangeProps) => React.JSX.Element;
+export default DateRangePicker;