@lobehub/ui 1.170.8 → 2.0.0

package/es/DraggablePanel/components/DraggablePanelBody.js

@@ -24,4 +24,5 @@ var DraggablePanelBody = /*#__PURE__*/memo(function (_ref) {
     flex: 1
   }, rest));
 });
+DraggablePanelBody.displayName = 'DraggablePanelBody';
 export default DraggablePanelBody;

package/es/DraggablePanel/components/DraggablePanelContainer.js

@@ -23,4 +23,5 @@ var DraggablePanelContainer = /*#__PURE__*/memo(function (_ref) {
     className: cx(styles.container, className)
   }, rest));
 });
+DraggablePanelContainer.displayName = 'DraggablePanelContainer';
 export default DraggablePanelContainer;

package/es/DraggablePanel/components/DraggablePanelFooter.js

@@ -28,4 +28,5 @@ var DraggablePanelFooter = /*#__PURE__*/memo(function (_ref) {
     justify: 'flex-start'
   }, rest));
 });
+DraggablePanelFooter.displayName = 'DraggablePanelFooter';
 export default DraggablePanelFooter;

package/es/DraggablePanel/components/DraggablePanelHeader.js

@@ -47,10 +47,7 @@ var DraggablePanelHeader = /*#__PURE__*/memo(function (props) {
     onClick: function onClick() {
       return setExpand === null || setExpand === void 0 ? void 0 : setExpand(false);
     },
-    size: {
-      blockSize: 24,
-      fontSize: 14
-    }
+    size: 'small'
   });
   var pinIcon = /*#__PURE__*/_jsx(ActionIcon, {
     active: pin,
@@ -58,10 +55,7 @@ var DraggablePanelHeader = /*#__PURE__*/memo(function (props) {
     onClick: function onClick() {
       return setIsPinned(!isPinned);
     },
-    size: {
-      blockSize: 24,
-      fontSize: 14
-    }
+    size: 'small'
   });
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
@@ -74,4 +68,5 @@ var DraggablePanelHeader = /*#__PURE__*/memo(function (props) {
     children: [position === 'left' ? panelIcon : pinIcon, title, position === 'left' ? pinIcon : panelIcon]
   }));
 });
+DraggablePanelHeader.displayName = 'DraggablePanelHeader';
 export default DraggablePanelHeader;

package/es/DraggablePanel/components/style.d.ts

@@ -2,5 +2,6 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     body: import("antd-style").SerializedStyles;
     container: import("antd-style").SerializedStyles;
     footer: import("antd-style").SerializedStyles;
+    handlerIcon: import("antd-style").SerializedStyles;
     header: import("antd-style").SerializedStyles;
 }>;

package/es/DraggablePanel/components/style.js

@@ -1,13 +1,14 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden auto;\n    padding: 16px;\n  "]))),
-    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n  "]))),
-    footer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding-block: 8px;\n    padding-inline: 16px;\n    border-block-start: 1px solid ", ";\n  "])), token.colorBorderSecondary),
-    header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding-block: 8px;\n    padding-inline: 16px;\n    font-weight: 500;\n    border-block-end: 1px solid ", ";\n  "])), token.colorBorderSecondary)
+    body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      overflow: hidden auto;\n      padding: 16px;\n    "]))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n    "]))),
+    footer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-start: 1px solid ", ";\n    "])), token.colorBorderSecondary),
+    handlerIcon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ", ";\n    "])), token.motionEaseOut),
+    header: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding-block: 8px;\n      padding-inline: 16px;\n      font-weight: 500;\n      border-block-end: 1px solid ", ";\n    "])), token.colorBorderSecondary)
   };
 });

package/es/DraggablePanel/index.d.ts

