wssf-kage-ui 0.1.1 → 0.1.2

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 (179) hide show
  1. package/dist/cjs/Avatar/index.d.ts +47 -0
  2. package/dist/cjs/Avatar/index.js +147 -0
  3. package/dist/cjs/Avatar/style.less +193 -0
  4. package/dist/cjs/Badge/index.d.ts +48 -0
  5. package/dist/cjs/Badge/index.js +141 -0
  6. package/dist/cjs/Badge/style.less +237 -0
  7. package/dist/cjs/Calendar/index.d.ts +33 -0
  8. package/dist/cjs/Calendar/index.js +296 -0
  9. package/dist/cjs/Calendar/style.less +384 -0
  10. package/dist/cjs/Card/index.d.ts +68 -0
  11. package/dist/cjs/Card/index.js +155 -0
  12. package/dist/cjs/Card/style.less +356 -0
  13. package/dist/cjs/Carousel/index.d.ts +33 -0
  14. package/dist/cjs/Carousel/index.js +169 -0
  15. package/dist/cjs/Carousel/style.less +232 -0
  16. package/dist/cjs/Collapse/index.d.ts +55 -0
  17. package/dist/cjs/Collapse/index.js +191 -0
  18. package/dist/cjs/Collapse/style.less +217 -0
  19. package/dist/cjs/Descriptions/index.d.ts +54 -0
  20. package/dist/cjs/Descriptions/index.js +181 -0
  21. package/dist/cjs/Descriptions/style.less +259 -0
  22. package/dist/cjs/Empty/index.d.ts +21 -0
  23. package/dist/cjs/Empty/index.js +115 -0
  24. package/dist/cjs/Empty/style.less +103 -0
  25. package/dist/cjs/Image/index.d.ts +30 -0
  26. package/dist/cjs/Image/index.js +153 -0
  27. package/dist/cjs/Image/style.less +156 -0
  28. package/dist/cjs/Input/index.d.ts +24 -0
  29. package/dist/cjs/Input/index.js +158 -0
  30. package/dist/cjs/Input/style.less +276 -0
  31. package/dist/cjs/InputNumber/index.d.ts +47 -0
  32. package/dist/cjs/InputNumber/index.js +323 -0
  33. package/dist/cjs/InputNumber/style.less +392 -0
  34. package/dist/cjs/Mentions/index.d.ts +57 -0
  35. package/dist/cjs/Mentions/index.js +378 -0
  36. package/dist/cjs/Mentions/style.less +297 -0
  37. package/dist/cjs/Popover/index.d.ts +30 -0
  38. package/dist/cjs/Popover/index.js +131 -0
  39. package/dist/cjs/Popover/style.less +279 -0
  40. package/dist/cjs/QRCode/index.d.ts +30 -0
  41. package/dist/cjs/QRCode/index.js +167 -0
  42. package/dist/cjs/QRCode/style.less +201 -0
  43. package/dist/cjs/Radio/index.d.ts +70 -0
  44. package/dist/cjs/Radio/index.js +199 -0
  45. package/dist/cjs/Radio/style.less +326 -0
  46. package/dist/cjs/Rate/index.d.ts +37 -0
  47. package/dist/cjs/Rate/index.js +151 -0
  48. package/dist/cjs/Rate/style.less +170 -0
  49. package/dist/cjs/Segmented/index.d.ts +31 -0
  50. package/dist/cjs/Segmented/index.js +121 -0
  51. package/dist/cjs/Segmented/style.less +167 -0
  52. package/dist/cjs/Select/index.d.ts +67 -0
  53. package/dist/cjs/Select/index.js +403 -0
  54. package/dist/cjs/Select/style.less +523 -0
  55. package/dist/cjs/Slider/index.d.ts +41 -0
  56. package/dist/cjs/Slider/index.js +325 -0
  57. package/dist/cjs/Slider/style.less +287 -0
  58. package/dist/cjs/Statistic/index.d.ts +26 -0
  59. package/dist/cjs/Statistic/index.js +71 -0
  60. package/dist/cjs/Statistic/style.less +94 -0
  61. package/dist/cjs/Switch/index.d.ts +28 -0
  62. package/dist/cjs/Switch/index.js +71 -0
  63. package/dist/cjs/Switch/style.less +212 -0
  64. package/dist/cjs/Table/index.d.ts +188 -0
  65. package/dist/cjs/Table/index.js +787 -0
  66. package/dist/cjs/Table/style.less +663 -0
  67. package/dist/cjs/Tag/index.d.ts +51 -0
  68. package/dist/cjs/Tag/index.js +142 -0
  69. package/dist/cjs/Tag/style.less +356 -0
  70. package/dist/cjs/TimePicker/index.d.ts +51 -0
  71. package/dist/cjs/TimePicker/index.js +332 -0
  72. package/dist/cjs/TimePicker/style.less +384 -0
  73. package/dist/cjs/Timeline/index.d.ts +47 -0
  74. package/dist/cjs/Timeline/index.js +127 -0
  75. package/dist/cjs/Timeline/style.less +265 -0
  76. package/dist/cjs/Tooltip/index.d.ts +53 -0
  77. package/dist/cjs/Tooltip/index.js +468 -0
  78. package/dist/cjs/Tooltip/style.less +237 -0
  79. package/dist/cjs/Transfer/index.d.ts +52 -0
  80. package/dist/cjs/Transfer/index.js +344 -0
  81. package/dist/cjs/Transfer/style.less +331 -0
  82. package/dist/cjs/TreeSelect/index.d.ts +54 -0
  83. package/dist/cjs/TreeSelect/index.js +373 -0
  84. package/dist/cjs/TreeSelect/style.less +471 -0
  85. package/dist/cjs/Upload/index.d.ts +65 -0
  86. package/dist/cjs/Upload/index.js +517 -0
  87. package/dist/cjs/Upload/style.less +424 -0
  88. package/dist/cjs/index.d.ts +58 -0
  89. package/dist/cjs/index.js +227 -0
  90. package/dist/esm/Avatar/index.d.ts +47 -0
  91. package/dist/esm/Avatar/index.js +142 -0
  92. package/dist/esm/Avatar/style.less +193 -0
  93. package/dist/esm/Badge/index.d.ts +48 -0
  94. package/dist/esm/Badge/index.js +137 -0
  95. package/dist/esm/Badge/style.less +237 -0
  96. package/dist/esm/Calendar/index.d.ts +33 -0
  97. package/dist/esm/Calendar/index.js +291 -0
  98. package/dist/esm/Calendar/style.less +384 -0
  99. package/dist/esm/Card/index.d.ts +68 -0
  100. package/dist/esm/Card/index.js +149 -0
  101. package/dist/esm/Card/style.less +356 -0
  102. package/dist/esm/Carousel/index.d.ts +33 -0
  103. package/dist/esm/Carousel/index.js +163 -0
  104. package/dist/esm/Carousel/style.less +232 -0
  105. package/dist/esm/Collapse/index.d.ts +55 -0
  106. package/dist/esm/Collapse/index.js +187 -0
  107. package/dist/esm/Collapse/style.less +217 -0
  108. package/dist/esm/Descriptions/index.d.ts +54 -0
  109. package/dist/esm/Descriptions/index.js +179 -0
  110. package/dist/esm/Descriptions/style.less +259 -0
  111. package/dist/esm/Empty/index.d.ts +21 -0
  112. package/dist/esm/Empty/index.js +109 -0
  113. package/dist/esm/Empty/style.less +103 -0
  114. package/dist/esm/Image/index.d.ts +30 -0
  115. package/dist/esm/Image/index.js +149 -0
  116. package/dist/esm/Image/style.less +156 -0
  117. package/dist/esm/Input/index.d.ts +24 -0
  118. package/dist/esm/Input/index.js +151 -0
  119. package/dist/esm/Input/style.less +276 -0
  120. package/dist/esm/InputNumber/index.d.ts +47 -0
  121. package/dist/esm/InputNumber/index.js +316 -0
  122. package/dist/esm/InputNumber/style.less +392 -0
  123. package/dist/esm/Mentions/index.d.ts +57 -0
  124. package/dist/esm/Mentions/index.js +374 -0
  125. package/dist/esm/Mentions/style.less +297 -0
  126. package/dist/esm/Popover/index.d.ts +30 -0
  127. package/dist/esm/Popover/index.js +126 -0
  128. package/dist/esm/Popover/style.less +279 -0
  129. package/dist/esm/QRCode/index.d.ts +30 -0
  130. package/dist/esm/QRCode/index.js +158 -0
  131. package/dist/esm/QRCode/style.less +201 -0
  132. package/dist/esm/Radio/index.d.ts +70 -0
  133. package/dist/esm/Radio/index.js +193 -0
  134. package/dist/esm/Radio/style.less +326 -0
  135. package/dist/esm/Rate/index.d.ts +37 -0
  136. package/dist/esm/Rate/index.js +143 -0
  137. package/dist/esm/Rate/style.less +170 -0
  138. package/dist/esm/Segmented/index.d.ts +31 -0
  139. package/dist/esm/Segmented/index.js +113 -0
  140. package/dist/esm/Segmented/style.less +167 -0
  141. package/dist/esm/Select/index.d.ts +67 -0
  142. package/dist/esm/Select/index.js +398 -0
  143. package/dist/esm/Select/style.less +523 -0
  144. package/dist/esm/Slider/index.d.ts +41 -0
  145. package/dist/esm/Slider/index.js +318 -0
  146. package/dist/esm/Slider/style.less +287 -0
  147. package/dist/esm/Statistic/index.d.ts +26 -0
  148. package/dist/esm/Statistic/index.js +65 -0
  149. package/dist/esm/Statistic/style.less +94 -0
  150. package/dist/esm/Switch/index.d.ts +28 -0
  151. package/dist/esm/Switch/index.js +63 -0
  152. package/dist/esm/Switch/style.less +212 -0
  153. package/dist/esm/Table/index.d.ts +188 -0
  154. package/dist/esm/Table/index.js +797 -0
  155. package/dist/esm/Table/style.less +663 -0
  156. package/dist/esm/Tag/index.d.ts +51 -0
  157. package/dist/esm/Tag/index.js +144 -0
  158. package/dist/esm/Tag/style.less +356 -0
  159. package/dist/esm/TimePicker/index.d.ts +51 -0
  160. package/dist/esm/TimePicker/index.js +327 -0
  161. package/dist/esm/TimePicker/style.less +384 -0
  162. package/dist/esm/Timeline/index.d.ts +47 -0
  163. package/dist/esm/Timeline/index.js +130 -0
  164. package/dist/esm/Timeline/style.less +265 -0
  165. package/dist/esm/Tooltip/index.d.ts +53 -0
  166. package/dist/esm/Tooltip/index.js +471 -0
  167. package/dist/esm/Tooltip/style.less +237 -0
  168. package/dist/esm/Transfer/index.d.ts +52 -0
  169. package/dist/esm/Transfer/index.js +340 -0
  170. package/dist/esm/Transfer/style.less +331 -0
  171. package/dist/esm/TreeSelect/index.d.ts +54 -0
  172. package/dist/esm/TreeSelect/index.js +369 -0
  173. package/dist/esm/TreeSelect/style.less +471 -0
  174. package/dist/esm/Upload/index.d.ts +65 -0
  175. package/dist/esm/Upload/index.js +513 -0
  176. package/dist/esm/Upload/style.less +424 -0
  177. package/dist/esm/index.d.ts +58 -0
  178. package/dist/esm/index.js +30 -1
  179. package/package.json +6 -3
