@canlooks/can-ui 0.0.149 → 0.0.152

package/dist/cjs/components/app/app.style.js

@@ -6,6 +6,7 @@ const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 exports.classes = (0, utils_1.defineInnerClasses)('app');
 const appStyleCallback = (theme) => (0, react_1.css) `
+    @layer reset, override;
     @layer reset {
         line-height: ${20 / 14};
         font-size: ${theme.fontSize}px;

package/dist/cjs/components/sortableItem/sortableItem.d.ts

@@ -1,8 +1,8 @@
 import { ElementType } from 'react';
 import { Arguments } from '@dnd-kit/sortable/dist/hooks/useSortable';
-import { OverridableComponent, OverridableProps } from '../../types';
+import { Id, OverridableComponent, OverridableProps } from '../../types';
 export type SortableItemOwnProps = {
-    id: string | number;
+    id: Id;
     disabled?: boolean;
     sortableArguments?: Arguments;
 };

package/dist/cjs/components/sortableItem/sortableItem.js

@@ -7,7 +7,6 @@ const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const utils_1 = require("../../utils");
 const react_2 = require("@emotion/react");
-const treeDnd_style_1 = require("../tree/treeDnd.style");
 const sortableItem_style_1 = require("./sortableItem.style");
 exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
@@ -37,5 +36,5 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
                     transform: utilities_1.CSS.Transform.toString(transform),
                     transition,
                     ...props.style
-                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }), isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: treeDnd_style_1.globalGrabbingStyle })] }));
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging, "data-disabled": disabled }), isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: sortableItem_style_1.globalGrabbingStyle })] }));
 });

package/dist/cjs/components/sortableItem/sortableItem.style.js

@@ -5,10 +5,12 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineInnerClasses)('sortable-item');
 exports.style = (0, react_1.css) `
-    cursor: grab;
-    
-    &:active {
-        cursor: grabbing;
+    &:not([data-dsabled=true]) {
+        cursor: grab;
+
+        &:active {
+            cursor: grabbing;
+        }
     }
 `;
 exports.globalGrabbingStyle = (0, react_1.css) `

package/dist/cjs/components/tabs/lineIndicator.d.ts

@@ -1,7 +1,6 @@
 import { Id } from '../../types';
-export declare function LineIndicator({ value, position, getActiveTab, onTransitionEnd }: {
+export declare function LineIndicator({ value, position, getActiveTab, }: {
     value?: Id;
     position: 'top' | 'bottom' | 'left' | 'right';
     getActiveTab(): HTMLDivElement | undefined;
-    onTransitionEnd(): void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/tabs/lineIndicator.js

@@ -7,10 +7,11 @@ const tabs_style_1 = require("./tabs.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const tabs_1 = require("./tabs");
-function LineIndicator({ value, position, getActiveTab, onTransitionEnd }) {
+function LineIndicator({ value, position, getActiveTab, }) {
     const context = (0, tabs_1.useTabsContext)();
     const [color, setColor] = (0, react_1.useState)(context.color);
     const [boundingRect, setBoundingRect] = (0, react_1.useState)();
+    const { setAnimating } = (0, tabs_1.useTabsContext)();
     (0, react_1.useEffect)(() => {
         const activeTab = getActiveTab();
         if (!activeTab) {
@@ -40,7 +41,7 @@ function LineIndicator({ value, position, getActiveTab, onTransitionEnd }) {
         activeTab.dataset.color && setColor(activeTab.dataset.color);
     }, [value]);
     const theme = (0, theme_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.indicator, onTransitionEnd: onTransitionEnd, style: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
             ...boundingRect,
             backgroundColor: (0, utils_1.colorTransfer)(color, theme)
         } }));

package/dist/cjs/components/tabs/tab.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps, Id } from '../../types';
 export interface TabProps extends Omit<DivProps, 'prefix'> {
     prefix?: ReactNode;
@@ -7,9 +7,13 @@ export interface TabProps extends Omit<DivProps, 'prefix'> {
     color?: ColorPropsValue;
     orientation?: 'horizontal' | 'vertical';
     label?: ReactNode;
-    value?: Id;
+    value: Id;
     disabled?: boolean;
+    closable?: boolean;
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    /** 是否允许拖拽排序，默认为`false` */
+    sortable?: boolean;
     /** @private 内部使用，用于表示改选项卡是否为激活状态 */
     _active?: boolean;
 }
-export declare const Tab: import("react").MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, _active, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Tab: React.MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/tabs/tab.js

@@ -6,16 +6,27 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const tabs_style_1 = require("./tabs.style");
 const tabs_1 = require("./tabs");
-exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, _active, ...props }) => {
-    const { color: contextColor, variant, animating } = (0, tabs_1.useTabsContext)();
-    const colorValue = (0, utils_1.useColor)(color ?? contextColor);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(tabs_style_1.classes.tab, props.className), style: {
-            borderColor: variant === 'line' && !animating && _active ? colorValue : void 0,
+const button_1 = require("../button");
+const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
+const icon_1 = require("../icon");
+const sortableItem_1 = require("../sortableItem");
+exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }) => {
+    const context = (0, tabs_1.useTabsContext)();
+    const colorValue = (0, utils_1.useColor)(color ?? context.color);
+    const _closable = closable ?? context.closable;
+    const closeHandler = (e) => {
+        onClose?.(e);
+        context.onClose?.(value);
+    };
+    const _sortable = sortable ?? context.sortable;
+    return ((0, jsx_runtime_1.jsxs)(sortableItem_1.SortableItem, { ...props, id: value, disabled: !_sortable, className: (0, utils_1.clsx)(tabs_style_1.classes.tab, props.className), style: {
+            borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
             color: _active ? colorValue : void 0,
             ...props.style
         }, "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, onClick: e => {
             !disabled && props.onClick?.(e);
         }, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabPrefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.label, children: label }), !!suffix &&
-                (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabSuffix, children: suffix })] }));
+                (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabSuffix, children: suffix }), _closable &&
+                (0, jsx_runtime_1.jsx)(button_1.Button, { className: tabs_style_1.classes.tabClose, variant: "text", color: "text.secondary", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }));
 });