@@ -1,100 +1,20 @@
-import type { NumberSize, Size } from 're-resizable';
-import { type CSSProperties } from 'react';
-import type { Props as RndProps } from 'react-rnd';
-import { DivProps } from "../types";
-export type placementType = 'right' | 'left' | 'top' | 'bottom';
-export interface DraggablePanelProps extends DivProps {
-    /**
-     * @title The class name for the content and handle component
-     */
-    classNames?: {
-        content?: string;
-        handle?: string;
-    };
-    /**
-     * @description The default expand state of the panel
-     * @default true
-     */
-    defaultExpand?: boolean;
-    /**
-     * @description The default size of the panel
-     */
-    defaultSize?: Partial<Size>;
-    /**
-     * @description Whether the panel should be destroyed when closed or not
-     * @default false
-     */
-    destroyOnClose?: boolean;
-    /**
-     * @description Whether the panel is expanded or not
-     */
-    expand?: boolean;
-    /**
-     * @description Whether the panel is expandable or not
-     * @default true
-     */
-    expandable?: boolean;
-    fullscreen?: boolean;
-    /**
-     * @description The style of the panel handler
-     * @type CSSProperties
-     */
-    handlerStyle?: CSSProperties;
-    /** @deprecated please use `handlerStyle` instead */
-    hanlderStyle?: CSSProperties;
-    headerHeight?: number;
-    maxHeight?: number;
-    maxWidth?: number;
-    /**
-     * @description The minimum height of the panel
-     */
-    minHeight?: number;
-    /**
-     * @description The minimum width of the panel
-     */
-    minWidth?: number;
-    /**
-     * @description The mode of the panel, fixed or float
-     * @default 'fixed'
-     */
-    mode?: 'fixed' | 'float';
-    /**
-     * @description Callback function when the expand state of the panel changes
-     */
-    onExpandChange?: (expand: boolean) => void;
-    /**
-     * @description Callback function when the size of the panel changes
-     */
-    onSizeChange?: (delta: NumberSize, size?: Size) => void;
-    /**
-     * @description Callback function when the panel is being resized
-     */
-    onSizeDragging?: (delta: NumberSize, size?: Size) => void;
-    /**
-     * @description Whether the panel can be pinned or not
-     * @default true
-     */
-    pin?: boolean;
-    /**
-     * @description The placement of the panel, right, left, top or bottom
-     * @default 'right'
-     */
-    placement: placementType;
-    /**
-     * @description Whether the panel can be resized or not
-     * @default true
-     */
-    resize?: RndProps['enableResizing'];
-    showHandlerWhenUnexpand?: boolean;
-    /**
-     * @description Whether the panel handler should be shown when unexpanded or not
-     * @default true
-     */
-    showHandlerWideArea?: boolean;
-    /**
-     * @description The size of the panel
-     */
-    size?: Partial<Size>;
+import type { ReactNode, RefAttributes } from 'react';
+import DraggablePanelBody from './components/DraggablePanelBody';
+import DraggablePanelContainer from './components/DraggablePanelContainer';
+import DraggablePanelFooter from './components/DraggablePanelFooter';
+import DraggablePanelHeader from './components/DraggablePanelHeader';
+import type { DraggablePanelProps } from './type';
+interface IDraggablePanel {
+    (props: DraggablePanelProps & RefAttributes<HTMLDivElement>): ReactNode;
+    Body: typeof DraggablePanelBody;
+    Container: typeof DraggablePanelContainer;
+    Footer: typeof DraggablePanelFooter;
+    Header: typeof DraggablePanelHeader;
 }
-declare const DraggablePanel: import("react").NamedExoticComponent<DraggablePanelProps>;
+declare const DraggablePanel: IDraggablePanel;
 export default DraggablePanel;
+export { default as DraggablePanelBody, type DraggablePanelBodyProps, } from './components/DraggablePanelBody';
+export { default as DraggablePanelContainer, type DraggablePanelContainerProps, } from './components/DraggablePanelContainer';
+export { default as DraggablePanelFooter, type DraggablePanelFooterProps, } from './components/DraggablePanelFooter';
+export { default as DraggablePanelHeader, type DraggablePanelHeaderProps, } from './components/DraggablePanelHeader';
+export type * from './type';

package/es/DraggablePanel/index.js

@@ -1,252 +1,17 @@
 'use client';
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useHover } from 'ahooks';
-import { ConfigProvider } from 'antd';
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
-import { Resizable } from 're-resizable';
-import { memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Center } from 'react-layout-kit';
-import useControlledState from 'use-merge-value';
-import { useStyles } from "./style";
-import { reversePlacement } from "./utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var DEFAULT_HEIGHT = 180;
-var DEFAULT_WIDTH = 280;
-var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
-  var _ref$headerHeight = _ref.headerHeight,
-    headerHeight = _ref$headerHeight === void 0 ? 0 : _ref$headerHeight,
-    fullscreen = _ref.fullscreen,
-    maxHeight = _ref.maxHeight,
-    _ref$pin = _ref.pin,
-    pin = _ref$pin === void 0 ? true : _ref$pin,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'fixed' : _ref$mode,
-    children = _ref.children,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
-    resize = _ref.resize,
-    style = _ref.style,
-    _ref$showHandlerWideA = _ref.showHandlerWideArea,
-    showHandlerWideArea = _ref$showHandlerWideA === void 0 ? true : _ref$showHandlerWideA,
-    size = _ref.size,
-    customizeDefaultSize = _ref.defaultSize,
-    minWidth = _ref.minWidth,
-    minHeight = _ref.minHeight,
-    maxWidth = _ref.maxWidth,
-    onSizeChange = _ref.onSizeChange,
-    onSizeDragging = _ref.onSizeDragging,
-    _ref$expandable = _ref.expandable,
-    expandable = _ref$expandable === void 0 ? true : _ref$expandable,
-    expand = _ref.expand,
-    _ref$defaultExpand = _ref.defaultExpand,
-    defaultExpand = _ref$defaultExpand === void 0 ? true : _ref$defaultExpand,
-    onExpandChange = _ref.onExpandChange,
-    className = _ref.className,
-    showHandlerWhenUnexpand = _ref.showHandlerWhenUnexpand,
-    destroyOnClose = _ref.destroyOnClose,
-    hanlderStyle = _ref.hanlderStyle,
-    handlerStyle = _ref.handlerStyle,
-    _ref$classNames = _ref.classNames,
-    classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-    dir = _ref.dir;
-  var ref = useRef(null);
-  var isHovering = useHover(ref);
-  var isVertical = placement === 'top' || placement === 'bottom';
-
-  // inherit direction from Ant Design ConfigProvider
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    antdDirection = _useContext.direction;
-  var direction = dir !== null && dir !== void 0 ? dir : antdDirection;
-  var internalPlacement = placement;
-  // reverse the placement when dir is rtl
-  if (direction === 'rtl' && ['left', 'right'].includes(placement)) {
-    internalPlacement = internalPlacement === 'left' ? 'right' : 'left';
-  }
-  var _useStyles = useStyles({
-      headerHeight: headerHeight,
-      showHandlerWideArea: showHandlerWideArea
-    }),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
-  var _useControlledState = useControlledState(defaultExpand, {
-      onChange: onExpandChange,
-      value: expand
-    }),
-    _useControlledState2 = _slicedToArray(_useControlledState, 2),
-    isExpand = _useControlledState2[0],
-    setIsExpand = _useControlledState2[1];
-  useEffect(function () {
-    if (pin) return;
-    if (isHovering && !isExpand) {
-      setIsExpand(true);
-    } else if (!isHovering && isExpand) {
-      setIsExpand(false);
-    }
-  }, [pin, isHovering, isExpand]);
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    showExpand = _useState2[0],
-    setShowExpand = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isResizing = _useState4[0],
-    setIsResizing = _useState4[1];
-  var canResizing = resize !== false && isExpand;
-  var resizeHandleClassNames = useMemo(function () {
-    if (!canResizing) return {};
-    return _defineProperty({}, reversePlacement(internalPlacement), styles["".concat(reversePlacement(internalPlacement), "Handle")]);
-  }, [canResizing, internalPlacement]);
-  var resizing = _objectSpread(_defineProperty({
-    bottom: false,
-    bottomLeft: false,
-    bottomRight: false,
-    left: false,
-    right: false,
-    top: false,
-    topLeft: false,
-    topRight: false
-  }, reversePlacement(internalPlacement), true), resize);
-  var defaultSize = useMemo(function () {
-    if (isVertical) return _objectSpread({
-      height: DEFAULT_HEIGHT,
-      width: '100%'
-    }, customizeDefaultSize);
-    return _objectSpread({
-      height: '100%',
-      width: DEFAULT_WIDTH
-    }, customizeDefaultSize);
-  }, [isVertical]);
-  var sizeProps = isExpand ? {
-    defaultSize: defaultSize,
-    maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : maxHeight,
-    maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : maxWidth,
-    minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : minHeight,
-    minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : minWidth,
-    size: size
-  } : isVertical ? {
-    minHeight: 0,
-    size: {
-      height: 0
-    }
-  } : {
-    minWidth: 0,
-    size: {
-      width: 0
-    }
-  };
-  var _useMemo = useMemo(function () {
-      switch (internalPlacement) {
-        case 'top':
-          {
-            return {
-              Arrow: ChevronDown,
-              className: 'Bottom'
-            };
-          }
-        case 'bottom':
-          {
-            return {
-              Arrow: ChevronUp,
-              className: 'Top'
-            };
-          }
-        case 'right':
-          {
-            return {
-              Arrow: ChevronLeft,
-              className: 'Left'
-            };
-          }
-        case 'left':
-          {
-            return {
-              Arrow: ChevronRight,
-              className: 'Right'
-            };
-          }
-      }
-    }, [styles, internalPlacement]),
-    Arrow = _useMemo.Arrow,
-    arrowPlacement = _useMemo.className;
-  var handler = /*#__PURE__*/_jsx(Center
-  // @ts-ignore
-  , {
-    className: cx(styles["toggle".concat(arrowPlacement)], classNames.handle),
-    style: {
-      opacity: isExpand ? pin ? undefined : 0 : showHandlerWhenUnexpand ? 1 : 0
-    },
-    children: /*#__PURE__*/_jsx(Center, {
-      onClick: function onClick() {
-        setIsExpand(!isExpand);
-      },
-      style: handlerStyle || hanlderStyle,
-      children: /*#__PURE__*/_jsx("div", {
-        className: styles.handlerIcon,
-        style: {
-          transform: "rotate(".concat(isExpand ? 180 : 0, "deg)")
-        },
-        children: /*#__PURE__*/_jsx(Arrow, {
-          size: 16,
-          strokeWidth: 1.5
-        })
-      })
-    })
-  });
-  var inner =
-  /*#__PURE__*/
-  // @ts-ignore
-  _jsx(Resizable, _objectSpread(_objectSpread({}, sizeProps), {}, {
-    className: cx(styles.panel, classNames.content),
-    enable: canResizing ? resizing : undefined,
-    handleClasses: resizeHandleClassNames,
-    onResize: function onResize(_, direction, reference_, delta) {
-      onSizeDragging === null || onSizeDragging === void 0 || onSizeDragging(delta, {
-        height: reference_.style.height,
-        width: reference_.style.width
-      });
-    },
-    onResizeStart: function onResizeStart() {
-      setIsResizing(true);
-      setShowExpand(false);
-    },
-    onResizeStop: function onResizeStop(e, direction, reference_, delta) {
-      setIsResizing(false);
-      setShowExpand(true);
-      onSizeChange === null || onSizeChange === void 0 || onSizeChange(delta, {
-        height: reference_.style.height,
-        width: reference_.style.width
-      });
-    },
-    style: _objectSpread({
-      transition: isResizing ? 'unset' : undefined
-    }, style),
-    children: children
-  }));
-  if (fullscreen) return /*#__PURE__*/_jsx("div", {
-    className: cx(styles.fullscreen, className),
-    children: children
-  });
-  return /*#__PURE__*/_jsxs("aside", {
-    className: cx(styles.container,
-    // @ts-ignore
-    styles[mode === 'fixed' ? 'fixed' : "".concat(internalPlacement, "Float")], className),
-    dir: dir,
-    ref: ref,
-    style: isExpand ? _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1) : {},
-    children: [expandable && showExpand && handler, destroyOnClose ? isExpand && inner : inner]
-  });
-});
-export default DraggablePanel;
+import DraggablePanelParent from "./DraggablePanel";
+import DraggablePanelBody from "./components/DraggablePanelBody";
+import DraggablePanelContainer from "./components/DraggablePanelContainer";
+import DraggablePanelFooter from "./components/DraggablePanelFooter";
+import DraggablePanelHeader from "./components/DraggablePanelHeader";
+var DraggablePanel = DraggablePanelParent;
+DraggablePanel.Body = DraggablePanelBody;
+DraggablePanel.Container = DraggablePanelContainer;
+DraggablePanel.Footer = DraggablePanelFooter;
+DraggablePanel.Header = DraggablePanelHeader;
+export default DraggablePanel;
+export { default as DraggablePanelBody } from "./components/DraggablePanelBody";
+export { default as DraggablePanelContainer } from "./components/DraggablePanelContainer";
+export { default as DraggablePanelFooter } from "./components/DraggablePanelFooter";
+export { default as DraggablePanelHeader } from "./components/DraggablePanelHeader";

