@lobehub/ui 1.81.0 → 1.81.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/es/Form/components/style.js +3 -2
  2. package/es/MobileNavBar/index.js +1 -1
  3. package/es/MobileNavBar/style.js +1 -1
  4. package/es/MobileSafeArea/style.js +1 -1
  5. package/es/MobileTabBar/index.js +10 -8
  6. package/es/MobileTabBar/style.js +1 -1
  7. package/es/Swatches/index.js +3 -0
  8. package/package.json +1 -1
package/es/Form/components/style.js CHANGED
@@ -6,13 +6,14 @@ export var useStyles = createStyles(function (_ref, itemMinWidth) {
6
6
  var css = _ref.css,
7
7
  cx = _ref.cx,
8
8
  token = _ref.token,
9
- isDarkMode = _ref.isDarkMode;
9
+ isDarkMode = _ref.isDarkMode,
10
+ responsive = _ref.responsive;
10
11
  return {
11
12
  footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n "]))),
12
13
  formTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n\n display: flex;\n flex-direction: column;\n gap: 6px;\n\n text-align: left;\n\n > div {\n font-weight: 500;\n line-height: 1;\n }\n\n > small {\n display: block;\n\n line-height: 1;\n color: ", ";\n word-wrap: break-word;\n white-space: pre-wrap;\n }\n\n .ant-tag {\n font-family: ", ";\n }\n "])), token.colorTextDescription, token.fontFamilyCode),
13
14
  group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .ant-collapse-content {\n background: transparent;\n }\n\n .ant-collapse-header {\n background: ", ";\n }\n "])), token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .ant-collapse-header {\n align-items: center !important;\n border-radius: 0 !important;\n }\n\n .ant-collapse-content-box {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n }\n\n .ant-form-item-label {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n "])))),
14
15
  icon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n transition: all 100ms ", ";\n "])), token.motionEaseOut),
15
- item: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: 8px 0;\n\n .ant-row {\n justify-content: space-between;\n\n > div {\n flex: unset !important;\n flex-grow: unset !important;\n }\n }\n\n ", "\n "])), itemMinWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n .ant-form-item-control {\n width: ", ";\n }\n "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth)),
16
+ item: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: 8px 0;\n\n .ant-row {\n justify-content: space-between;\n\n > div {\n flex: unset !important;\n flex-grow: unset !important;\n }\n }\n\n ", "\n\n ", " {\n padding: 16px 0;\n\n .ant-row {\n flex-direction: column;\n gap: 4px;\n }\n\n .ant-form-item-control {\n flex: 1;\n width: 100%;\n }\n }\n "])), itemMinWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n .ant-form-item-control {\n width: ", ";\n }\n "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth), responsive.mobile),
16
17
  title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n gap: 8px;\n align-items: center;\n\n font-size: 16px;\n font-weight: 600;\n\n .anticon {\n color: ", ";\n }\n "])), token.colorPrimary)
17
18
  };
18
19
  });
