one-design-next 0.0.30 → 0.0.32
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.
- package/dist/composer/index.d.ts +11 -0
- package/dist/composer/index.js +10 -0
- package/dist/composer/style/index.css +2 -1
- package/dist/date-picker/index.js +3 -2
- package/dist/skill-slot/index.d.ts +11 -0
- package/dist/skill-slot/index.js +36 -2
- package/dist/skill-slot/style/index.css +13 -0
- package/package.json +1 -1
package/dist/composer/index.d.ts
CHANGED
|
@@ -104,6 +104,17 @@ export interface ComposerProps {
|
|
|
104
104
|
toolsLabeled?: boolean;
|
|
105
105
|
/** 技能列表;当 tools 包含 'skill' 时生效 */
|
|
106
106
|
skills?: SkillItem[];
|
|
107
|
+
/**
|
|
108
|
+
* skill 弹窗列表的最大高度(px)。超出此高度后出现滚动条。
|
|
109
|
+
* 不传则不限高(适合 skill 较少的场景)。
|
|
110
|
+
* @default undefined(不限高)
|
|
111
|
+
*/
|
|
112
|
+
skillMenuMaxHeight?: number;
|
|
113
|
+
/**
|
|
114
|
+
* skill 弹窗的宽度(px)。影响弹窗整体宽度(即每行 item 的宽度)。
|
|
115
|
+
* @default 260
|
|
116
|
+
*/
|
|
117
|
+
skillMenuWidth?: number;
|
|
107
118
|
/**
|
|
108
119
|
* 提交模式:
|
|
109
120
|
* - `'enter'`(默认):Enter 发送,Shift+Enter 换行
|
package/dist/composer/index.js
CHANGED
|
@@ -66,6 +66,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
66
66
|
_ref$toolsLabeled = _ref.toolsLabeled,
|
|
67
67
|
toolsLabeled = _ref$toolsLabeled === void 0 ? true : _ref$toolsLabeled,
|
|
68
68
|
skills = _ref.skills,
|
|
69
|
+
skillMenuMaxHeight = _ref.skillMenuMaxHeight,
|
|
70
|
+
skillMenuWidth = _ref.skillMenuWidth,
|
|
69
71
|
_ref$submitType = _ref.submitType,
|
|
70
72
|
submitType = _ref$submitType === void 0 ? 'enter' : _ref$submitType,
|
|
71
73
|
onEnter = _ref.onEnter,
|
|
@@ -634,6 +636,10 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
634
636
|
popup: /*#__PURE__*/React.createElement(SkillSlot, {
|
|
635
637
|
variant: "menu",
|
|
636
638
|
skills: skills,
|
|
639
|
+
menuMaxHeight: skillMenuMaxHeight,
|
|
640
|
+
style: {
|
|
641
|
+
width: skillMenuWidth !== null && skillMenuWidth !== void 0 ? skillMenuWidth : 260
|
|
642
|
+
},
|
|
637
643
|
onSelect: function onSelect(s) {
|
|
638
644
|
return handleSelectSkill(s, 'btn');
|
|
639
645
|
}
|
|
@@ -851,6 +857,10 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
|
|
|
851
857
|
skills: filteredSkills !== null && filteredSkills !== void 0 ? filteredSkills : [],
|
|
852
858
|
activeIndex: triggerActiveIndex,
|
|
853
859
|
onActiveIndexChange: setTriggerActiveIndex,
|
|
860
|
+
menuMaxHeight: skillMenuMaxHeight,
|
|
861
|
+
style: {
|
|
862
|
+
width: skillMenuWidth !== null && skillMenuWidth !== void 0 ? skillMenuWidth : 260
|
|
863
|
+
},
|
|
854
864
|
onSelect: function onSelect(s) {
|
|
855
865
|
return handleSelectSkill(s, 'trigger');
|
|
856
866
|
}
|
|
@@ -303,7 +303,8 @@
|
|
|
303
303
|
|
|
304
304
|
[data-odn-popup][data-type=popover] [data-odn-popup-content].odn-composer-skill-popup {
|
|
305
305
|
padding: 0;
|
|
306
|
-
width
|
|
306
|
+
/* 覆盖全局 --odn-popup-max-width(250px),宽度完全由 SkillSlot 的 style.width 决定 */
|
|
307
|
+
--odn-popup-max-width: none;
|
|
307
308
|
border-radius: 6px;
|
|
308
309
|
overflow: hidden;
|
|
309
310
|
}
|
|
@@ -130,8 +130,9 @@ var DatePicker = function DatePicker(props) {
|
|
|
130
130
|
if (isSameDay(maxDateProp, thisQuarterEnd)) {
|
|
131
131
|
return thisQuarterEnd;
|
|
132
132
|
}
|
|
133
|
-
|
|
134
|
-
|
|
133
|
+
// 上一季度末 = 当前季度起始月的前一天,避免直接 setMonth(-3) 时
|
|
134
|
+
// 保留 day 数导致 Q2→Q1(30 vs 31) 或 Q4→Q3(31 溢出 Oct 1) 等错误
|
|
135
|
+
var prevQuarterEnd = new Date(thisQuarterEnd.getFullYear(), thisQuarterEnd.getMonth() - 2, 0);
|
|
135
136
|
return prevQuarterEnd;
|
|
136
137
|
}
|
|
137
138
|
if (picker === 'month') {
|
|
@@ -19,6 +19,17 @@ export interface SkillSlotProps {
|
|
|
19
19
|
*/
|
|
20
20
|
activeIndex?: number;
|
|
21
21
|
onActiveIndexChange?: (index: number) => void;
|
|
22
|
+
/**
|
|
23
|
+
* menu 变体:超出此高度后出现滚动条。
|
|
24
|
+
* 不传则不限高。单位 px。
|
|
25
|
+
* @default undefined(不限高)
|
|
26
|
+
*/
|
|
27
|
+
menuMaxHeight?: number;
|
|
28
|
+
/**
|
|
29
|
+
* bar / card 变体:每个 skill 块的固定宽度(px)。
|
|
30
|
+
* 不传则保持默认布局宽度。
|
|
31
|
+
*/
|
|
32
|
+
itemWidth?: number;
|
|
22
33
|
className?: string;
|
|
23
34
|
style?: React.CSSProperties;
|
|
24
35
|
}
|
package/dist/skill-slot/index.js
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
var _excluded = ["width"];
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
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; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
|
+
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); }
|
|
8
|
+
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; }
|
|
9
|
+
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; }
|
|
1
10
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
11
|
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."); }
|
|
3
12
|
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); }
|
|
@@ -24,6 +33,8 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
|
|
|
24
33
|
onSelect = _ref.onSelect,
|
|
25
34
|
activeIndex = _ref.activeIndex,
|
|
26
35
|
onActiveIndexChange = _ref.onActiveIndexChange,
|
|
36
|
+
menuMaxHeight = _ref.menuMaxHeight,
|
|
37
|
+
itemWidth = _ref.itemWidth,
|
|
27
38
|
className = _ref.className,
|
|
28
39
|
style = _ref.style;
|
|
29
40
|
/* menu 变体:HoverFill 完全只管鼠标交互(命令式状态机,不变);键盘 ↑↓
|
|
@@ -164,7 +175,18 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
|
|
|
164
175
|
setInternalActiveIndex(-1);
|
|
165
176
|
};
|
|
166
177
|
if (skills.length === 0) return null;
|
|
167
|
-
|
|
178
|
+
|
|
179
|
+
/* menu variant 有 scroll-wrap 时,width 挂在外层 scroll-wrap 上;
|
|
180
|
+
* 没有 scroll-wrap 时 width 留在 list div 上。
|
|
181
|
+
* 这里把 style 拆成两部分:widthStyle 单独提取,listStyle 是其余属性。 */
|
|
182
|
+
var hasScrollWrap = variant === 'menu' && menuMaxHeight != null;
|
|
183
|
+
var _ref2 = style !== null && style !== void 0 ? style : {},
|
|
184
|
+
styleWidth = _ref2.width,
|
|
185
|
+
listStyleRest = _objectWithoutProperties(_ref2, _excluded);
|
|
186
|
+
var widthStyle = styleWidth != null ? {
|
|
187
|
+
width: styleWidth
|
|
188
|
+
} : {};
|
|
189
|
+
var listContent = /*#__PURE__*/React.createElement("div", {
|
|
168
190
|
"data-odn-skill-slot": true,
|
|
169
191
|
"data-odn-skill-slot-variant": variant,
|
|
170
192
|
id: variant === 'menu' ? listboxId : undefined,
|
|
@@ -175,7 +197,9 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
|
|
|
175
197
|
onFocus: variant === 'menu' ? handleMenuFocus : undefined,
|
|
176
198
|
onBlur: variant === 'menu' ? handleMenuBlur : undefined,
|
|
177
199
|
className: className,
|
|
178
|
-
style: style
|
|
200
|
+
style: _objectSpread(_objectSpread({}, hasScrollWrap ? listStyleRest : style), variant !== 'menu' && itemWidth != null ? {
|
|
201
|
+
'--odn-skill-slot-item-width': "".concat(itemWidth, "px")
|
|
202
|
+
} : {})
|
|
179
203
|
}, skills.map(function (skill, index) {
|
|
180
204
|
var active = value === skill.id;
|
|
181
205
|
var highlighted = currentIndex === index;
|
|
@@ -289,6 +313,16 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
|
|
|
289
313
|
}
|
|
290
314
|
return barButton;
|
|
291
315
|
}));
|
|
316
|
+
if (hasScrollWrap) {
|
|
317
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
318
|
+
"data-odn-skill-slot-scroll-wrap": true,
|
|
319
|
+
style: _objectSpread({
|
|
320
|
+
maxHeight: menuMaxHeight,
|
|
321
|
+
overflowY: 'auto'
|
|
322
|
+
}, widthStyle)
|
|
323
|
+
}, listContent);
|
|
324
|
+
}
|
|
325
|
+
return listContent;
|
|
292
326
|
});
|
|
293
327
|
SkillSlot.displayName = 'SkillSlot';
|
|
294
328
|
export default SkillSlot;
|
|
@@ -19,6 +19,19 @@
|
|
|
19
19
|
border-radius: 0;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
/* ---- menu 滚动包装层 ----
|
|
23
|
+
* max-height 由外部通过 style 传入;overflow-y: auto 由 JS 内联写入。
|
|
24
|
+
* 统一细滚动条样式,并继承 popup 圆角裁剪。 */
|
|
25
|
+
[data-odn-skill-slot-scroll-wrap] {
|
|
26
|
+
overflow-y: auto;
|
|
27
|
+
scrollbar-width: thin;
|
|
28
|
+
scrollbar-color: var(--odn-color-border) transparent;
|
|
29
|
+
/* 内层 list 撑满 scroll-wrap 宽度 */
|
|
30
|
+
}
|
|
31
|
+
[data-odn-skill-slot-scroll-wrap] > [data-odn-skill-slot] {
|
|
32
|
+
width: 100%;
|
|
33
|
+
}
|
|
34
|
+
|
|
22
35
|
/* ---- variant: menu ---- */
|
|
23
36
|
[data-odn-skill-slot][data-odn-skill-slot-variant=menu] {
|
|
24
37
|
display: flex;
|