package/es/DraggablePanel/style.d.ts

@@ -1,22 +1,28 @@
 export declare const useStyles: (props?: {
     headerHeight: number;
-    showHandlerWideArea: boolean;
+    showHandleWideArea: boolean;
 } | undefined) => import("antd-style").ReturnStyles<{
-    bottomFloat: string;
-    bottomHandle: string;
-    container: string;
     fixed: import("antd-style").SerializedStyles;
     fullscreen: import("antd-style").SerializedStyles;
     handlerIcon: import("antd-style").SerializedStyles;
-    leftFloat: string;
-    leftHandle: string;
     panel: string;
-    rightFloat: string;
-    rightHandle: string;
+    root: string;
     toggleBottom: string;
     toggleLeft: string;
     toggleRight: string;
+    toggleRoot: string;
     toggleTop: string;
+    handleBottom: string;
+    handleLeft: string;
+    handleRight: string;
+    handleRoot: import("antd-style").SerializedStyles;
+    handleTop: string;
+    bottomFloat: string;
+    leftFloat: string;
+    rightFloat: string;
     topFloat: string;
-    topHandle: string;
+    borderBottom: import("antd-style").SerializedStyles;
+    borderLeft: import("antd-style").SerializedStyles;
+    borderRight: import("antd-style").SerializedStyles;
+    borderTop: import("antd-style").SerializedStyles;
 }>;