package/es/MobileNavBar/index.js CHANGED
@@ -26,7 +26,7 @@ var MobileNavBar = /*#__PURE__*/memo(function (_ref) {
26
26
  className: cx(styles.container, className),
27
27
  style: style,
28
28
  children: [safeArea && /*#__PURE__*/_jsx(MobileSafeArea, {
29
- position: 'bottom'
29
+ position: 'top'
30
30
  }), /*#__PURE__*/_jsxs(Flexbox, {
31
31
  align: 'center',
32
32
  className: styles.inner,
package/es/MobileNavBar/style.js CHANGED
@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref) {
9
9
  stylish = _ref.stylish;
10
10
  return {
11
11
  center: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 100%;\n "]))),
12
- container: cx(stylish.blurStrong, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: 0;\n\n width: 100vw;\n\n background: linear-gradient(\n to bottom,\n ", ",\n ", "\n );\n border-bottom: 1px solid ", ";\n "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4), token.colorBorder)),
12
+ container: cx(stylish.blurStrong, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: none;\n\n width: 100vw;\n\n background: linear-gradient(\n to bottom,\n ", ",\n ", "\n );\n border-bottom: 1px solid ", ";\n "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4), token.colorBorder)),
13
13
  inner: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n\n width: 100%;\n height: 44px;\n min-height: 44px;\n max-height: 44px;\n padding: 0 6px;\n "]))),
14
14
  left: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n justify-content: flex-start;\n height: 100%;\n "]))),
15
15
  right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n justify-content: flex-end;\n height: 100%;\n "])))
package/es/MobileSafeArea/style.js CHANGED
@@ -5,7 +5,7 @@ export var useStyles = createStyles(function (_ref) {
5
5
  var css = _ref.css;
6
6
  return {
7
7
  bottom: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding-bottom: env(safe-area-inset-bottom);\n "]))),
8
- container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: 0;\n width: 100vw;\n "]))),
8
+ container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: none;\n width: 100vw;\n "]))),
9
9
  top: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding-top: env(safe-area-inset-top);\n "])))
10
10
  };
11
11
  });
package/es/MobileTabBar/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
- import { memo, useEffect, useState } from 'react';
2
+ import { memo } from 'react';
3
3
  import { Flexbox } from 'react-layout-kit';
4
+ import useControlledState from 'use-merge-value';
4
5
  import MobileSafeArea from "../MobileSafeArea";
5
6
  import { useStyles } from "./style";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,16 +15,17 @@ var MobileTabBar = /*#__PURE__*/memo(function (_ref) {
14
15
  activeKey = _ref.activeKey,
15
16
  defaultActiveKey = _ref.defaultActiveKey,
16
17
  onChange = _ref.onChange;
17
- var _useState = useState(activeKey || defaultActiveKey || items[0].key),
18
- _useState2 = _slicedToArray(_useState, 2),
19
- currentActive = _useState2[0],
20
- setCurrentActive = _useState2[1];
18
+ var _useControlledState = useControlledState(defaultActiveKey || items[0].key, {
19
+ defaultValue: defaultActiveKey,
20
+ onChange: onChange,
21
+ value: activeKey
22
+ }),
23
+ _useControlledState2 = _slicedToArray(_useControlledState, 2),
24
+ currentActive = _useControlledState2[0],
25
+ setCurrentActive = _useControlledState2[1];
21
26
  var _useStyles = useStyles(),
22
27
  styles = _useStyles.styles,
23
28
  cx = _useStyles.cx;
24
- useEffect(function () {
25
- onChange === null || onChange === void 0 ? void 0 : onChange(currentActive);
26
- }, [currentActive]);
27
29
  return /*#__PURE__*/_jsxs(Flexbox, {
28
30
  className: cx(styles.container, className),
29
31
  style: style,
package/es/MobileTabBar/style.js CHANGED
@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref) {
9
9
  stylish = _ref.stylish;
10
10
  return {
11
11
  active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n "])), token.colorPrimary),
12
- container: cx(stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: 0;\n\n width: 100vw;\n\n background: ", ";\n border-top: 1px solid ", ";\n "])), rgba(token.colorBgContainer, 0.5), token.colorBorder)),
12
+ container: cx(stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: none;\n\n width: 100vw;\n\n background: ", ";\n border-top: 1px solid ", ";\n "])), rgba(token.colorBgContainer, 0.5), token.colorBorder)),
13
13
  icon: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n font-size: 24px;\n "]))),
14
14
  inner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 48px;\n "]))),
15
15
  tab: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n cursor: pointer;\n\n width: 48px;\n height: 48px;\n padding-top: env(safe-area-inset-top);\n\n color: ", ";\n "])), token.colorTextSecondary),
package/es/Swatches/index.js CHANGED
@@ -17,6 +17,9 @@ var Swatches = /*#__PURE__*/memo(function (_ref) {
17
17
  return /*#__PURE__*/_jsxs(Flexbox, {
18
18
  gap: 8,
19
19
  horizontal: true,
20
+ style: {
21
+ flexWrap: 'wrap'
22
+ },
20
23
  children: [/*#__PURE__*/_jsx(Flexbox, {
21
24
  className: cx(styles.container, !activeColor && styles.active),
22
25
  onClick: function onClick() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "1.81.0",
3
+ "version": "1.81.1",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",