@canlooks/can-ui 0.0.44 → 0.0.46

package/documentation/dist/components/segmented.md

@@ -30,19 +30,20 @@ export default function Index() {
 
 ## SegmentedProps
 
-| 属性           | 类型                                                                     | 默认值          | 说明                   |
-|--------------|------------------------------------------------------------------------|--------------|----------------------|
-| options      | [SegmentedOptionProps](#SegmentedOptionProps)[]                        | -            |                      |
-| orientation  | 'horizontal'                                             \| 'vertical' | 'horizontal' |                      |
-| size         | 'small' \| 'medium'                           \| 'large'               | 'medium'     |                      |
-| labelKey     | string                                                                 | 'label'      | `option`中用做`label`的键 |
-| primaryKey   | string                                                                 | 'value'      | `option`中用做主键的键      |
-| fullWidth    | boolean                                                                | false        | 是否占满整行               |
-| defaultValue |                                                                        | -            |                      |
-| value        |                                                                        | -            |                      |
-| onChange     | (value) => void                                                        | -            |                      |
-| readOnly     | boolean                                                                | false        |                      |
-| disabled     | boolean                                                                | false        |                      |
+| 属性             | 类型                                                                     | 默认值                | 说明                   |
+|----------------|------------------------------------------------------------------------|--------------------|----------------------|
+| options        | [SegmentedOptionProps](#SegmentedOptionProps)[]                        | -                  |                      |
+| orientation    | 'horizontal'                                             \| 'vertical' | 'horizontal'       |                      |
+| size           | 'small' \| 'medium'                           \| 'large'               | 'medium'           |                      |
+| labelKey       | string                                                                 | 'label'            | `option`中用做`label`的键 |
+| primaryKey     | string                                                                 | 'value'            | `option`中用做主键的键      |
+| fullWidth      | boolean                                                                | false              | 是否占满整行               |
+| indicatorColor | string                                                                 | background.content | 指示器的颜色               |
+| defaultValue   |                                                                        | -                  |                      |
+| value          |                                                                        | -                  |                      |
+| onChange       | (value) => void                                                        | -                  |                      |
+| readOnly       | boolean                                                                | false              |                      |
+| disabled       | boolean                                                                | false              |                      |
 
 ## SegmentedOptionProps
 

package/documentation/dist/index.html

@@ -5,7 +5,7 @@
     <link rel="shortcut icon" href="/logo.png">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Canlooks UI</title>
-  <script type="module" crossorigin src="/assets/index-DD484MoK.js"></script>
+  <script type="module" crossorigin src="/assets/index-gntHdyKP.js"></script>
 </head>
 <body>
 <div id="app"></div>

package/package.json

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

package/dist/cjs/components/dateTimePicker/calendar.d.ts

@@ -1,18 +0,0 @@
-import { DivProps } from '../../types';
-import { Dayjs } from 'dayjs';
-import { Dispatch, SetStateAction } from 'react';
-type SharedCalendarProps = {
-    defaultNull: boolean;
-    value: Dayjs;
-    onChange(value: Dayjs): void;
-};
-export interface CalendarProps extends SharedCalendarProps, Omit<DivProps, 'onChange'> {
-    type: 'dates' | 'months' | 'years';
-}
-export interface CommonCalendarProps extends SharedCalendarProps {
-    innerD: Dayjs;
-    setInnerD: Dispatch<SetStateAction<Dayjs>>;
-    setViewType(type: CalendarProps['type']): void;
-}
-export declare const Calendar: ({ type, ...props }: CalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/dist/cjs/components/dateTimePicker/calendar.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Calendar = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const calendarDates_1 = require("./calendarDates");
-const utils_1 = require("../../utils");
-const calendarMonths_1 = require("./calendarMonths");
-const popper_1 = require("../popper");
-const calendarYears_1 = require("./calendarYears");
-const Calendar = ({ type, ...props }) => {
-    const { open } = (0, popper_1.usePopperContext)();
-    const [viewType, setViewType] = (0, utils_1.useDerivedState)(prevType => open ? type : prevType, [open, type]);
-    const [innerD, setInnerD] = (0, utils_1.useDerivedState)(props.value);
-    const commonProps = {
-        ...props,
-        setViewType,
-        innerD: innerD.current,
-        setInnerD
-    };
-    switch (viewType.current) {
-        case 'dates':
-            return (0, jsx_runtime_1.jsx)(calendarDates_1.CalendarDates, { ...commonProps });
-        case 'months':
-            return (0, jsx_runtime_1.jsx)(calendarMonths_1.CalendarMonths, { ...commonProps });
-        default:
-            return (0, jsx_runtime_1.jsx)(calendarYears_1.CalendarYears, { ...commonProps });
-    }
-};
-exports.Calendar = Calendar;

package/dist/cjs/components/dateTimePicker/calendar.style.d.ts

@@ -1,15 +0,0 @@
-export declare const classes: {
-    calendarHead: string;
-    calendarHeadSide: string;
-    calendarHeadControl: string;
-    calendarHeadCenter: string;
-    calendarHeadButton: string;
-    calendarBody: string;
-    dateItem: string;
-    monthItem: string;
-    yearItem: string;
-    calendarFoot: string;
-} & {
-    root: string;
-};
-export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/dateTimePicker/calendarDates.d.ts

@@ -1,2 +0,0 @@
-import { CommonCalendarProps } from './calendar';
-export declare const CalendarDates: import("react").MemoExoticComponent<({ defaultNull, value, onChange, innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/dateTimePicker/calendarMonths.d.ts

@@ -1,2 +0,0 @@
-import { CommonCalendarProps } from './calendar';
-export declare const CalendarMonths: import("react").MemoExoticComponent<({ innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/dateTimePicker/calendarMonths.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalendarMonths = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const calendar_style_1 = require("./calendar.style");
-const button_1 = require("../button");
-exports.CalendarMonths = (0, react_1.memo)(({ innerD, setInnerD, setViewType }) => {
-    const currentMonth = innerD.month();
-    const clickHandler = (month) => {
-        currentMonth !== month && setInnerD(d => d.month(month));
-        setViewType('dates');
-    };
-    const renderButtons = () => {
-        const ret = [];
-        for (let i = 0; i < 12; i++) {
-            ret.push((0, jsx_runtime_1.jsxs)(button_1.Button, { className: calendar_style_1.classes.monthItem, variant: currentMonth === i ? 'filled' : 'text', size: "large", color: currentMonth === i ? 'primary' : 'text', onClick: () => clickHandler(i), children: [i + 1, "\u6708"] }, i));
-        }
-        return ret;
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { css: calendar_style_1.style, className: calendar_style_1.classes.root, children: [(0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHead, children: (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHeadCenter, children: "\u6708\u4EFD" }) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
-});

package/dist/cjs/components/dateTimePicker/calendarYears.d.ts

@@ -1,2 +0,0 @@
-import { CommonCalendarProps } from './calendar';
-export declare const CalendarYears: import("react").MemoExoticComponent<({ innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/dateTimePicker/calendarYears.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalendarYears = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const calendar_style_1 = require("./calendar.style");
-const button_1 = require("../button");
-const tooltip_1 = require("../tooltip");
-const __1 = require("../..");
-const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
-const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
-exports.CalendarYears = (0, react_1.memo)(({ innerD, setInnerD, setViewType }) => {
-    const currentYear = innerD.year();
-    const clickHandler = (year) => {
-        currentYear !== year && setInnerD(d => d.year(year));
-        setViewType('months');
-    };
-    const [page, setPage] = (0, react_1.useState)(() => Math.floor(currentYear / 12));
-    const renderHeadControl = (icon, title, onClick) => ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: title, children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.calendarHeadControl, variant: "text", size: "small", color: "text", onClick: onClick, children: icon }) }));
-    const renderButtons = () => {
-        const ret = [];
-        for (let i = 0; i < 12; i++) {
-            const years = page * 12 + i + 1;
-            ret.push((0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.monthItem, variant: currentYear === years ? 'filled' : 'text', size: "large", color: currentYear === years ? 'primary' : 'text', onClick: () => clickHandler(years), children: years }, i));
-        }
-        return ret;
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { css: calendar_style_1.style, className: calendar_style_1.classes.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHead, children: [(0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHeadSide, children: renderHeadControl((0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }), '上一页', () => setPage(p => p - 1)) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHeadSide, children: renderHeadControl((0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }), '下一页', () => setPage(p => p + 1)) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHeadCenter, children: "\u5E74\u4EFD" })] }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
-});

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

@@ -1,18 +0,0 @@
-import { DivProps } from '../../types';
-import { Dayjs } from 'dayjs';
-import { Dispatch, SetStateAction } from 'react';
-type SharedCalendarProps = {
-    defaultNull: boolean;
-    value: Dayjs;
-    onChange(value: Dayjs): void;
-};
-export interface CalendarProps extends SharedCalendarProps, Omit<DivProps, 'onChange'> {
-    type: 'dates' | 'months' | 'years';
-}
-export interface CommonCalendarProps extends SharedCalendarProps {
-    innerD: Dayjs;
-    setInnerD: Dispatch<SetStateAction<Dayjs>>;
-    setViewType(type: CalendarProps['type']): void;
-}
-export declare const Calendar: ({ type, ...props }: CalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { CalendarDates } from './calendarDates';
-import { useDerivedState } from '../../utils';
-import { CalendarMonths } from './calendarMonths';
-import { usePopperContext } from '../popper';
-import { CalendarYears } from './calendarYears';
-export const Calendar = ({ type, ...props }) => {
-    const { open } = usePopperContext();
-    const [viewType, setViewType] = useDerivedState(prevType => open ? type : prevType, [open, type]);
-    const [innerD, setInnerD] = useDerivedState(props.value);
-    const commonProps = {
-        ...props,
-        setViewType,
-        innerD: innerD.current,
-        setInnerD
-    };
-    switch (viewType.current) {
-        case 'dates':
-            return _jsx(CalendarDates, { ...commonProps });
-        case 'months':
-            return _jsx(CalendarMonths, { ...commonProps });
-        default:
-            return _jsx(CalendarYears, { ...commonProps });
-    }
-};

package/dist/esm/components/dateTimePicker/calendar.style.d.ts

@@ -1,15 +0,0 @@
-export declare const classes: {
-    calendarHead: string;
-    calendarHeadSide: string;
-    calendarHeadControl: string;
-    calendarHeadCenter: string;
-    calendarHeadButton: string;
-    calendarBody: string;
-    dateItem: string;
-    monthItem: string;
-    yearItem: string;
-    calendarFoot: string;
-} & {
-    root: string;
-};
-export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -1,2 +0,0 @@
-import { CommonCalendarProps } from './calendar';
-export declare const CalendarDates: import("react").MemoExoticComponent<({ defaultNull, value, onChange, innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -1,2 +0,0 @@
-import { CommonCalendarProps } from './calendar';
-export declare const CalendarMonths: import("react").MemoExoticComponent<({ innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -1,19 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { memo } from 'react';
-import { classes, style } from './calendar.style';
-import { Button } from '../button';
-export const CalendarMonths = memo(({ innerD, setInnerD, setViewType }) => {
-    const currentMonth = innerD.month();
-    const clickHandler = (month) => {
-        currentMonth !== month && setInnerD(d => d.month(month));
-        setViewType('dates');
-    };
-    const renderButtons = () => {
-        const ret = [];
-        for (let i = 0; i < 12; i++) {
-            ret.push(_jsxs(Button, { className: classes.monthItem, variant: currentMonth === i ? 'filled' : 'text', size: "large", color: currentMonth === i ? 'primary' : 'text', onClick: () => clickHandler(i), children: [i + 1, "\u6708"] }, i));
-        }
-        return ret;
-    };
-    return (_jsxs("div", { css: style, className: classes.root, children: [_jsx("div", { className: classes.calendarHead, children: _jsx("div", { className: classes.calendarHeadCenter, children: "\u6708\u4EFD" }) }), _jsx("div", { className: classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
-});

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

@@ -1,2 +0,0 @@
-import { CommonCalendarProps } from './calendar';
-export declare const CalendarYears: import("react").MemoExoticComponent<({ innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { memo, useState } from 'react';
-import { classes, style } from './calendar.style';
-import { Button } from '../button';
-import { Tooltip } from '../tooltip';
-import { Icon } from '../..';
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
-export const CalendarYears = memo(({ innerD, setInnerD, setViewType }) => {
-    const currentYear = innerD.year();
-    const clickHandler = (year) => {
-        currentYear !== year && setInnerD(d => d.year(year));
-        setViewType('months');
-    };
-    const [page, setPage] = useState(() => Math.floor(currentYear / 12));
-    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { className: classes.calendarHeadControl, variant: "text", size: "small", color: "text", onClick: onClick, children: icon }) }));
-    const renderButtons = () => {
-        const ret = [];
-        for (let i = 0; i < 12; i++) {
-            const years = page * 12 + i + 1;
-            ret.push(_jsx(Button, { className: classes.monthItem, variant: currentYear === years ? 'filled' : 'text', size: "large", color: currentYear === years ? 'primary' : 'text', onClick: () => clickHandler(years), children: years }, i));
-        }
-        return ret;
-    };
-    return (_jsxs("div", { css: style, className: classes.root, children: [_jsxs("div", { className: classes.calendarHead, children: [_jsx("div", { className: classes.calendarHeadSide, children: renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一页', () => setPage(p => p - 1)) }), _jsx("div", { className: classes.calendarHeadSide, children: renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一页', () => setPage(p => p + 1)) }), _jsx("div", { className: classes.calendarHeadCenter, children: "\u5E74\u4EFD" })] }), _jsx("div", { className: classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
-});