package/es/DraggablePanel/style.js

@@ -1,34 +1,71 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles, css, cx } from 'antd-style';
-var offset = 16;
-var toggleLength = 40;
-var toggleShort = 16;
-var prefix = 'draggable-panel';
+
+// Layout constants
+var LAYOUT = {
+  offset: 16,
+  toggleLength: 40,
+  toggleShort: 16
+};
 export var useStyles = createStyles(function (_ref, _ref2) {
-  var token = _ref.token;
+  var prefixCls = _ref.prefixCls,
+    token = _ref.token,
+    stylish = _ref.stylish;
   var headerHeight = _ref2.headerHeight,
-    showHandlerWideArea = _ref2.showHandlerWideArea;
-  var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      &::before {\n        content: '';\n        position: absolute;\n        z-index: 50;\n        transition: all 0.2s ", ";\n      }\n\n      &:hover,\n      &:active {\n        &::before {\n          background: ", " !important;\n        }\n      }\n    "])), token.motionEaseOut, token.colorPrimary);
-  var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pointer-events: ", ";\n\n      position: absolute;\n      z-index: 10;\n\n      opacity: 0;\n\n      transition: all 0.2s ", ";\n\n      &:hover {\n        opacity: 1 !important;\n      }\n\n      &:active {\n        opacity: 1 !important;\n      }\n\n      > div {\n        pointer-events: all;\n        cursor: pointer;\n\n        position: absolute;\n\n        color: ", ";\n\n        background: ", ";\n        border-color: ", ";\n        border-style: solid;\n        border-width: 1px;\n        border-radius: 4px;\n\n        transition: all 0.2s ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:active {\n          color: ", ";\n          background: ", ";\n        }\n      }\n    "])), showHandlerWideArea ? 'all' : 'none', token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
-  var float = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 200;\n    "])));
-  return {
-    bottomFloat: cx(float, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          inset-block-end: 0;\n          inset-inline: 0 0;\n          width: 100%;\n        "])))),
-    bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          ", ";\n\n          &::before {\n            inset-block-end: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "])), commonHandle)),
-    container: cx(prefix, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          flex-shrink: 0;\n          border: 0 solid ", ";\n\n          &:hover {\n            .", "-toggle {\n              opacity: 1;\n            }\n          }\n        "])), token.colorBorderSecondary, prefix)),
-    fixed: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n      "]))),
-    fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block: ", "px 0;\n        inset-inline: 0;\n\n        width: 100%;\n        height: calc(100% - ", "px);\n\n        background: ", ";\n      "])), headerHeight, headerHeight, token.colorBgLayout),
-    handlerIcon: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ", ";\n      "])), token.motionEaseOut),
-    leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          inset-block: ", "px 0;\n          inset-inline-start: 0;\n          height: calc(100% - ", "px);\n        "])), headerHeight, headerHeight)),
-    leftHandle: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          ", ";\n\n          &::before {\n            inset-inline-start: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])), commonHandle), "".concat(prefix, "-left-handle")),
-    panel: cx("".concat(prefix, "-fixed"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          transition: all 0.2s ", ";\n        "])), token.motionEaseOut)),
-    rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          inset-block: ", "px 0;\n          inset-inline-end: 0;\n          height: calc(100% - ", "px);\n        "])), headerHeight, headerHeight)),
-    rightHandle: cx(css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n          ", ";\n          &::before {\n            inset-inline-end: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])), commonHandle), "".concat(prefix, "-right-handle")),
-    toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          inset-block-end: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: 16px;\n            margin-inline-start: -20px;\n\n            border-radius: 0 0 4px 4px;\n          }\n        "])), offset, toggleShort, toggleLength)),
-    toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          inset-inline-start: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -20px;\n\n            border-radius: 4px 0 0 4px;\n          }\n        "])), offset, toggleShort, toggleShort, toggleLength)),
-    toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          inset-inline-end: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -20px;\n\n            border-radius: 0 4px 4px 0;\n          }\n        "])), offset, toggleShort, toggleShort, toggleLength)),
-    toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n          inset-block-start: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-inline-start: -20px;\n\n            border-radius: 4px 4px 0 0;\n          }\n        "])), offset, toggleShort, toggleLength, toggleShort)),
-    topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n          inset-block-start: ", "px;\n          inset-inline: 0 0;\n          width: 100%;\n        "])), headerHeight)),
-    topHandle: cx("".concat(prefix, "-top-handle"), css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n          ", ";\n\n          &::before {\n            inset-block-start: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "])), commonHandle))
+    showHandleWideArea = _ref2.showHandleWideArea;
+  var prefix = "".concat(prefixCls, "-draggable-panel");
+
+  // Base styles
+  var borderStyles = {
+    borderBottom: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        border-block-end-width: 1px;\n      "]))),
+    borderLeft: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        border-inline-start-width: 1px;\n      "]))),
+    borderRight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        border-inline-end-width: 1px;\n      "]))),
+    borderTop: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        border-block-start-width: 1px;\n      "])))
   };
+
+  // Position styles
+  var float = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 200;\n    "])));
+  var floatPositions = {
+    bottomFloat: cx(float, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          inset-block-end: 0;\n          inset-inline: 0 0;\n          width: 100%;\n        "])))),
+    leftFloat: cx(float, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          inset-block: ", "px 0;\n          inset-inline-start: 0;\n          height: calc(100% - ", "px);\n        "])), headerHeight, headerHeight)),
+    rightFloat: cx(float, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          inset-block: ", "px 0;\n          inset-inline-end: 0;\n          height: calc(100% - ", "px);\n        "])), headerHeight, headerHeight)),
+    topFloat: cx(float, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          inset-block-start: ", "px;\n          inset-inline: 0 0;\n          width: 100%;\n        "])), headerHeight))
+  };
+
+  // Handle styles
+  var handleBaseStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      position: relative;\n\n      &::before {\n        content: '';\n        position: absolute;\n        z-index: 50;\n        transition: all 0.2s ", ";\n      }\n\n      &:hover,\n      &:active {\n        &::before {\n          background: ", " !important;\n        }\n      }\n    "])), token.motionEaseOut, token.colorPrimary);
+  var handleStyles = {
+    handleBottom: cx("".concat(prefix, "-bottom-handle"), css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          &::before {\n            inset-block-end: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "])))),
+    handleLeft: cx("".concat(prefix, "-left-handle"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          &::before {\n            inset-inline-start: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])))),
+    handleRight: cx("".concat(prefix, "-right-handle"), css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          &::before {\n            inset-inline-end: 50%;\n            width: 2px;\n            height: 100%;\n          }\n        "])))),
+    handleRoot: handleBaseStyle,
+    handleTop: cx("".concat(prefix, "-top-handle"), css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n          &::before {\n            inset-block-start: 50%;\n            width: 100%;\n            height: 2px;\n          }\n        "]))))
+  };
+
+  // Toggle styles
+  var toggleBaseStyle = cx("".concat(prefix, "-toggle"), css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        pointer-events: ", ";\n\n        position: absolute;\n        z-index: 10;\n\n        opacity: 0;\n\n        transition: all 0.2s ", ";\n\n        &:hover,\n        &:active {\n          opacity: 1 !important;\n        }\n\n        > div {\n          ", ";\n          pointer-events: all;\n          cursor: pointer;\n\n          position: absolute;\n\n          color: ", ";\n\n          transition: all 0.2s ", ";\n\n          &:hover {\n            color: ", ";\n          }\n\n          &:active {\n            color: ", ";\n          }\n        }\n      "])), showHandleWideArea ? 'all' : 'none', token.motionEaseOut, stylish.variantFilled, token.colorTextTertiary, token.motionEaseOut, token.colorTextSecondary, token.colorText));
+  var toggleStyles = {
+    toggleBottom: cx("".concat(prefix, "-toggle-bottom"), css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          inset-block-end: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-inline-start: -20px;\n            border-radius: 0 0 4px 4px;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleShort)),
+    toggleLeft: cx("".concat(prefix, "-toggle-left"), css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          inset-inline-start: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -20px;\n            border-radius: 4px 0 0 4px;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength)),
+    toggleRight: cx("".concat(prefix, "-toggle-right"), css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n          inset-inline-end: -", "px;\n          width: ", "px;\n          height: 100%;\n\n          > div {\n            inset-block-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-block-start: -20px;\n            border-radius: 0 4px 4px 0;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleShort, LAYOUT.toggleLength)),
+    toggleRoot: toggleBaseStyle,
+    toggleTop: cx("".concat(prefix, "-toggle-top"), css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n          inset-block-start: -", "px;\n          width: 100%;\n          height: ", "px;\n\n          > div {\n            inset-inline-start: 50%;\n\n            width: ", "px;\n            height: ", "px;\n            margin-inline-start: -20px;\n            border-radius: 4px 4px 0 0;\n          }\n        "])), LAYOUT.offset, LAYOUT.toggleShort, LAYOUT.toggleLength, LAYOUT.toggleShort))
+  };
+
+  // Additional component styles
+  var componentStyles = {
+    fixed: css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n        position: relative;\n      "]))),
+    fullscreen: css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block: ", "px 0;\n        inset-inline: 0;\n\n        width: 100%;\n        height: calc(100% - ", "px);\n\n        background: ", ";\n      "])), headerHeight, headerHeight, token.colorBgContainerSecondary),
+    handlerIcon: css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n        transition: all 0.2s ", ";\n      "])), token.motionEaseOut),
+    panel: cx("".concat(prefix, "-fixed"), css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          transition: all 0.2s ", ";\n        "])), token.motionEaseOut)),
+    root: cx(prefix, css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n          flex-shrink: 0;\n          border: 0 solid ", ";\n\n          &:hover {\n            > .", "-toggle {\n              opacity: 1;\n            }\n          }\n        "])), token.colorBorderSecondary, prefix))
+  };
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, borderStyles), floatPositions), handleStyles), toggleStyles), componentStyles);
 });