@lobehub/ui/es/DraggablePanel/style.js

Lobe UI is an open-source UI component library for building AIGC web apps

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';

// Layout constants
var LAYOUT = {
  offset: 16,
  toggleLength: 40,
  toggleShort: 16
};
export var useStyles = createStyles(function (_ref, _ref2) {
  var prefixCls = _ref.prefixCls,
    token = _ref.token,
    stylish = _ref.stylish;
  var headerHeight = _ref2.headerHeight,
    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);
});