@humuchen/mac-ui 0.0.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 (125) hide show
  1. package/README.md +940 -0
  2. package/dist/favicon.svg +1 -0
  3. package/dist/mac-ui.cjs.js +12367 -0
  4. package/dist/mac-ui.cjs.js.map +1 -0
  5. package/dist/mac-ui.es.js +18444 -0
  6. package/dist/mac-ui.es.js.map +1 -0
  7. package/dist/mac-ui.umd.js +12367 -0
  8. package/dist/mac-ui.umd.js.map +1 -0
  9. package/dist/types/components/alert/index.d.ts +1 -0
  10. package/dist/types/components/alert/mac-alert.d.ts +38 -0
  11. package/dist/types/components/alert/mac-alert.stories.d.ts +15 -0
  12. package/dist/types/components/animation/animations.d.ts +97 -0
  13. package/dist/types/components/animation/index.d.ts +3 -0
  14. package/dist/types/components/animation/mac-animation.d.ts +67 -0
  15. package/dist/types/components/animation/mac-animation.stories.d.ts +9 -0
  16. package/dist/types/components/button/index.d.ts +1 -0
  17. package/dist/types/components/button/mac-button.d.ts +37 -0
  18. package/dist/types/components/button/mac-button.stories.d.ts +14 -0
  19. package/dist/types/components/card/index.d.ts +1 -0
  20. package/dist/types/components/card/mac-card.d.ts +38 -0
  21. package/dist/types/components/card/mac-card.stories.d.ts +14 -0
  22. package/dist/types/components/carousel/index.d.ts +1 -0
  23. package/dist/types/components/carousel/mac-carousel.d.ts +105 -0
  24. package/dist/types/components/carousel/mac-carousel.stories.d.ts +18 -0
  25. package/dist/types/components/checkbox/index.d.ts +2 -0
  26. package/dist/types/components/checkbox/mac-checkbox.d.ts +94 -0
  27. package/dist/types/components/checkbox/mac-checkbox.stories.d.ts +17 -0
  28. package/dist/types/components/config-provider/index.d.ts +1 -0
  29. package/dist/types/components/config-provider/mac-config-provider.d.ts +23 -0
  30. package/dist/types/components/config-provider/mac-config-provider.stories.d.ts +12 -0
  31. package/dist/types/components/confirm/index.d.ts +2 -0
  32. package/dist/types/components/confirm/mac-confirm.d.ts +86 -0
  33. package/dist/types/components/confirm/mac-confirm.stories.d.ts +15 -0
  34. package/dist/types/components/data-table/index.d.ts +2 -0
  35. package/dist/types/components/data-table/mac-data-table.d.ts +212 -0
  36. package/dist/types/components/data-table/mac-data-table.stories.d.ts +18 -0
  37. package/dist/types/components/date-picker/date-picker-utils.d.ts +13 -0
  38. package/dist/types/components/date-picker/index.d.ts +3 -0
  39. package/dist/types/components/date-picker/mac-date-picker.d.ts +72 -0
  40. package/dist/types/components/date-picker/mac-date-picker.stories.d.ts +28 -0
  41. package/dist/types/components/date-picker/mac-date-range-picker.d.ts +58 -0
  42. package/dist/types/components/date-picker/mac-date-range-picker.stories.d.ts +13 -0
  43. package/dist/types/components/descriptions/mac-descriptions.d.ts +99 -0
  44. package/dist/types/components/descriptions/mac-descriptions.stories.d.ts +21 -0
  45. package/dist/types/components/desktop/index.d.ts +2 -0
  46. package/dist/types/components/desktop/mac-desktop.d.ts +88 -0
  47. package/dist/types/components/desktop/mac-desktop.stories.d.ts +17 -0
  48. package/dist/types/components/desktop-icon/index.d.ts +1 -0
  49. package/dist/types/components/desktop-icon/mac-desktop-icon.d.ts +46 -0
  50. package/dist/types/components/desktop-icon/mac-desktop-icon.stories.d.ts +8 -0
  51. package/dist/types/components/dock/index.d.ts +2 -0
  52. package/dist/types/components/dock/mac-dock-item.d.ts +37 -0
  53. package/dist/types/components/dock/mac-dock.d.ts +74 -0
  54. package/dist/types/components/dock/mac-dock.stories.d.ts +13 -0
  55. package/dist/types/components/drawer/mac-drawer.d.ts +87 -0
  56. package/dist/types/components/drawer/mac-drawer.stories.d.ts +15 -0
  57. package/dist/types/components/dropdown/index.d.ts +2 -0
  58. package/dist/types/components/dropdown/mac-dropdown.d.ts +77 -0
  59. package/dist/types/components/dropdown/mac-dropdown.stories.d.ts +13 -0
  60. package/dist/types/components/dynamic-tags/index.d.ts +1 -0
  61. package/dist/types/components/dynamic-tags/mac-dynamic-tags.d.ts +64 -0
  62. package/dist/types/components/dynamic-tags/mac-dynamic-tags.stories.d.ts +16 -0
  63. package/dist/types/components/form/index.d.ts +3 -0
  64. package/dist/types/components/form/mac-form-item.d.ts +67 -0
  65. package/dist/types/components/form/mac-form.d.ts +64 -0
  66. package/dist/types/components/form/mac-form.stories.d.ts +18 -0
  67. package/dist/types/components/group-button/index.d.ts +2 -0
  68. package/dist/types/components/group-button/mac-group-button.d.ts +50 -0
  69. package/dist/types/components/group-button/mac-group-button.stories.d.ts +13 -0
  70. package/dist/types/components/infinite-scroll/index.d.ts +1 -0
  71. package/dist/types/components/infinite-scroll/mac-infinite-scroll.d.ts +57 -0
  72. package/dist/types/components/infinite-scroll/mac-infinite-scroll.stories.d.ts +11 -0
  73. package/dist/types/components/input/index.d.ts +1 -0
  74. package/dist/types/components/input/mac-input.d.ts +73 -0
  75. package/dist/types/components/input/mac-input.stories.d.ts +19 -0
  76. package/dist/types/components/input-number/index.d.ts +1 -0
  77. package/dist/types/components/input-number/mac-input-number.d.ts +81 -0
  78. package/dist/types/components/input-number/mac-input-number.stories.d.ts +18 -0
  79. package/dist/types/components/lazy-image/index.d.ts +1 -0
  80. package/dist/types/components/lazy-image/mac-lazy-image.d.ts +86 -0
  81. package/dist/types/components/lazy-image/mac-lazy-image.stories.d.ts +15 -0
  82. package/dist/types/components/menu/index.d.ts +2 -0
  83. package/dist/types/components/menu/mac-menu.d.ts +63 -0
  84. package/dist/types/components/menu/mac-menu.stories.d.ts +11 -0
  85. package/dist/types/components/modal/index.d.ts +1 -0
  86. package/dist/types/components/modal/mac-modal.d.ts +96 -0
  87. package/dist/types/components/modal/mac-modal.stories.d.ts +12 -0
  88. package/dist/types/components/number-animation/mac-number-animation.d.ts +64 -0
  89. package/dist/types/components/number-animation/mac-number-animation.stories.d.ts +15 -0
  90. package/dist/types/components/popconfirm/mac-popconfirm.d.ts +77 -0
  91. package/dist/types/components/popconfirm/mac-popconfirm.stories.d.ts +14 -0
  92. package/dist/types/components/progress/index.d.ts +1 -0
  93. package/dist/types/components/progress/mac-progress.d.ts +76 -0
  94. package/dist/types/components/progress/mac-progress.stories.d.ts +25 -0
  95. package/dist/types/components/radio/index.d.ts +2 -0
  96. package/dist/types/components/radio/mac-radio.d.ts +90 -0
  97. package/dist/types/components/radio/mac-radio.stories.d.ts +17 -0
  98. package/dist/types/components/rating/mac-rating.d.ts +56 -0
  99. package/dist/types/components/rating/mac-rating.stories.d.ts +15 -0
  100. package/dist/types/components/select/index.d.ts +1 -0
  101. package/dist/types/components/select/mac-select.d.ts +97 -0
  102. package/dist/types/components/select/mac-select.stories.d.ts +18 -0
  103. package/dist/types/components/split/index.d.ts +1 -0
  104. package/dist/types/components/split/mac-split.d.ts +69 -0
  105. package/dist/types/components/split/mac-split.stories.d.ts +13 -0
  106. package/dist/types/components/tabs/mac-tabs.d.ts +119 -0
  107. package/dist/types/components/tabs/mac-tabs.stories.d.ts +15 -0
  108. package/dist/types/components/tag/index.d.ts +1 -0
  109. package/dist/types/components/tag/mac-tag.d.ts +40 -0
  110. package/dist/types/components/tag/mac-tag.stories.d.ts +20 -0
  111. package/dist/types/components/text-ellipsis/mac-text-ellipsis.d.ts +47 -0
  112. package/dist/types/components/text-ellipsis/mac-text-ellipsis.stories.d.ts +15 -0
  113. package/dist/types/components/tree/index.d.ts +2 -0
  114. package/dist/types/components/tree/mac-tree.d.ts +79 -0
  115. package/dist/types/components/tree/mac-tree.stories.d.ts +12 -0
  116. package/dist/types/components/tree-select/index.d.ts +2 -0
  117. package/dist/types/components/tree-select/mac-tree-select.d.ts +59 -0
  118. package/dist/types/components/tree-select/mac-tree-select.stories.d.ts +19 -0
  119. package/dist/types/internal/base-element.d.ts +18 -0
  120. package/dist/types/internal/property-converters.d.ts +7 -0
  121. package/dist/types/mac-ui.d.ts +60 -0
  122. package/dist/types/styles/shared-styles.d.ts +2 -0
  123. package/dist/types/styles/theme.d.ts +11 -0
  124. package/dist/types/test/setup.d.ts +1 -0
  125. package/package.json +86 -0