package/dist/cjs/components/tabs/tabs.d.ts

@@ -1,13 +1,21 @@
-import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { CSSProperties, ReactElement, ReactNode, SetStateAction, Dispatch } from 'react';
 import { ColorPropsValue, DivProps, Id, Obj, Size } from '../../types';
 import { Tab, TabProps } from './tab';
+import { DragEndEvent } from '@dnd-kit/core';
 export type TabType = TabProps & Obj;
-export interface TabsProps<T extends TabType = TabType> extends Omit<DivProps, 'prefix' | 'defaultValue' | 'onChange'> {
+type TabsSharedProps = {
+    variant?: 'line' | 'card';
+    color?: ColorPropsValue;
+    /** 是否渲染关闭按钮，默认为`false` */
+    closable?: boolean;
+    onClose?(key: Id): void;
+    /** 是否允许拖拽排序，默认为`false` */
+    sortable?: boolean;
+};
+export interface TabsProps<T extends TabType = TabType> extends TabsSharedProps, Omit<DivProps, 'prefix' | 'defaultValue' | 'onChange'> {
     tabs?: T[];
     labelKey?: keyof T;
     primaryKey?: keyof T;
-    variant?: 'line' | 'card';
-    color?: ColorPropsValue;
     size?: Size;
     /** 选项卡的位置，默认为`top` */
     position?: 'top' | 'bottom' | 'left' | 'right';
@@ -20,13 +28,19 @@ export interface TabsProps<T extends TabType = TabType> extends Omit<DivProps, '
     onChange?(value: Id): void;
     readOnly?: boolean;
     disabled?: boolean;
+    /**
+     * @param e
+     * @param tabs 仅{@link tabs}模式支持，使用children时，该参数为`undefined`
+     */
+    onSort?(e: DragEndEvent, tabs?: T[]): void;
 }
-export declare function useTabsContext(): {
-    color?: ColorPropsValue;
-    variant?: TabsProps["variant"];
-    animating?: boolean;
-};
+interface ITabsContext extends TabsSharedProps {
+    animating: boolean;
+    setAnimating: Dispatch<SetStateAction<boolean>>;
+}
+export declare function useTabsContext(): ITabsContext;
 export declare const Tabs: {
     <T extends TabType>(props: TabsProps<T>): ReactElement;
     Tab: typeof Tab;
 };
+export {};

package/dist/cjs/components/tabs/tabs.js

@@ -11,21 +11,22 @@ const theme_1 = require("../theme");
 const tab_1 = require("./tab");
 const tabsEllipsis_1 = require("./tabsEllipsis");
 const lineIndicator_1 = require("./lineIndicator");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
 const TabsContext = (0, react_2.createContext)({});
 function useTabsContext() {
     return (0, react_2.useContext)(TabsContext);
 }
-exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'value', variant = 'line', color = 'primary', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
+exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'value', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, variant = 'line', color = 'primary', closable, onClose, sortable, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    const [animating, setAnimating] = (0, react_2.useState)(false); // TODO 应当考虑value受控的情况，参考anchorList组件
     const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const setInnerValue = (value) => {
         if (!readOnly && !disabled) {
-            setAnimating(true);
             _setInnerValue(value);
         }
     };
+    const [animating, setAnimating] = (0, utils_1.useDerivedState)(prev => typeof prev !== 'undefined', [innerValue.current]);
     const setValueInEllipsis = (value) => {
         shouldScroll.current = true;
         setInnerValue(value);
@@ -116,13 +117,30 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
             shouldScroll.current = false;
         }
     }, [shouldScroll.current]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tabs_style_1.useStyle)({ color, variant }), className: (0, utils_1.clsx)(tabs_style_1.classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
-                    (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: (0, jsx_runtime_1.jsxs)(TabsContext, { value: (0, react_2.useMemo)(() => ({
-                            color, variant, animating
-                        }), [
-                            color, variant, animating
-                        ]), children: [renderTabs(), variant === 'line' &&
-                                (0, jsx_runtime_1.jsx)(lineIndicator_1.LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab, onTransitionEnd: () => setAnimating(false) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
+    /**
+     * ----------------------------------------------------------------
+     * 拖拽
+     */
+    const tabKeys = tabs
+        ? tabs.map(tab => tab[primaryKey])
+        : react_2.Children.map(props.children, c => (0, react_2.isValidElement)(c) ? c.props.value : c);
+    const dragEndHandler = (e) => {
+        if (props.onSort) {
+            const newTabs = tabs
+                ? (0, utils_1.onDndDragEnd)(e, tabs, primaryKey)
+                : void 0;
+            props.onSort(e, newTabs);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tabs_style_1.useStyle)({ color, variant }), className: (0, utils_1.clsx)(tabs_style_1.classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating.current, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
+                    (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: tabKeys, disabled: !sortable, children: (0, jsx_runtime_1.jsxs)(TabsContext, { value: (0, react_2.useMemo)(() => ({
+                                    color, variant, closable, onClose, sortable,
+                                    animating: animating.current, setAnimating
+                                }), [
+                                    color, variant, closable, onClose, sortable,
+                                    animating.current
+                                ]), children: [renderTabs(), variant === 'line' &&
+                                        (0, jsx_runtime_1.jsx)(lineIndicator_1.LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }) }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.suffix, children: [(shadowStart || shadowEnd) &&
                                 (0, jsx_runtime_1.jsx)(tabsEllipsis_1.TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
 });

package/dist/cjs/components/tabs/tabs.style.d.ts

@@ -12,8 +12,9 @@ export declare const classes: {
     scrollWrap: string;
     tabPrefix: string;
     tabSuffix: string;
+    tabClose: string;
 } & {
     root: string;
 };
 export declare const indicatorWidth = 2;
-export declare function useStyle({ color, variant }: Required<Pick<TabsProps, 'color' | 'variant'>>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color, variant }: Required<Pick<TabsProps, 'color' | 'variant'>>): import("@emotion/react").SerializedStyles[];