@canlooks/can-ui 0.0.89 → 0.0.90

package/dist/esm/components/calendar/calendar.style.js

@@ -13,128 +13,128 @@ export const classes = defineInnerClasses('calendar', [
     'yearItem',
     'foot'
 ]);
-export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.headSide} {
-            z-index: 1;
-        }
-
-        .${classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${classes.body} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=date] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=month], &[data-view-type=year] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                grid-template-columns: repeat(7, 30px);
-                grid-template-rows: repeat(7, 30px);
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 70px);
-                grid-template-rows: repeat(4, 52.5px);
-
-                .${classes.monthItem},
-                .${classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${classes.dateItem} {
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 98px);
-                grid-template-rows: repeat(4, 73.5px);
-            }
-        }
-    }
-
-    .${classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+export const style = defineCss(({ divider, text, spacing }) => css `
+    .${classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuListPadding}px;
+        position: relative;
+
+        .${classes.headSide} {
+            z-index: 1;
+        }
+
+        .${classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${classes.monthItem},
+            .${classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${classes.monthItem},
+                .${classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

package/dist/esm/components/calendar/panelDates.d.ts

@@ -1,2 +1,2 @@
 import { PanelProps } from './calendar';
-export declare const PanelDates: import("react").MemoExoticComponent<({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, _defaultNull }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const PanelDates: import("react").MemoExoticComponent<({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, todayButtonText, todayButtonProps, _defaultNull }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/calendar/panelDates.js

@@ -22,7 +22,7 @@ const commonButtonProps = {
     size: 'small',
     color: 'text'
 };
-export const PanelDates = memo(({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, _defaultNull }) => {
+export const PanelDates = memo(({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, todayButtonText = '回今天', todayButtonProps, _defaultNull }) => {
     const today = dayjs();
     const prevMonth = () => {
         setInnerD(d => d.subtract(1, 'month'));
@@ -66,5 +66,8 @@ export const PanelDates = memo(({ value, setValue, innerD, setInnerD, setViewTyp
         return ret;
     };
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.head, children: [_jsxs("div", { className: classes.headSide, children: [renderHeadControl(_jsx(Icon, { icon: faAnglesLeft }), '上一年', prevYear), renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一月', prevMonth)] }), _jsxs("div", { className: classes.headSide, children: [renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一月', nextMonth), renderHeadControl(_jsx(Icon, { icon: faAnglesRight }), '下一年', nextYear)] }), _jsxs("div", { className: classes.headCenter, children: [_jsxs(Button, { ...commonButtonProps, className: classes.headButton, onClick: () => setViewType('year'), children: [innerD.year(), "\u5E74"] }), _jsxs(Button, { ...commonButtonProps, className: classes.headButton, onClick: () => setViewType('month'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), _jsxs("div", { className: classes.body, "data-view-type": "date", children: [renderedDaysList, renderDates()] }), showToday &&
-                _jsx("div", { className: classes.foot, children: _jsx(Button, { variant: "text", onClick: () => setValue(dayjs()), children: "\u56DE\u4ECA\u5929" }) })] }));
+                _jsx("div", { className: classes.foot, children: _jsx(Button, { variant: "text", ...todayButtonProps, onClick: e => {
+                            todayButtonProps?.onClick?.(e);
+                            setValue(dayjs());
+                        }, children: todayButtonText }) })] }));
 });

package/dist/esm/components/clickAway/clickAway.d.ts

@@ -60,7 +60,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual";
+    popover: "" | "auto" | "manual" | "hint";
     popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;

package/dist/esm/components/dateTimePicker/dateTimePicker.js

@@ -44,8 +44,8 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
             content: (_jsxs(_Fragment, { children: [showCalendar &&
                         _jsx(Calendar, { viewLevel: format.includes('D') ? 'date'
                                 : format.includes('M') ? 'month'
-                                    : 'year', _defaultNull: !dateValue.current, value: innerValue, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
-                        _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: innerValue, onChange: setDateValue }) })] }))
+                                    : 'year', _defaultNull: !dateValue.current, value: innerValue, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates, todayButtonText: showTimer ? '现在' : void 0 }), showTimer &&
+                        _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: dateValue.current, onChange: setDateValue }) })] }))
         }, popperProps, {
             onOpenChange: setInnerOpen,
             onPointerDown: e => e.preventDefault()

package/dist/esm/components/dateTimePicker/timer.d.ts

@@ -3,6 +3,6 @@ export declare const Timer: import("react").MemoExoticComponent<({ showHours, sh
     showHours: boolean;
     showMinutes: boolean;
     showSeconds: boolean;
-    value: Dayjs;
+    value: Dayjs | null;
     onChange(value: Dayjs): void;
 }) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/dateTimePicker/timer.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
 import { classes, style } from './timer.style';
 import { MenuItem } from '../menuItem';
+import dayjs from 'dayjs';
 import { useDateTimePickerContext } from './dateTimePicker';
 import { useScrollToTarget } from '../popper';
 export const Timer = memo(({ showHours, showMinutes, showSeconds, value, onChange }) => {
@@ -9,10 +10,14 @@ export const Timer = memo(({ showHours, showMinutes, showSeconds, value, onChang
 });
 function TimerItem({ type, value, onChange }) {
     const { min, max, disabledHours, disabledMinutes, disabledSeconds } = useDateTimePickerContext();
-    const currentNum = type === 'hour' ? value.hour()
-        : type === 'minute' ? value.minute()
-            : value.second();
+    const currentNum = !value ? -1
+        : type === 'hour' ? value.hour()
+            : type === 'minute' ? value.minute()
+                : value.second();
     const isDisabled = (num) => {
+        if (!value) {
+            return false;
+        }
         if (type === 'hour') {
             if (disabledHours && !disabledHours(value, num)) {
                 return true;
@@ -38,7 +43,12 @@ function TimerItem({ type, value, onChange }) {
     const renderItems = (count) => {
         const ret = [];
         for (let i = 0; i < count; i++) {
-            ret.push(_jsx(MenuItem, { ref: i === currentNum ? selectedItemRef : void 0, className: classes.timerItem, label: i.toString().padStart(2, '0'), selected: i === currentNum, onClick: () => i !== currentNum && onChange(value.set(type, i)), disabled: isDisabled(i) }, i));
+            ret.push(_jsx(MenuItem, { ref: i === currentNum ? selectedItemRef : void 0, className: classes.timerItem, label: i.toString().padStart(2, '0'), selected: i === currentNum, onClick: () => {
+                    if (i !== currentNum) {
+                        value ||= dayjs();
+                        onChange(value.set(type, i));
+                    }
+                }, disabled: isDisabled(i) }, i));
         }
         return ret;
     };

package/dist/esm/components/popper/popper.js

@@ -497,7 +497,6 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
      */
     const beforeOpenCallbacks = useRef(new Set());
     const triggerBeforeOpen = () => {
-        console.log('trigger', beforeOpenCallbacks.current);
         for (const cb of beforeOpenCallbacks.current) {
             cb();
         }

package/dist/esm/components/status/status.d.ts

@@ -3,12 +3,12 @@ import { DivProps, Status as IStatus } from '../../types';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIconDefinition: {
-    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
 };
 export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;

package/dist/esm/extensions/reactiveForm/reactiveFormItem.js

@@ -20,6 +20,7 @@ function InnerFormItem({ dependencies, checked, value, onChange, ...props }) {
         checked,
         value,
         onChange(e) {
+            props.children.props?.onChange?.(e);
             onChange?.(e);
             context.onChange?.();
         }

package/extensions/curd.cjs

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// @ts-nocheck
-tslib_1.__exportStar(require("../dist/cjs/extensions/curd"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/curd"), exports);

package/extensions/documentViewer.cjs

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// @ts-nocheck
-tslib_1.__exportStar(require("../dist/cjs/extensions/documentViewer"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/documentViewer"), exports);

package/extensions/textFormatter.cjs

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// @ts-nocheck
-tslib_1.__exportStar(require("../dist/cjs/extensions/textFormatter"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/textFormatter"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",