@lobehub/ui 1.170.4 → 1.170.6

package/es/ColorSwatches/index.js

@@ -16,6 +16,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { ColorPicker } from 'antd';
+import chroma from 'chroma-js';
 import { CheckIcon } from 'lucide-react';
 import { readableColor, rgba } from 'polished';
 import { memo } from 'react';
@@ -57,7 +58,7 @@ var ColorSwatches = /*#__PURE__*/memo(function (_ref) {
     return c.color === active;
   });
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
-    gap: 4,
+    gap: 6,
     horizontal: true,
     style: _objectSpread({
       flexWrap: 'wrap'
@@ -66,15 +67,16 @@ var ColorSwatches = /*#__PURE__*/memo(function (_ref) {
     children: [enableColorSwatches && colors.map(function (c) {
       var color = c.color || theme.colorPrimary;
       var isActive = !active && !c.color || color === active;
+      var isTransparent = c.color === 'transparent' || chroma(c.color).alpha() === 0;
       return /*#__PURE__*/_jsx(Tooltip, {
         title: c.label,
         children: /*#__PURE__*/_jsx(Center, {
-          className: cx(styles.container, isActive && styles.active),
+          className: cx(styles.container, isTransparent && styles.transparent, isActive && styles.active),
           onClick: function onClick() {
             return setActive(c.color || undefined);
           },
           style: {
-            background: color,
+            background: isTransparent ? undefined : color,
             borderRadius: shape === 'circle' ? '50%' : theme.borderRadius
           },
           children: isActive && /*#__PURE__*/_jsx(Icon, {

package/es/ColorSwatches/style.d.ts

@@ -3,4 +3,5 @@ export declare const useStyles: (props?: number | undefined) => import("antd-sty
     conic: import("antd-style").SerializedStyles;
     container: import("antd-style").SerializedStyles;
     picker: import("antd-style").SerializedStyles;
+    transparent: import("antd-style").SerializedStyles;
 }>;

package/es/ColorSwatches/style.js

@@ -1,4 +1,4 @@
-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, size) {
@@ -6,9 +6,10 @@ export var useStyles = createStyles(function (_ref, size) {
     token = _ref.token,
     prefixCls = _ref.prefixCls;
   return {
-    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 20%);\n    "]))),
+    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), token.colorFill),
     conic: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: conic-gradient(\n        ", ",\n        ", ",\n        ", ",\n        ", ",\n        ", ",\n        ", ",\n        ", ",\n        ", ",\n        ", ",\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      .", "-color-picker-color-block {\n        opacity: 0;\n      }\n    "])), token.red, token.volcano, token.orange, token.gold, token.yellow, token.lime, token.green, token.cyan, token.blue, token.geekblue, token.purple, token.magenta, token.red, prefixCls),
-    container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      flex: none;\n\n      width: ", "px;\n      min-width: ", "px;\n      height: ", "px;\n      min-height: ", "px;\n\n      background: ", ";\n      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 5%);\n\n      &:hover {\n        box-shadow:\n          inset 0 0 0 1px rgba(0, 0, 0, 5%),\n          0 0 0 2px ", ";\n      }\n    "])), size, size, size, size, token.colorBgContainer, token.colorText),
-    picker: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      flex: none;\n\n      width: ", "px;\n      min-width: ", "px;\n      height: ", "px;\n      min-height: ", "px;\n      padding: 0;\n\n      border: none;\n      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 5%);\n\n      &:hover {\n        box-shadow:\n          inset 0 0 0 1px rgba(0, 0, 0, 5%),\n          0 0 0 2px ", ";\n      }\n\n      .", "-color-picker-color-block {\n        width: 100%;\n        height: 100%;\n        border: none;\n        border-radius: inherit;\n      }\n    "])), size, size, size, size, token.colorText, prefixCls)
+    container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      flex: none;\n\n      width: ", "px;\n      min-width: ", "px;\n      height: ", "px;\n      min-height: ", "px;\n\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n\n      &:hover {\n        box-shadow:\n          inset 0 0 0 1px rgba(0, 0, 0, 5%),\n          0 0 0 2px ", ";\n      }\n    "])), size, size, size, size, token.colorBgContainer, token.colorFillSecondary, token.colorText),
+    picker: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      flex: none;\n\n      width: ", "px;\n      min-width: ", "px;\n      height: ", "px;\n      min-height: ", "px;\n      padding: 0;\n\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      &:hover {\n        box-shadow:\n          inset 0 0 0 1px ", ",\n          0 0 0 2px ", ";\n      }\n\n      .", "-color-picker-color-block {\n        width: 100%;\n        height: 100%;\n        border: none;\n        border-radius: inherit;\n      }\n    "])), size, size, size, size, token.colorFillSecondary, token.colorFillSecondary, token.colorText, prefixCls),
+    transparent: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background-image: conic-gradient(\n        ", " 25%,\n        transparent 25% 50%,\n        ", " 50% 75%,\n        transparent 75% 100%\n      );\n      background-size: 50% 50%;\n    "])), token.colorFillSecondary, token.colorFillSecondary)
   };
 });

package/es/Drawer/index.d.ts

@@ -1,11 +1,15 @@
 import { type DrawerProps as AntdDrawerProps } from 'antd';
 import { CSSProperties, ReactNode } from 'react';
+import { type ActionIconProps } from "../ActionIcon";
 export interface DrawerProps extends Omit<AntdDrawerProps, 'styles' | 'classNames'> {
     classNames?: AntdDrawerProps['classNames'] & {
         bodyContent?: string;
         extra?: string;
+        sidebar?: string;
+        sidebarContent?: string;
         title?: string;
     };
+    closeIconProps?: ActionIconProps;
     containerMaxWidth?: number;
     noHeader?: boolean;
     sidebar?: ReactNode;
@@ -13,6 +17,8 @@ export interface DrawerProps extends Omit<AntdDrawerProps, 'styles' | 'className
     styles?: AntdDrawerProps['styles'] & {
         bodyContent?: CSSProperties;
         extra?: CSSProperties;
+        sidebar?: CSSProperties;
+        sidebarContent?: CSSProperties;
         title?: CSSProperties;
     };
 }

package/es/Drawer/index.js

@@ -1,7 +1,7 @@
 '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); }
-var _excluded = ["onClose", "containerMaxWidth", "classNames", "title", "placement", "styles", "children", "height", "width", "extra", "noHeader", "sidebarWidth", "sidebar"];
+var _excluded = ["onClose", "containerMaxWidth", "classNames", "title", "placement", "styles", "children", "height", "width", "extra", "closeIconProps", "noHeader", "sidebarWidth", "sidebar", "closeIcon"];
 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; }
@@ -30,10 +30,12 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
     height = _ref.height,
     width = _ref.width,
     extra = _ref.extra,
+    closeIconProps = _ref.closeIconProps,
     noHeader = _ref.noHeader,
     _ref$sidebarWidth = _ref.sidebarWidth,
     sidebarWidth = _ref$sidebarWidth === void 0 ? 280 : _ref$sidebarWidth,
     sidebar = _ref.sidebar,
+    closeIcon = _ref.closeIcon,
     rest = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var headerBorder = useMemo(function () {
@@ -80,11 +82,11 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
       right: 4,
       top: 4
     }, styles === null || styles === void 0 ? void 0 : styles.extra),
-    children: [extra, /*#__PURE__*/_jsx(ActionIcon, {
+    children: [extra, closeIcon || /*#__PURE__*/_jsx(ActionIcon, _objectSpread({
       icon: XIcon,
       onClick: onClose,
       size: 'site'
-    })]
+    }, closeIconProps))]
   });
   return /*#__PURE__*/_jsx(AntdDrawer, _objectSpread(_objectSpread({
     classNames: classNames,
@@ -140,23 +142,29 @@ var Drawer = /*#__PURE__*/memo(function (_ref) {
       }, styles === null || styles === void 0 ? void 0 : styles.bodyContent),
       children: [noHeader && extraNode, sidebar ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Flexbox, {
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.sidebar,
           paddingBlock: 12,
           paddingInline: 16,
-          style: {
+          style: _objectSpread({
             background: theme.colorBgContainer,
             borderRight: "1px solid ".concat(theme.colorBorderSecondary),
-            height: '100%'
-          },
+            height: '100%',
+            overflowX: 'hidden',
+            overflowY: 'auto'
+          }, styles === null || styles === void 0 ? void 0 : styles.sidebar),
           width: sidebarWidth,
           children: sidebar
         }), /*#__PURE__*/_jsx(Flexbox, {
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.sidebarContent,
           flex: 1,
           paddingBlock: 12,
           paddingInline: 16,
-          style: {
+          style: _objectSpread({
             background: theme.colorBgLayout,
-            height: '100%'
-          },
+            height: '100%',
+            overflowX: 'hidden',
+            overflowY: 'auto'
+          }, styles === null || styles === void 0 ? void 0 : styles.sidebarContent),
           children: children
         })]
       }) : children]

package/es/Form/components/FormSubmitFooter.d.ts

@@ -9,10 +9,10 @@ export interface FormSubmitFooterProps extends FlexboxProps {
     float?: boolean;
     onReset?: () => void;
     resetButtonProps?: Omit<ButtonProps, 'children'>;
-    resetText?: ReactNode;
     saveButtonProps?: Omit<ButtonProps, 'children'>;
-    saveText?: ReactNode;
     texts?: {
+        reset?: string;
+        submit?: string;
         unSaved?: string;
         unSavedWarning?: string;
     };

package/es/Form/components/FormSubmitFooter.js

@@ -1,5 +1,5 @@
 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 _excluded = ["enableReset", "buttonProps", "float", "saveText", "resetText", "onReset", "saveButtonProps", "resetButtonProps", "enableUnsavedWarning", "children", "texts", "className"];
+var _excluded = ["enableReset", "buttonProps", "float", "onReset", "saveButtonProps", "resetButtonProps", "enableUnsavedWarning", "children", "texts", "className"];
 var _templateObject, _templateObject2;
 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; }
@@ -42,10 +42,6 @@ var FormSubmitFooter = /*#__PURE__*/memo(function (_ref2) {
     enableReset = _ref2$enableReset === void 0 ? true : _ref2$enableReset,
     buttonProps = _ref2.buttonProps,
     float = _ref2.float,
-    _ref2$saveText = _ref2.saveText,
-    saveText = _ref2$saveText === void 0 ? 'Submit' : _ref2$saveText,
-    _ref2$resetText = _ref2.resetText,
-    resetText = _ref2$resetText === void 0 ? 'Reset' : _ref2$resetText,
     onReset = _ref2.onReset,
     saveButtonProps = _ref2.saveButtonProps,
     resetButtonProps = _ref2.resetButtonProps,
@@ -119,14 +115,14 @@ var FormSubmitFooter = /*#__PURE__*/memo(function (_ref2) {
       shape: float ? 'round' : undefined,
       variant: 'filled'
     }, buttonProps), resetButtonProps), {}, {
-      children: resetText
+      children: (texts === null || texts === void 0 ? void 0 : texts.reset) || 'Reset'
     })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread({
       htmlType: "submit",
       loading: submitLoading,
       shape: float ? 'round' : undefined,
       type: "primary"
     }, buttonProps), saveButtonProps), {}, {
-      children: saveText
+      children: (texts === null || texts === void 0 ? void 0 : texts.submit) || 'Submit'
     }))]
   });
   if (!float) return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.170.4",
+  "version": "1.170.6",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",