@@ -0,0 +1,96 @@
1
+ import { BaseElement } from '../../internal/base-element';
2
+ /**
3
+ * @tag mac-modal
4
+ * @summary macOS 风格的模态框/窗口,支持标题栏、拖拽和调整大小。
5
+ *
6
+ * @slot - 模态框内容区。
7
+ * @slot titlebar - 自定义标题栏内容(替换默认标题和按钮)。
8
+ * @slot footer - 自定义底部内容。
9
+ *
10
+ * @csspart base - 模态框容器。
11
+ * @csspart titlebar - 标题栏区域。
12
+ * @csspart title - 标题文本。
13
+ * @csspart body - 内容区域。
14
+ * @csspart footer - 底部区域。
15
+ * @csspart resize-handle - 右下角调整大小手柄。
16
+ *
17
+ * @event mac-modal-close - 点击关闭按钮时触发。
18
+ * @event mac-modal-minimize - 点击最小化按钮时触发。
19
+ * @event mac-modal-maximize - 点击最大化/全屏按钮时触发。
20
+ * @event mac-modal-move - 模态框移动时触发。Detail: { x, y }
21
+ * @event mac-modal-resize - 模态框调整大小时触发。Detail: { width, height }
22
+ * @event mac-modal-ok - 点击默认确认按钮时触发。
23
+ * @event mac-modal-cancel - 点击默认取消按钮时触发。
24
+ */
25
+ export declare class MacModal extends BaseElement {
26
+ static styles: import("lit").CSSResult[];
27
+ /** 模态框标题 */
28
+ title: string;
29
+ /** 模态框标题文本对齐方式 */
30
+ titleAlign: string;
31
+ willUpdate(): void;
32
+ updated(changed: Map<string, unknown>): void;
33
+ /** 模态框左侧位置 */
34
+ x: number;
35
+ /** 模态框顶部位置 */
36
+ y: number;
37
+ /** 模态框宽度 */
38
+ width: number;
39
+ /** 模态框高度 */
40
+ height: number;
41
+ /** 模态框是否激活(聚焦) */
42
+ active: boolean;
43
+ /** 模态框是否可拖拽 */
44
+ draggable: boolean;
45
+ /** 模态框是否可调整大小 */
46
+ resizable: boolean;
47
+ /** 是否显示红绿灯按钮 */
48
+ showButtons: boolean;
49
+ /** 是否显示底部区域 */
50
+ showFooter: boolean;
51
+ /** 调整大小时的最小宽度 */
52
+ minWidth: number;
53
+ /** 调整大小时的最小高度 */
54
+ minHeight: number;
55
+ /** 模态框是否最小化 */
56
+ minimized: boolean;
57
+ /** 模态框是否最大化 */
58
+ maximized: boolean;
59
+ private _isDragging;
60
+ private _dragStartX;
61
+ private _dragStartY;
62
+ private _dragOffsetX;
63
+ private _dragOffsetY;
64
+ private _isResizing;
65
+ private _resizeDir;
66
+ private _resizeStartX;
67
+ private _resizeStartY;
68
+ private _resizeStartW;
69
+ private _resizeStartH;
70
+ private _resizeStartLeft;
71
+ private _resizeStartTop;
72
+ private _dragCleanup;
73
+ private _resizeCleanup;
74
+ private _prevX;
75
+ private _prevY;
76
+ private _prevWidth;
77
+ private _prevHeight;
78
+ private _onWindowResize;
79
+ connectedCallback(): void;
80
+ disconnectedCallback(): void;
81
+ private _updatePosition;
82
+ private _updateSize;
83
+ private _onTitleBarMouseDown;
84
+ private _onResizeMouseDown;
85
+ private _onClose;
86
+ private _onMinimize;
87
+ private _onMaximize;
88
+ private _onCancel;
89
+ private _onOk;
90
+ render(): import("lit").TemplateResult<1>;
91
+ }
92
+ declare global {
93
+ interface HTMLElementTagNameMap {
94
+ 'mac-modal': MacModal;
95
+ }
96
+ }
@@ -0,0 +1,12 @@
1
+ import type { Meta, StoryObj } from '@storybook/web-components';
2
+ import './mac-modal';
3
+ declare const meta: Meta;
4
+ export default meta;
5
+ type Story = StoryObj;
6
+ export declare const Default: Story;
7
+ export declare const MultipleModals: Story;
8
+ export declare const InactiveModal: Story;
9
+ export declare const NoResize: Story;
10
+ export declare const NoButtons: Story;
11
+ export declare const WithFooter: Story;
12
+ export declare const NoFooter: Story;
@@ -0,0 +1,64 @@
1
+ import { BaseElement } from '../../internal/base-element';
2
+ /**
3
+ * @tag mac-number-animation
4
+ * @summary 数字动画组件,在数值之间平滑过渡。
5
+ *
6
+ * @slot prefix - 数字前的内容(例如货币符号)。
7
+ * @slot suffix - 数字后的内容(例如单位文本)。
8
+ *
9
+ * @cssproperty --md-number-animation-font-size - 数字字体大小。
10
+ * @cssproperty --md-number-animation-color - 数字文字颜色。
11
+ * @cssproperty --md-number-animation-font-weight - 数字字重。
12
+ * @cssproperty --md-number-animation-font-family - 数字字体。
13
+ * @cssproperty --md-number-animation-prefix-color - 前缀文字颜色。
14
+ * @cssproperty --md-number-animation-suffix-color - 后缀文字颜色。
15
+ *
16
+ * @event mac-number-animation-start - 动画开始时触发。`detail: { from, to }`
17
+ * @event mac-number-animation-finish - 动画结束时触发。`detail: { value }`
18
+ */
19
+ export declare class MacNumberAnimation extends BaseElement {
20
+ static styles: import("lit").CSSResult[];
21
+ /** 动画目标值 */
22
+ to: number;
23
+ /** 起始值 */
24
+ from: number;
25
+ /** 动画时长(毫秒) */
26
+ duration: number;
27
+ /** 小数位数 */
28
+ precision: number;
29
+ /** 千位分隔符字符 */
30
+ separator: string;
31
+ /** 缓动函数名称 */
32
+ easing: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
33
+ /** 连接时是否自动开始动画 */
34
+ autoplay: boolean;
35
+ /** 前缀文本(替代插槽) */
36
+ prefix: string;
37
+ /** 后缀文本(替代插槽) */
38
+ suffix: string;
39
+ /** 组件尺寸 */
40
+ size?: 'sm' | 'md' | 'lg';
41
+ /** 动画完成时的回调(可作为属性设置) */
42
+ onFinish?: (value: number) => void;
43
+ private _displayValue;
44
+ private _rafId;
45
+ private _startTime;
46
+ private _isAnimating;
47
+ willUpdate(): void;
48
+ updated(changed: Map<string, unknown>): void;
49
+ connectedCallback(): void;
50
+ disconnectedCallback(): void;
51
+ /** 开始动画 */
52
+ start(): void;
53
+ /** 重置到起始值 */
54
+ reset(): void;
55
+ private _stopAnimation;
56
+ private _animate;
57
+ private _formatNumber;
58
+ render(): import("lit").TemplateResult<1>;
59
+ }
60
+ declare global {
61
+ interface HTMLElementTagNameMap {
62
+ 'mac-number-animation': MacNumberAnimation;
63
+ }
64
+ }
@@ -0,0 +1,15 @@
1
+ import type { Meta, StoryObj } from '@storybook/web-components';
2
+ import './mac-number-animation';
3
+ declare const meta: Meta;
4
+ export default meta;
5
+ type Story = StoryObj;
6
+ export declare const Basic: Story;
7
+ export declare const WithSeparator: Story;
8
+ export declare const WithPrecision: Story;
9
+ export declare const WithPrefixSuffix: Story;
10
+ export declare const EasingComparison: Story;
11
+ export declare const Sizes: Story;
12
+ export declare const Countdown: Story;
13
+ export declare const ManualControl: Story;
14
+ export declare const FinishCallback: Story;
15
+ export declare const SlotPrefixSuffix: Story;
@@ -0,0 +1,77 @@
1
+ import { BaseElement } from '../../internal/base-element';
2
+ /**
3
+ * @tag mac-popconfirm
4
+ * @summary macOS 风格的气泡确认组件。
5
+ *
6
+ * @slot - 触发元素。
7
+ * @slot action - 自定义操作按钮(替换默认确认/取消按钮)。
8
+ *
9
+ * @cssproperty --md-popconfirm-bg - 气泡背景。
10
+ * @cssproperty --md-popconfirm-border - 气泡边框。
11
+ * @cssproperty --md-popconfirm-shadow - 气泡阴影。
12
+ * @cssproperty --md-popconfirm-radius - 气泡圆角。
13
+ * @cssproperty --md-popconfirm-padding - 气泡内边距。
14
+ * @cssproperty --md-popconfirm-icon-color - 图标颜色。
15
+ * @cssproperty --md-popconfirm-title-color - 标题文字颜色。
16
+ * @cssproperty --md-popconfirm-title-font-size - 标题字体大小。
17
+ * @cssproperty --md-popconfirm-desc-color - 描述文字颜色。
18
+ * @cssproperty --md-popconfirm-desc-font-size - 描述字体大小。
19
+ * @cssproperty --md-popconfirm-btn-gap - 操作按钮间距。
20
+ *
21
+ * @event mac-popconfirm-confirm - 点击确认按钮时触发。
22
+ * @event mac-popconfirm-cancel - 点击取消按钮时触发。
23
+ * @event mac-popconfirm-open - 气泡打开时触发。
24
+ * @event mac-popconfirm-close - 气泡关闭时触发。
25
+ */
26
+ export declare class MacPopconfirm extends BaseElement {
27
+ static styles: import("lit").CSSResult[];
28
+ /** 确认标题文本 */
29
+ title: string;
30
+ /** 确认描述文本 */
31
+ description: string;
32
+ /** 确认按钮文本 */
33
+ confirmText: string;
34
+ /** 取消按钮文本 */
35
+ cancelText: string;
36
+ /** 确认按钮是否为危险样式 */
37
+ danger: boolean;
38
+ /** 是否显示图标 */
39
+ showIcon: boolean;
40
+ /** 气泡位置 */
41
+ placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
42
+ /** 触发模式 */
43
+ trigger: 'click' | 'hover';
44
+ /** 是否禁用气泡确认 */
45
+ disabled: boolean;
46
+ /** 气泡宽度 */
47
+ width: string;
48
+ private _visible;
49
+ private _popoverEl;
50
+ private _hoverTimeout;
51
+ private _popoverId;
52
+ private static _portalStylesInjected;
53
+ connectedCallback(): void;
54
+ disconnectedCallback(): void;
55
+ willUpdate(): void;
56
+ private static _injectPortalStyles;
57
+ private _applyThemeVars;
58
+ private _handleDocumentClick;
59
+ private _handleKeyDown;
60
+ private _handleTriggerClick;
61
+ private _handleMouseEnter;
62
+ private _handleMouseLeave;
63
+ private _show;
64
+ private _hide;
65
+ private _confirm;
66
+ private _cancel;
67
+ private _calcPosition;
68
+ private _positionArrow;
69
+ private _createPopover;
70
+ private _removePopover;
71
+ render(): import("lit").TemplateResult<1>;
72
+ }
73
+ declare global {
74
+ interface HTMLElementTagNameMap {
75
+ 'mac-popconfirm': MacPopconfirm;
76
+ }
77
+ }
@@ -0,0 +1,14 @@
1
+ import type { Meta, StoryObj } from '@storybook/web-components';
2
+ import './mac-popconfirm';
3
+ declare const meta: Meta;
4
+ export default meta;
5
+ type Story = StoryObj;
6
+ export declare const Basic: Story;
7
+ export declare const WithDescription: Story;
8
+ export declare const DangerStyle: Story;
9
+ export declare const Placements: Story;
10
+ export declare const HoverTrigger: Story;
11
+ export declare const NoIcon: Story;
12
+ export declare const CustomText: Story;
13
+ export declare const Disabled: Story;
14
+ export declare const CustomWidth: Story;
@@ -0,0 +1 @@
1
+ export { MacProgress } from './mac-progress';
@@ -0,0 +1,76 @@
1
+ import { BaseElement } from '../../internal/base-element';
2
+ export interface CircleConfig {
3
+ percentage: number;
4
+ color?: string;
5
+ strokeWidth?: number;
6
+ }
7
+ export interface GradientStop {
8
+ color: string;
9
+ offset?: number;
10
+ }
11
+ export interface GradientConfig {
12
+ from?: string;
13
+ to?: string;
14
+ angle?: number;
15
+ stops?: GradientStop[];
16
+ }
17
+ /**
18
+ * @tag mac-progress
19
+ * @summary 进度组件,用于显示完成状态。
20
+ *
21
+ * @csspart track - 进度轨道容器。
22
+ * @csspart fill - 进度填充指示器。
23
+ * @csspart text - 进度文本标签。
24
+ *
25
+ * @cssproperty --mac-progress-track-bg - 轨道背景颜色。
26
+ * @cssproperty --mac-progress-fill-color - 填充指示器颜色。
27
+ */
28
+ export declare class MacProgress extends BaseElement {
29
+ static styles: import("lit").CSSResult[];
30
+ /** 当前进度百分比(0-100)。 */
31
+ percentage: number;
32
+ /** 进度指示器类型。 */
33
+ type: 'line' | 'circle';
34
+ /** 进度状态。 */
35
+ status: 'default' | 'success' | 'warning' | 'error';
36
+ /** 进度组件尺寸。 */
37
+ size: 'sm' | 'md' | 'lg';
38
+ /** 是否显示百分比文本。 */
39
+ showText: boolean;
40
+ /** 进度是否处于处理状态(显示动画)。 */
41
+ processing: boolean;
42
+ /** 进度填充的自定义颜色。覆盖状态颜色。 */
43
+ color?: string;
44
+ /** 环形进度条的描边宽度(像素)。 */
45
+ strokeWidth: number;
46
+ /** 环形进度条的宽度/高度(像素)。 */
47
+ width: number;
48
+ /**
49
+ * 多环配置的嵌套环形显示。
50
+ * 每项定义一个环,包含百分比、可选颜色和可选描边宽度。
51
+ * 设置时渲染多个同心环,而非单个圆环。
52
+ */
53
+ circles?: CircleConfig[];
54
+ /**
55
+ * 进度填充的渐变配置。
56
+ * 设置时,为填充应用线性渐变。
57
+ * 环形类型使用 SVG linearGradient。
58
+ * 线性类型使用 CSS linear-gradient。
59
+ */
60
+ gradient?: GradientConfig;
61
+ private get _normalizedPercentage();
62
+ private get _progressSize();
63
+ private get _fillColor();
64
+ private _hasGradient;
65
+ private _getGradientId;
66
+ private _renderGradientDefs;
67
+ private _renderLine;
68
+ private _renderCircle;
69
+ private _renderMultiCircle;
70
+ render(): import("lit").TemplateResult<1>;
71
+ }
72
+ declare global {
73
+ interface HTMLElementTagNameMap {
74
+ 'mac-progress': MacProgress;
75
+ }
76
+ }
@@ -0,0 +1,25 @@
1
+ import type { Meta, StoryObj } from '@storybook/web-components';
2
+ import './mac-progress';
3
+ declare const meta: Meta;
4
+ export default meta;
5
+ type Story = StoryObj;
6
+ export declare const Default: Story;
7
+ export declare const LineSizes: Story;
8
+ export declare const LineStatuses: Story;
9
+ export declare const WithoutText: Story;
10
+ export declare const CustomColor: Story;
11
+ export declare const LineGradient: Story;
12
+ export declare const LineGradientCustomStops: Story;
13
+ export declare const LineProcessing: Story;
14
+ export declare const CircleDefault: Story;
15
+ export declare const CircleStatuses: Story;
16
+ export declare const CircleSizes: Story;
17
+ export declare const CircleCustomColor: Story;
18
+ export declare const CircleGradient: Story;
19
+ export declare const CircleGradientCustomStops: Story;
20
+ export declare const CircleProcessing: Story;
21
+ export declare const CircleWithoutText: Story;
22
+ export declare const MultiCircle: Story;
23
+ export declare const MultiCircleWithGradient: Story;
24
+ export declare const MultiCircleProcessing: Story;
25
+ export declare const RacingCircles: Story;
@@ -0,0 +1,2 @@
1
+ export { MacRadio, MacRadioGroup } from './mac-radio';
2
+ export type { RadioOption } from './mac-radio';
@@ -0,0 +1,90 @@
1
+ import { BaseElement } from '../../internal/base-element';
2
+ /**
3
+ * @tag mac-radio
4
+ * @summary macOS 风格的单选按钮组件。
5
+ *
6
+ * @slot - 单选按钮的标签。
7
+ *
8
+ * @csspart base - 单选按钮的基础容器。
9
+ * @csspart control - 单选按钮控制圆圈。
10
+ * @csspart label - 标签元素。
11
+ */
12
+ export declare class MacRadio extends BaseElement {
13
+ static styles: import("lit").CSSResult[];
14
+ /** 单选按钮的值。 */
15
+ value: string;
16
+ /** 单选按钮是否选中(受控)。 */
17
+ checked: boolean;
18
+ /** 单选按钮默认是否选中(非受控)。 */
19
+ defaultChecked: boolean;
20
+ /** 禁用单选按钮。 */
21
+ disabled: boolean;
22
+ /** 单选按钮的标签文本。 */
23
+ label: string;
24
+ /** 单选按钮的尺寸。 */
25
+ size?: 'sm' | 'md' | 'lg';
26
+ private _groupValue?;
27
+ private get _isControlled();
28
+ private get _isChecked();
29
+ connectedCallback(): void;
30
+ disconnectedCallback(): void;
31
+ private _registerToGroup;
32
+ private _unregisterFromGroup;
33
+ private _findGroup;
34
+ /** 由父级组调用以同步值。 */
35
+ _setGroupValue(value: string | undefined): void;
36
+ private _handleClick;
37
+ private _handleKeydown;
38
+ render(): import("lit").TemplateResult<1>;
39
+ }
40
+ export interface RadioOption {
41
+ value: string;
42
+ label: string;
43
+ disabled?: boolean;
44
+ }
45
+ /**
46
+ * @tag mac-radio-group
47
+ * @summary macOS 风格的单选按钮组组件。
48
+ *
49
+ * @slot - 默认插槽,用于 mac-radio 元素。
50
+ *
51
+ * @csspart base - 组的基础容器。
52
+ *
53
+ * @event mac-change - 选中值变化时触发。
54
+ */
55
+ export declare class MacRadioGroup extends BaseElement {
56
+ static styles: import("lit").CSSResult[];
57
+ /** 组的值(受控)。 */
58
+ value?: string;
59
+ /** 默认值(非受控)。 */
60
+ defaultValue?: string;
61
+ /** 单选按钮 name 属性。 */
62
+ name: string;
63
+ /** 组的尺寸。 */
64
+ size?: 'sm' | 'md' | 'lg';
65
+ /** 禁用组内所有单选按钮。 */
66
+ disabled: boolean;
67
+ /** 布局方向。 */
68
+ direction: 'horizontal' | 'vertical';
69
+ /** 简化使用的选项数组。 */
70
+ options?: RadioOption[];
71
+ private _radios;
72
+ private get _isControlled();
73
+ private get _resolvedValue();
74
+ connectedCallback(): void;
75
+ updated(): void;
76
+ _registerRadio(radio: MacRadio): void;
77
+ private _applyGroupProps;
78
+ private _applyPropsToRadio;
79
+ _unregisterRadio(radio: MacRadio): void;
80
+ _selectValue(value: string): void;
81
+ private _syncRadios;
82
+ private _handleSlotChange;
83
+ render(): import("lit").TemplateResult<1>;
84
+ }
85
+ declare global {
86
+ interface HTMLElementTagNameMap {
87
+ 'mac-radio': MacRadio;
88
+ 'mac-radio-group': MacRadioGroup;
89
+ }
90
+ }
@@ -0,0 +1,17 @@
1
+ import type { Meta, StoryObj } from '@storybook/web-components';
2
+ import './mac-radio';
3
+ declare const meta: Meta;
4
+ export default meta;
5
+ type Story = StoryObj;
6
+ export declare const Default: Story;
7
+ export declare const Checked: Story;
8
+ export declare const Disabled: Story;
9
+ export declare const Sizes: Story;
10
+ export declare const SlotLabel: Story;
11
+ export declare const GroupDefault: Story;
12
+ export declare const GroupWithOptions: Story;
13
+ export declare const GroupVertical: Story;
14
+ export declare const GroupDisabled: Story;
15
+ export declare const GroupMixedDisabled: Story;
16
+ export declare const GroupSizes: Story;
17
+ export declare const GroupUncontrolled: Story;
@@ -0,0 +1,56 @@
1
+ import { BaseElement } from '../../internal/base-element';
2
+ /**
3
+ * @tag mac-rating
4
+ * @summary macOS 风格的评分组件,支持自定义图标。
5
+ *
6
+ * @slot icon-empty - 空状态时的自定义图标。
7
+ * @slot icon-half - 半填充状态时的自定义图标。
8
+ * @slot icon-full - 全填充状态时的自定义图标。
9
+ *
10
+ * @cssproperty --md-rating-icon-size - 每个评分图标的大小。
11
+ * @cssproperty --md-rating-gap - 图标之间的间距。
12
+ * @cssproperty --md-rating-color-active - 激活(已填充)图标的颜色。
13
+ * @cssproperty --md-rating-color-inactive - 未激活(空)图标的颜色。
14
+ * @cssproperty --md-rating-color-hover - 悬停时图标的颜色。
15
+ * @cssproperty --md-rating-color-disabled - 禁用时的颜色。
16
+ *
17
+ * @event mac-rating-change - 评分值变化时触发。`detail: { value: number }`
18
+ */
19
+ export declare class MacRating extends BaseElement {
20
+ static styles: import("lit").CSSResult[];
21
+ /** 当前评分值(支持半星,如 3.5) */
22
+ value: number;
23
+ /** 最大评分数量 */
24
+ max: number;
25
+ /** 是否允许半星选择 */
26
+ allowHalf: boolean;
27
+ /** 评分是否为只读 */
28
+ readonly: boolean;
29
+ /** 评分是否禁用 */
30
+ disabled: boolean;
31
+ /** 是否显示数值标签 */
32
+ showValue: boolean;
33
+ /** 图标形状:star, heart, circle, flame, thumb */
34
+ icon: 'star' | 'heart' | 'circle' | 'flame' | 'thumb';
35
+ /** 自定义空图标插槽名(覆盖内置图标) */
36
+ iconEmpty: string;
37
+ /** 自定义半图标插槽名(覆盖内置图标) */
38
+ iconHalf: string;
39
+ /** 自定义满图标插槽名(覆盖内置图标) */
40
+ iconFull: string;
41
+ private _hoverValue;
42
+ private static readonly _icons;
43
+ private _getIconSvg;
44
+ private _renderIconLayer;
45
+ willUpdate(): void;
46
+ private _getDisplayValue;
47
+ private _onMouseEnter;
48
+ private _onMouseLeave;
49
+ private _onClick;
50
+ render(): import("lit").TemplateResult<1>;
51
+ }
52
+ declare global {
53
+ interface HTMLElementTagNameMap {
54
+ 'mac-rating': MacRating;
55
+ }
56
+ }
@@ -0,0 +1,15 @@
1
+ import type { Meta, StoryObj } from '@storybook/web-components';
2
+ import './mac-rating';
3
+ declare const meta: Meta;
4
+ export default meta;
5
+ type Story = StoryObj;
6
+ export declare const Basic: Story;
7
+ export declare const WithValue: Story;
8
+ export declare const HalfStar: Story;
9
+ export declare const IconVariants: Story;
10
+ export declare const Readonly: Story;
11
+ export declare const Disabled: Story;
12
+ export declare const CustomSize: Story;
13
+ export declare const CustomColor: Story;
14
+ export declare const MaxCount: Story;
15
+ export declare const ClickToClear: Story;
@@ -0,0 +1 @@
1
+ export * from './mac-select';
@@ -0,0 +1,97 @@
1
+ import { BaseElement } from '../../internal/base-element';
2
+ export interface SelectOption {
3
+ value: string;
4
+ label: string;
5
+ disabled?: boolean;
6
+ icon?: string;
7
+ description?: string;
8
+ }
9
+ export interface OptionGroup {
10
+ label: string;
11
+ options: SelectOption[];
12
+ }
13
+ /**
14
+ * @tag mac-select
15
+ * @summary macOS 风格的下拉选择组件。
16
+ *
17
+ * @csspart base - 选择器的基础容器。
18
+ * @csspart trigger - 触发按钮。
19
+ * @csspart dropdown - 下拉菜单。
20
+ * @csspart option - 下拉菜单中的选项。
21
+ */
22
+ export declare class MacSelect extends BaseElement {
23
+ static styles: import("lit").CSSResult[];
24
+ /** 选择器的值(单选:string,多选:string[])。 */
25
+ value: string | string[];
26
+ /** 选择器的占位符。 */
27
+ placeholder: string;
28
+ /** 选择器的选项。 */
29
+ options: SelectOption[];
30
+ /** 选项分组。 */
31
+ groups: OptionGroup[];
32
+ /** 选择器的尺寸。 */
33
+ size?: 'sm' | 'md' | 'lg';
34
+ /** 视觉变体。 */
35
+ variant: 'default' | 'filled' | 'glass';
36
+ /** 选择器的标签。 */
37
+ label: string;
38
+ /** 显示必填指示器。 */
39
+ required: boolean;
40
+ /** 禁用选择器。 */
41
+ disabled: boolean;
42
+ /** 选择器的错误状态。 */
43
+ error: boolean;
44
+ /** 选择器的成功状态。 */
45
+ success: boolean;
46
+ /** 选择器的辅助文本。 */
47
+ helperText: string;
48
+ /** 启用多选。 */
49
+ multiple: boolean;
50
+ /** 显示清除按钮。 */
51
+ clearable: boolean;
52
+ /** 启用搜索功能。 */
53
+ searchable: boolean;
54
+ /** 显示加载状态。 */
55
+ loading: boolean;
56
+ /** 搜索输入框的占位符。 */
57
+ searchPlaceholder: string;
58
+ /** 无选项时的空文本。 */
59
+ emptyText: string;
60
+ private _open;
61
+ private _searchQuery;
62
+ private _focusedIndex;
63
+ private _trigger;
64
+ private _portalEl;
65
+ private _portalId;
66
+ private _scrollHandler;
67
+ private static _stylesInjected;
68
+ private static _injectPortalStyles;
69
+ private _handleDocumentClick;
70
+ connectedCallback(): void;
71
+ disconnectedCallback(): void;
72
+ private _addScrollListener;
73
+ private _removeScrollListener;
74
+ private _toggle;
75
+ private _openDropdown;
76
+ private _close;
77
+ private _createPortal;
78
+ private _removePortal;
79
+ private _renderDropdownHTML;
80
+ private _bindPortalEvents;
81
+ private _getAllOptions;
82
+ private _getFilteredOptions;
83
+ private _isSelected;
84
+ private _selectOption;
85
+ private _removeTag;
86
+ private _clear;
87
+ private _handleKeyDown;
88
+ private _scrollToOption;
89
+ private _getDisplayValue;
90
+ willUpdate(): void;
91
+ render(): import("lit").TemplateResult<1>;
92
+ }
93
+ declare global {
94
+ interface HTMLElementTagNameMap {
95
+ 'mac-select': MacSelect;
96
+ }
97
+ }