@@ -0,0 +1,143 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ 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
+ 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); }
4
+ 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; }
5
+ 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; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import React, { useState, useCallback, useMemo } from 'react';
8
+ import "./style.less";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ export var Rate = function Rate(_ref) {
12
+ var controlledValue = _ref.value,
13
+ _ref$defaultValue = _ref.defaultValue,
14
+ defaultValue = _ref$defaultValue === void 0 ? 0 : _ref$defaultValue,
15
+ _ref$count = _ref.count,
16
+ count = _ref$count === void 0 ? 5 : _ref$count,
17
+ _ref$allowHalf = _ref.allowHalf,
18
+ allowHalf = _ref$allowHalf === void 0 ? false : _ref$allowHalf,
19
+ _ref$allowClear = _ref.allowClear,
20
+ allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
21
+ _ref$disabled = _ref.disabled,
22
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
23
+ _ref$readOnly = _ref.readOnly,
24
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
25
+ _ref$character = _ref.character,
26
+ character = _ref$character === void 0 ? '★' : _ref$character,
27
+ characterRender = _ref.characterRender,
28
+ tooltips = _ref.tooltips,
29
+ onChange = _ref.onChange,
30
+ onHoverChange = _ref.onHoverChange,
31
+ _ref$className = _ref.className,
32
+ className = _ref$className === void 0 ? '' : _ref$className,
33
+ style = _ref.style;
34
+ var _useState = useState(defaultValue),
35
+ _useState2 = _slicedToArray(_useState, 2),
36
+ internalValue = _useState2[0],
37
+ setInternalValue = _useState2[1];
38
+ var _useState3 = useState(null),
39
+ _useState4 = _slicedToArray(_useState3, 2),
40
+ hoverValue = _useState4[0],
41
+ setHoverValue = _useState4[1];
42
+ var value = controlledValue !== undefined ? controlledValue : internalValue;
43
+ var displayValue = hoverValue !== null ? hoverValue : value;
44
+
45
+ // 处理点击
46
+ var handleClick = useCallback(function (starValue) {
47
+ if (disabled || readOnly) return;
48
+ var newValue = starValue;
49
+
50
+ // 如果允许清除且点击的是当前值,则清除
51
+ if (allowClear && starValue === value) {
52
+ newValue = 0;
53
+ }
54
+ if (controlledValue === undefined) {
55
+ setInternalValue(newValue);
56
+ }
57
+ onChange === null || onChange === void 0 || onChange(newValue);
58
+ }, [disabled, readOnly, allowClear, value, controlledValue, onChange]);
59
+
60
+ // 处理 hover
61
+ var handleMouseEnter = useCallback(function (starValue) {
62
+ if (disabled || readOnly) return;
63
+ setHoverValue(starValue);
64
+ onHoverChange === null || onHoverChange === void 0 || onHoverChange(starValue);
65
+ }, [disabled, readOnly, onHoverChange]);
66
+ var handleMouseLeave = useCallback(function () {
67
+ if (disabled || readOnly) return;
68
+ setHoverValue(null);
69
+ onHoverChange === null || onHoverChange === void 0 || onHoverChange(value);
70
+ }, [disabled, readOnly, value, onHoverChange]);
71
+
72
+ // 渲染星星
73
+ var stars = useMemo(function () {
74
+ var result = [];
75
+ var _loop = function _loop(i) {
76
+ var starValue = i;
77
+ var isFull = displayValue >= starValue;
78
+ var isHalf = allowHalf && displayValue >= starValue - 0.5 && displayValue < starValue;
79
+ var starClass = ['kage-rate-star', isFull && 'kage-rate-star-full', isHalf && 'kage-rate-star-half', !isFull && !isHalf && 'kage-rate-star-zero'].filter(Boolean).join(' ');
80
+
81
+ // 渲染字符
82
+ var renderCharacter = function renderCharacter() {
83
+ var origin = character;
84
+ if (characterRender) {
85
+ return characterRender(origin, {
86
+ index: i - 1,
87
+ value: displayValue
88
+ });
89
+ }
90
+ return origin;
91
+ };
92
+ result.push( /*#__PURE__*/_jsxs("div", {
93
+ className: starClass,
94
+ onClick: function onClick() {
95
+ return handleClick(starValue);
96
+ },
97
+ onMouseEnter: function onMouseEnter() {
98
+ return handleMouseEnter(starValue);
99
+ },
100
+ title: tooltips === null || tooltips === void 0 ? void 0 : tooltips[i - 1],
101
+ children: [allowHalf && /*#__PURE__*/_jsx("div", {
102
+ className: "kage-rate-star-first",
103
+ onClick: function onClick(e) {
104
+ e.stopPropagation();
105
+ handleClick(starValue - 0.5);
106
+ },
107
+ onMouseEnter: function onMouseEnter(e) {
108
+ e.stopPropagation();
109
+ handleMouseEnter(starValue - 0.5);
110
+ }
111
+ }), allowHalf && /*#__PURE__*/_jsx("div", {
112
+ className: "kage-rate-star-second",
113
+ onClick: function onClick(e) {
114
+ e.stopPropagation();
115
+ handleClick(starValue);
116
+ },
117
+ onMouseEnter: function onMouseEnter(e) {
118
+ e.stopPropagation();
119
+ handleMouseEnter(starValue);
120
+ }
121
+ }), /*#__PURE__*/_jsx("div", {
122
+ className: "kage-rate-star-character",
123
+ children: renderCharacter()
124
+ })]
125
+ }, i));
126
+ };
127
+ for (var i = 1; i <= count; i++) {
128
+ _loop(i);
129
+ }
130
+ return result;
131
+ }, [count, displayValue, allowHalf, character, characterRender, tooltips, handleClick, handleMouseEnter]);
132
+ var classNames = ['kage-rate', disabled && 'kage-rate-disabled', readOnly && 'kage-rate-readonly', className].filter(Boolean).join(' ');
133
+ return /*#__PURE__*/_jsxs("div", {
134
+ className: classNames,
135
+ style: style,
136
+ onMouseLeave: handleMouseLeave,
137
+ children: [stars, tooltips && hoverValue !== null && /*#__PURE__*/_jsx("span", {
138
+ className: "kage-rate-text",
139
+ children: tooltips[Math.ceil(hoverValue) - 1]
140
+ })]
141
+ });
142
+ };
143
+ export default Rate;
@@ -0,0 +1,170 @@
1
+ // Rate 评分组件样式
2
+
3
+ @prefix: kage-rate;
4
+
5
+ // 颜色变量
6
+ @rate-star-color: #fadb14;
7
+ @rate-star-bg: rgba(0, 0, 0, 0.06);
8
+ @rate-star-size: 20px;
9
+ @rate-star-hover-scale: 1.1;
10
+
11
+ // ============ 基础样式 ============
12
+ .@{prefix} {
13
+ display: inline-flex;
14
+ align-items: center;
15
+ gap: 8px;
16
+ font-size: @rate-star-size;
17
+ line-height: 1;
18
+ color: @rate-star-bg;
19
+ outline: none;
20
+
21
+ * {
22
+ box-sizing: border-box;
23
+ }
24
+ }
25
+
26
+ // ============ 星星 ============
27
+ .@{prefix}-star {
28
+ position: relative;
29
+ display: inline-block;
30
+ cursor: pointer;
31
+ transition: transform 0.2s ease;
32
+ user-select: none;
33
+
34
+ &:hover {
35
+ transform: scale(@rate-star-hover-scale);
36
+ }
37
+
38
+ // 字符
39
+ &-character {
40
+ font-size: @rate-star-size;
41
+ line-height: 1;
42
+ transition: color 0.2s ease;
43
+ }
44
+
45
+ // 零星(未选中)
46
+ &-zero {
47
+ .@{prefix}-star-character {
48
+ color: @rate-star-bg;
49
+ }
50
+ }
51
+
52
+ // 半星
53
+ &-half {
54
+ .@{prefix}-star-character {
55
+ background: linear-gradient(
56
+ to right,
57
+ @rate-star-color 0%,
58
+ @rate-star-color 50%,
59
+ @rate-star-bg 50%,
60
+ @rate-star-bg 100%
61
+ );
62
+ -webkit-background-clip: text;
63
+ -webkit-text-fill-color: transparent;
64
+ background-clip: text;
65
+ }
66
+ }
67
+
68
+ // 满星
69
+ &-full {
70
+ .@{prefix}-star-character {
71
+ color: @rate-star-color;
72
+ }
73
+ }
74
+
75
+ // 半星交互区域
76
+ &-first,
77
+ &-second {
78
+ position: absolute;
79
+ top: 0;
80
+ width: 50%;
81
+ height: 100%;
82
+ cursor: pointer;
83
+ z-index: 1;
84
+ }
85
+
86
+ &-first {
87
+ left: 0;
88
+ }
89
+
90
+ &-second {
91
+ right: 0;
92
+ }
93
+ }
94
+
95
+ // ============ 辅助文字 ============
96
+ .@{prefix}-text {
97
+ display: inline-block;
98
+ margin-left: 8px;
99
+ font-size: 14px;
100
+ color: rgba(0, 0, 0, 0.45);
101
+ line-height: 1;
102
+ }
103
+
104
+ // ============ 禁用状态 ============
105
+ .@{prefix}-disabled {
106
+ cursor: not-allowed;
107
+ opacity: 0.5;
108
+
109
+ .@{prefix}-star {
110
+ cursor: not-allowed;
111
+
112
+ &:hover {
113
+ transform: none;
114
+ }
115
+ }
116
+ }
117
+
118
+ // ============ 只读状态 ============
119
+ .@{prefix}-readonly {
120
+ .@{prefix}-star {
121
+ cursor: default;
122
+
123
+ &:hover {
124
+ transform: none;
125
+ }
126
+ }
127
+ }
128
+
129
+ // ============ 暗色模式适配 ============
130
+ [data-theme='dark'],
131
+ [data-prefers-color-scheme='dark'],
132
+ [data-prefers-color='dark'] {
133
+ .@{prefix} {
134
+ color: rgba(255, 255, 255, 0.15);
135
+ }
136
+
137
+ .@{prefix}-star {
138
+ &-zero {
139
+ .@{prefix}-star-character {
140
+ color: rgba(255, 255, 255, 0.15);
141
+ }
142
+ }
143
+
144
+ &-half {
145
+ .@{prefix}-star-character {
146
+ background: linear-gradient(
147
+ to right,
148
+ @rate-star-color 0%,
149
+ @rate-star-color 50%,
150
+ rgba(255, 255, 255, 0.15) 50%,
151
+ rgba(255, 255, 255, 0.15) 100%
152
+ );
153
+ -webkit-background-clip: text;
154
+ -webkit-text-fill-color: transparent;
155
+ background-clip: text;
156
+ }
157
+ }
158
+
159
+ &-full {
160
+ .@{prefix}-star-character {
161
+ color: @rate-star-color;
162
+ }
163
+ }
164
+ }
165
+
166
+ .@{prefix}-text {
167
+ color: rgba(255, 255, 255, 0.45);
168
+ }
169
+ }
170
+
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import './style.less';
3
+ export type SegmentedValue = string | number;
4
+ export interface SegmentedOption {
5
+ label: React.ReactNode;
6
+ value: SegmentedValue;
7
+ icon?: React.ReactNode;
8
+ disabled?: boolean;
9
+ }
10
+ export interface SegmentedProps {
11
+ /** 选项数据 */
12
+ options: (SegmentedValue | SegmentedOption)[];
13
+ /** 当前选中的值 */
14
+ value?: SegmentedValue;
15
+ /** 默认选中的值 */
16
+ defaultValue?: SegmentedValue;
17
+ /** 变化时的回调函数 */
18
+ onChange?: (value: SegmentedValue) => void;
19
+ /** 是否禁用 */
20
+ disabled?: boolean;
21
+ /** 是否块级显示 */
22
+ block?: boolean;
23
+ /** 大小 */
24
+ size?: 'large' | 'middle' | 'small';
25
+ /** 自定义类名 */
26
+ className?: string;
27
+ /** 自定义样式 */
28
+ style?: React.CSSProperties;
29
+ }
30
+ export declare const Segmented: React.FC<SegmentedProps>;
31
+ export default Segmented;
@@ -0,0 +1,113 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ 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
+ 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); }
4
+ 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; }
5
+ 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; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import React, { useState, useRef, useEffect, useMemo } from 'react';
8
+ import "./style.less";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ var normalizeOptions = function normalizeOptions(options) {
12
+ return options.map(function (option) {
13
+ if (typeof option === 'string' || typeof option === 'number') {
14
+ return {
15
+ label: option,
16
+ value: option
17
+ };
18
+ }
19
+ return option;
20
+ });
21
+ };
22
+ export var Segmented = function Segmented(_ref) {
23
+ var options = _ref.options,
24
+ controlledValue = _ref.value,
25
+ defaultValue = _ref.defaultValue,
26
+ onChange = _ref.onChange,
27
+ _ref$disabled = _ref.disabled,
28
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
29
+ _ref$block = _ref.block,
30
+ block = _ref$block === void 0 ? false : _ref$block,
31
+ _ref$size = _ref.size,
32
+ size = _ref$size === void 0 ? 'middle' : _ref$size,
33
+ className = _ref.className,
34
+ style = _ref.style;
35
+ var normalizedOptions = useMemo(function () {
36
+ return normalizeOptions(options);
37
+ }, [options]);
38
+ var _useState = useState(function () {
39
+ var _ref2, _normalizedOptions$;
40
+ return (_ref2 = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : (_normalizedOptions$ = normalizedOptions[0]) === null || _normalizedOptions$ === void 0 ? void 0 : _normalizedOptions$.value;
41
+ }),
42
+ _useState2 = _slicedToArray(_useState, 2),
43
+ internalValue = _useState2[0],
44
+ setInternalValue = _useState2[1];
45
+ var value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
46
+ var containerRef = useRef(null);
47
+ var itemRefs = useRef([]);
48
+ var _useState3 = useState({}),
49
+ _useState4 = _slicedToArray(_useState3, 2),
50
+ thumbStyle = _useState4[0],
51
+ setThumbStyle = _useState4[1];
52
+
53
+ // 更新滑块位置
54
+ useEffect(function () {
55
+ var activeIndex = normalizedOptions.findIndex(function (option) {
56
+ return option.value === value;
57
+ });
58
+ if (activeIndex !== -1 && itemRefs.current[activeIndex]) {
59
+ var activeItem = itemRefs.current[activeIndex];
60
+ var container = containerRef.current;
61
+ if (activeItem && container) {
62
+ var containerRect = container.getBoundingClientRect();
63
+ var itemRect = activeItem.getBoundingClientRect();
64
+ setThumbStyle({
65
+ width: "".concat(itemRect.width, "px"),
66
+ height: "".concat(itemRect.height, "px"),
67
+ transform: "translateX(".concat(itemRect.left - containerRect.left, "px)")
68
+ });
69
+ }
70
+ }
71
+ }, [value, normalizedOptions]);
72
+ var handleClick = function handleClick(option) {
73
+ if (disabled || option.disabled) return;
74
+ var newValue = option.value;
75
+ if (controlledValue === undefined) {
76
+ setInternalValue(newValue);
77
+ }
78
+ onChange === null || onChange === void 0 || onChange(newValue);
79
+ };
80
+ var prefixCls = 'kage-segmented';
81
+ return /*#__PURE__*/_jsx("div", {
82
+ ref: containerRef,
83
+ className: "".concat(prefixCls, " ").concat(prefixCls, "-").concat(size, " ").concat(block ? "".concat(prefixCls, "-block") : '', " ").concat(disabled ? "".concat(prefixCls, "-disabled") : '', " ").concat(className || ''),
84
+ style: style,
85
+ children: /*#__PURE__*/_jsxs("div", {
86
+ className: "".concat(prefixCls, "-group"),
87
+ children: [/*#__PURE__*/_jsx("div", {
88
+ className: "".concat(prefixCls, "-thumb"),
89
+ style: thumbStyle
90
+ }), normalizedOptions.map(function (option, index) {
91
+ var isActive = option.value === value;
92
+ var isDisabled = disabled || option.disabled;
93
+ return /*#__PURE__*/_jsx("div", {
94
+ ref: function ref(el) {
95
+ return itemRefs.current[index] = el;
96
+ },
97
+ className: "".concat(prefixCls, "-item ").concat(isActive ? "".concat(prefixCls, "-item-selected") : '', " ").concat(isDisabled ? "".concat(prefixCls, "-item-disabled") : ''),
98
+ onClick: function onClick() {
99
+ return handleClick(option);
100
+ },
101
+ children: /*#__PURE__*/_jsxs("div", {
102
+ className: "".concat(prefixCls, "-item-label"),
103
+ children: [option.icon && /*#__PURE__*/_jsx("span", {
104
+ className: "".concat(prefixCls, "-item-icon"),
105
+ children: option.icon
106
+ }), option.label]
107
+ })
108
+ }, option.value);
109
+ })]
110
+ })
111
+ });
112
+ };
113
+ export default Segmented;
@@ -0,0 +1,167 @@
1
+ @prefix: kage-segmented;
2
+
3
+ // 颜色变量
4
+ @primary-color: #1890ff;
5
+ @text-color: rgba(0, 0, 0, 0.88);
6
+ @text-color-secondary: rgba(0, 0, 0, 0.65);
7
+ @disabled-color: rgba(0, 0, 0, 0.25);
8
+ @border-color-base: #d9d9d9;
9
+ @component-background: #ffffff;
10
+ @bg-color: rgba(0, 0, 0, 0.04);
11
+
12
+ // 深色模式变量
13
+ @dark-bg: #141414;
14
+ @dark-border-color: #424242;
15
+ @dark-bg-color: rgba(255, 255, 255, 0.04);
16
+
17
+ .@{prefix} {
18
+ display: inline-flex;
19
+ padding: 2px;
20
+ background-color: @bg-color;
21
+ border-radius: 8px;
22
+ font-size: 14px;
23
+ transition: all 0.3s;
24
+
25
+ &-block {
26
+ display: flex;
27
+ width: 100%;
28
+ }
29
+
30
+ &-disabled {
31
+ cursor: not-allowed;
32
+ opacity: 0.6;
33
+ }
34
+
35
+ // ========== 选项组 ==========
36
+ &-group {
37
+ position: relative;
38
+ display: flex;
39
+ width: 100%;
40
+ }
41
+
42
+ // ========== 滑动背景 ==========
43
+ &-thumb {
44
+ position: absolute;
45
+ top: 0;
46
+ left: 0;
47
+ background-color: @component-background;
48
+ border-radius: 6px;
49
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
50
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
51
+ pointer-events: none;
52
+ z-index: 1;
53
+ }
54
+
55
+ // ========== 选项 ==========
56
+ &-item {
57
+ position: relative;
58
+ flex: 1;
59
+ min-width: 0;
60
+ padding: 5px 11px;
61
+ color: @text-color;
62
+ text-align: center;
63
+ cursor: pointer;
64
+ user-select: none;
65
+ transition: color 0.3s;
66
+ z-index: 2;
67
+
68
+ &:hover {
69
+ color: @text-color;
70
+ }
71
+
72
+ &-selected {
73
+ color: @text-color;
74
+ font-weight: 500;
75
+ }
76
+
77
+ &-disabled {
78
+ color: @disabled-color;
79
+ cursor: not-allowed;
80
+
81
+ &:hover {
82
+ color: @disabled-color;
83
+ }
84
+ }
85
+ }
86
+
87
+ &-item-label {
88
+ display: flex;
89
+ align-items: center;
90
+ justify-content: center;
91
+ gap: 4px;
92
+ white-space: nowrap;
93
+ }
94
+
95
+ &-item-icon {
96
+ display: inline-flex;
97
+ align-items: center;
98
+ font-size: 16px;
99
+ }
100
+
101
+ // ========== 尺寸变体 ==========
102
+ &-large {
103
+ font-size: 16px;
104
+
105
+ .@{prefix}-item {
106
+ padding: 7px 15px;
107
+ line-height: 24px;
108
+ }
109
+
110
+ .@{prefix}-item-icon {
111
+ font-size: 18px;
112
+ }
113
+ }
114
+
115
+ &-small {
116
+ font-size: 12px;
117
+
118
+ .@{prefix}-item {
119
+ padding: 3px 7px;
120
+ line-height: 16px;
121
+ }
122
+
123
+ .@{prefix}-item-icon {
124
+ font-size: 14px;
125
+ }
126
+ }
127
+ }
128
+
129
+ // ========== 深色模式 ==========
130
+ [data-theme='dark'],
131
+ [data-prefers-color-scheme='dark'],
132
+ [data-prefers-color='dark'] {
133
+ .@{prefix} {
134
+ background-color: rgba(255, 255, 255, 0.08);
135
+
136
+ &-thumb {
137
+ background-color: #434343;
138
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
139
+ }
140
+
141
+ &-item {
142
+ color: rgba(255, 255, 255, 0.65);
143
+
144
+ &:hover {
145
+ color: rgba(255, 255, 255, 0.85);
146
+ }
147
+
148
+ &-selected {
149
+ color: rgba(0, 0, 0, 0.88);
150
+ font-weight: 600;
151
+ }
152
+
153
+ &-disabled {
154
+ color: rgba(255, 255, 255, 0.25);
155
+
156
+ &:hover {
157
+ color: rgba(255, 255, 255, 0.25);
158
+ }
159
+ }
160
+ }
161
+
162
+ &-item-label {
163
+ color: inherit;
164
+ }
165
+ }
166
+ }
167
+
@@ -0,0 +1,67 @@
1
+ import React from 'react';
2
+ import './style.less';
3
+ export interface SelectOption {
4
+ /** 选项值 */
5
+ value: string | number;
6
+ /** 显示文本 */
7
+ label?: React.ReactNode;
8
+ /** 是否禁用 */
9
+ disabled?: boolean;
10
+ }
11
+ export type SelectValue = string | number | (string | number)[];
12
+ export interface SelectProps {
13
+ /** 当前值 */
14
+ value?: SelectValue;
15
+ /** 默认值 */
16
+ defaultValue?: SelectValue;
17
+ /** 选项数据 */
18
+ options?: (SelectOption | string | number)[];
19
+ /** 占位符 */
20
+ placeholder?: string;
21
+ /** 是否禁用 */
22
+ disabled?: boolean;
23
+ /** 是否允许清除 */
24
+ allowClear?: boolean;
25
+ /** 是否支持搜索 */
26
+ showSearch?: boolean;
27
+ /** 是否多选 */
28
+ mode?: 'multiple' | 'tags';
29
+ /** 尺寸 */
30
+ size?: 'large' | 'middle' | 'small';
31
+ /** 状态 */
32
+ status?: 'error' | 'warning';
33
+ /** 下拉菜单是否与选择器同宽 */
34
+ popupMatchSelectWidth?: boolean | number;
35
+ /** 过滤选项 */
36
+ filterOption?: boolean | ((input: string, option: SelectOption) => boolean);
37
+ /** 无匹配时的内容 */
38
+ notFoundContent?: React.ReactNode;
39
+ /** 获取选项时的加载状态 */
40
+ loading?: boolean;
41
+ /** 最多显示多少个 tag */
42
+ maxTagCount?: number;
43
+ /** 隐藏 tag 时显示的内容 */
44
+ maxTagPlaceholder?: React.ReactNode | ((omittedValues: SelectValue[]) => React.ReactNode);
45
+ /** 最多显示多少个 tag 的文本长度 */
46
+ maxTagTextLength?: number;
47
+ /** 值变化回调 */
48
+ onChange?: (value: SelectValue, option: SelectOption | SelectOption[]) => void;
49
+ /** 选中回调 */
50
+ onSelect?: (value: string | number, option: SelectOption) => void;
51
+ /** 取消选中回调 */
52
+ onDeselect?: (value: string | number, option: SelectOption) => void;
53
+ /** 搜索回调 */
54
+ onSearch?: (value: string) => void;
55
+ /** 下拉菜单打开/关闭回调 */
56
+ onDropdownVisibleChange?: (open: boolean) => void;
57
+ /** 失焦回调 */
58
+ onBlur?: (e: React.FocusEvent) => void;
59
+ /** 聚焦回调 */
60
+ onFocus?: (e: React.FocusEvent) => void;
61
+ /** 自定义类名 */
62
+ className?: string;
63
+ /** 自定义样式 */
64
+ style?: React.CSSProperties;
65
+ }
66
+ export declare const Select: React.FC<SelectProps>;
67
+ export default Select;