@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.
- package/README.md +940 -0
- package/dist/favicon.svg +1 -0
- package/dist/mac-ui.cjs.js +12367 -0
- package/dist/mac-ui.cjs.js.map +1 -0
- package/dist/mac-ui.es.js +18444 -0
- package/dist/mac-ui.es.js.map +1 -0
- package/dist/mac-ui.umd.js +12367 -0
- package/dist/mac-ui.umd.js.map +1 -0
- package/dist/types/components/alert/index.d.ts +1 -0
- package/dist/types/components/alert/mac-alert.d.ts +38 -0
- package/dist/types/components/alert/mac-alert.stories.d.ts +15 -0
- package/dist/types/components/animation/animations.d.ts +97 -0
- package/dist/types/components/animation/index.d.ts +3 -0
- package/dist/types/components/animation/mac-animation.d.ts +67 -0
- package/dist/types/components/animation/mac-animation.stories.d.ts +9 -0
- package/dist/types/components/button/index.d.ts +1 -0
- package/dist/types/components/button/mac-button.d.ts +37 -0
- package/dist/types/components/button/mac-button.stories.d.ts +14 -0
- package/dist/types/components/card/index.d.ts +1 -0
- package/dist/types/components/card/mac-card.d.ts +38 -0
- package/dist/types/components/card/mac-card.stories.d.ts +14 -0
- package/dist/types/components/carousel/index.d.ts +1 -0
- package/dist/types/components/carousel/mac-carousel.d.ts +105 -0
- package/dist/types/components/carousel/mac-carousel.stories.d.ts +18 -0
- package/dist/types/components/checkbox/index.d.ts +2 -0
- package/dist/types/components/checkbox/mac-checkbox.d.ts +94 -0
- package/dist/types/components/checkbox/mac-checkbox.stories.d.ts +17 -0
- package/dist/types/components/config-provider/index.d.ts +1 -0
- package/dist/types/components/config-provider/mac-config-provider.d.ts +23 -0
- package/dist/types/components/config-provider/mac-config-provider.stories.d.ts +12 -0
- package/dist/types/components/confirm/index.d.ts +2 -0
- package/dist/types/components/confirm/mac-confirm.d.ts +86 -0
- package/dist/types/components/confirm/mac-confirm.stories.d.ts +15 -0
- package/dist/types/components/data-table/index.d.ts +2 -0
- package/dist/types/components/data-table/mac-data-table.d.ts +212 -0
- package/dist/types/components/data-table/mac-data-table.stories.d.ts +18 -0
- package/dist/types/components/date-picker/date-picker-utils.d.ts +13 -0
- package/dist/types/components/date-picker/index.d.ts +3 -0
- package/dist/types/components/date-picker/mac-date-picker.d.ts +72 -0
- package/dist/types/components/date-picker/mac-date-picker.stories.d.ts +28 -0
- package/dist/types/components/date-picker/mac-date-range-picker.d.ts +58 -0
- package/dist/types/components/date-picker/mac-date-range-picker.stories.d.ts +13 -0
- package/dist/types/components/descriptions/mac-descriptions.d.ts +99 -0
- package/dist/types/components/descriptions/mac-descriptions.stories.d.ts +21 -0
- package/dist/types/components/desktop/index.d.ts +2 -0
- package/dist/types/components/desktop/mac-desktop.d.ts +88 -0
- package/dist/types/components/desktop/mac-desktop.stories.d.ts +17 -0
- package/dist/types/components/desktop-icon/index.d.ts +1 -0
- package/dist/types/components/desktop-icon/mac-desktop-icon.d.ts +46 -0
- package/dist/types/components/desktop-icon/mac-desktop-icon.stories.d.ts +8 -0
- package/dist/types/components/dock/index.d.ts +2 -0
- package/dist/types/components/dock/mac-dock-item.d.ts +37 -0
- package/dist/types/components/dock/mac-dock.d.ts +74 -0
- package/dist/types/components/dock/mac-dock.stories.d.ts +13 -0
- package/dist/types/components/drawer/mac-drawer.d.ts +87 -0
- package/dist/types/components/drawer/mac-drawer.stories.d.ts +15 -0
- package/dist/types/components/dropdown/index.d.ts +2 -0
- package/dist/types/components/dropdown/mac-dropdown.d.ts +77 -0
- package/dist/types/components/dropdown/mac-dropdown.stories.d.ts +13 -0
- package/dist/types/components/dynamic-tags/index.d.ts +1 -0
- package/dist/types/components/dynamic-tags/mac-dynamic-tags.d.ts +64 -0
- package/dist/types/components/dynamic-tags/mac-dynamic-tags.stories.d.ts +16 -0
- package/dist/types/components/form/index.d.ts +3 -0
- package/dist/types/components/form/mac-form-item.d.ts +67 -0
- package/dist/types/components/form/mac-form.d.ts +64 -0
- package/dist/types/components/form/mac-form.stories.d.ts +18 -0
- package/dist/types/components/group-button/index.d.ts +2 -0
- package/dist/types/components/group-button/mac-group-button.d.ts +50 -0
- package/dist/types/components/group-button/mac-group-button.stories.d.ts +13 -0
- package/dist/types/components/infinite-scroll/index.d.ts +1 -0
- package/dist/types/components/infinite-scroll/mac-infinite-scroll.d.ts +57 -0
- package/dist/types/components/infinite-scroll/mac-infinite-scroll.stories.d.ts +11 -0
- package/dist/types/components/input/index.d.ts +1 -0
- package/dist/types/components/input/mac-input.d.ts +73 -0
- package/dist/types/components/input/mac-input.stories.d.ts +19 -0
- package/dist/types/components/input-number/index.d.ts +1 -0
- package/dist/types/components/input-number/mac-input-number.d.ts +81 -0
- package/dist/types/components/input-number/mac-input-number.stories.d.ts +18 -0
- package/dist/types/components/lazy-image/index.d.ts +1 -0
- package/dist/types/components/lazy-image/mac-lazy-image.d.ts +86 -0
- package/dist/types/components/lazy-image/mac-lazy-image.stories.d.ts +15 -0
- package/dist/types/components/menu/index.d.ts +2 -0
- package/dist/types/components/menu/mac-menu.d.ts +63 -0
- package/dist/types/components/menu/mac-menu.stories.d.ts +11 -0
- package/dist/types/components/modal/index.d.ts +1 -0
- package/dist/types/components/modal/mac-modal.d.ts +96 -0
- package/dist/types/components/modal/mac-modal.stories.d.ts +12 -0
- package/dist/types/components/number-animation/mac-number-animation.d.ts +64 -0
- package/dist/types/components/number-animation/mac-number-animation.stories.d.ts +15 -0
- package/dist/types/components/popconfirm/mac-popconfirm.d.ts +77 -0
- package/dist/types/components/popconfirm/mac-popconfirm.stories.d.ts +14 -0
- package/dist/types/components/progress/index.d.ts +1 -0
- package/dist/types/components/progress/mac-progress.d.ts +76 -0
- package/dist/types/components/progress/mac-progress.stories.d.ts +25 -0
- package/dist/types/components/radio/index.d.ts +2 -0
- package/dist/types/components/radio/mac-radio.d.ts +90 -0
- package/dist/types/components/radio/mac-radio.stories.d.ts +17 -0
- package/dist/types/components/rating/mac-rating.d.ts +56 -0
- package/dist/types/components/rating/mac-rating.stories.d.ts +15 -0
- package/dist/types/components/select/index.d.ts +1 -0
- package/dist/types/components/select/mac-select.d.ts +97 -0
- package/dist/types/components/select/mac-select.stories.d.ts +18 -0
- package/dist/types/components/split/index.d.ts +1 -0
- package/dist/types/components/split/mac-split.d.ts +69 -0
- package/dist/types/components/split/mac-split.stories.d.ts +13 -0
- package/dist/types/components/tabs/mac-tabs.d.ts +119 -0
- package/dist/types/components/tabs/mac-tabs.stories.d.ts +15 -0
- package/dist/types/components/tag/index.d.ts +1 -0
- package/dist/types/components/tag/mac-tag.d.ts +40 -0
- package/dist/types/components/tag/mac-tag.stories.d.ts +20 -0
- package/dist/types/components/text-ellipsis/mac-text-ellipsis.d.ts +47 -0
- package/dist/types/components/text-ellipsis/mac-text-ellipsis.stories.d.ts +15 -0
- package/dist/types/components/tree/index.d.ts +2 -0
- package/dist/types/components/tree/mac-tree.d.ts +79 -0
- package/dist/types/components/tree/mac-tree.stories.d.ts +12 -0
- package/dist/types/components/tree-select/index.d.ts +2 -0
- package/dist/types/components/tree-select/mac-tree-select.d.ts +59 -0
- package/dist/types/components/tree-select/mac-tree-select.stories.d.ts +19 -0
- package/dist/types/internal/base-element.d.ts +18 -0
- package/dist/types/internal/property-converters.d.ts +7 -0
- package/dist/types/mac-ui.d.ts +60 -0
- package/dist/types/styles/shared-styles.d.ts +2 -0
- package/dist/types/styles/theme.d.ts +11 -0
- package/dist/types/test/setup.d.ts +1 -0
- package/package.json +86 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import './mac-select';
|
|
3
|
+
declare const meta: Meta;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export declare const Variants: Story;
|
|
8
|
+
export declare const Sizes: Story;
|
|
9
|
+
export declare const States: Story;
|
|
10
|
+
export declare const WithIcons: Story;
|
|
11
|
+
export declare const WithDescriptions: Story;
|
|
12
|
+
export declare const Searchable: Story;
|
|
13
|
+
export declare const Multiple: Story;
|
|
14
|
+
export declare const OptionGroups: Story;
|
|
15
|
+
export declare const Loading: Story;
|
|
16
|
+
export declare const Clearable: Story;
|
|
17
|
+
export declare const CompleteExample: Story;
|
|
18
|
+
export declare const GlassSelect: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MacSplit, MacSplitPane } from './mac-split';
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { BaseElement } from '../../internal/base-element';
|
|
2
|
+
/**
|
|
3
|
+
* @tag mac-split-pane
|
|
4
|
+
* @summary 在 mac-split 内部使用的窗格容器。
|
|
5
|
+
*
|
|
6
|
+
* @slot - 窗格的内容。
|
|
7
|
+
*
|
|
8
|
+
* @csspart base - 窗格的基础容器。
|
|
9
|
+
*/
|
|
10
|
+
export declare class MacSplitPane extends BaseElement {
|
|
11
|
+
static styles: import("lit").CSSResult[];
|
|
12
|
+
render(): import("lit").TemplateResult<1>;
|
|
13
|
+
}
|
|
14
|
+
declare global {
|
|
15
|
+
interface HTMLElementTagNameMap {
|
|
16
|
+
'mac-split-pane': MacSplitPane;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* @tag mac-split
|
|
21
|
+
* @summary macOS 风格的可调整分割面板组件。
|
|
22
|
+
*
|
|
23
|
+
* @slot first - 第一个面板的内容。
|
|
24
|
+
* @slot second - 第二个面板的内容。
|
|
25
|
+
*
|
|
26
|
+
* @csspart base - 分割容器。
|
|
27
|
+
* @csspart first - 第一个面板的包装器。
|
|
28
|
+
* @csspart second - 第二个面板的包装器。
|
|
29
|
+
* @csspart resizer - 可拖拽的调整条。
|
|
30
|
+
* @csspart resizer-line - 调整条内的视觉线条。
|
|
31
|
+
*
|
|
32
|
+
* @event mac-split-change - 分割值变化时触发。`detail: { value: number }`
|
|
33
|
+
* @event mac-split-drag-start - 开始拖拽时触发。
|
|
34
|
+
* @event mac-split-drag-end - 拖拽结束时触发。
|
|
35
|
+
*/
|
|
36
|
+
export declare class MacSplit extends BaseElement {
|
|
37
|
+
static styles: import("lit").CSSResult[];
|
|
38
|
+
/** 分割方向。 */
|
|
39
|
+
direction: 'horizontal' | 'vertical';
|
|
40
|
+
/** 初始分割值,比例(0-1)或像素。 */
|
|
41
|
+
split: number;
|
|
42
|
+
/** 分割值的单位:'ratio'(0-1)或 'pixel'。 */
|
|
43
|
+
unit: 'ratio' | 'pixel';
|
|
44
|
+
/** 第一个面板的最小尺寸(像素)。 */
|
|
45
|
+
min: number;
|
|
46
|
+
/** 第一个面板的最大尺寸(像素)。0 表示无限制。 */
|
|
47
|
+
max: number;
|
|
48
|
+
/** 禁用调整大小。 */
|
|
49
|
+
disabled: boolean;
|
|
50
|
+
private _dragging;
|
|
51
|
+
private _currentSplit;
|
|
52
|
+
private _splitRef;
|
|
53
|
+
private _resizerRef;
|
|
54
|
+
connectedCallback(): void;
|
|
55
|
+
firstUpdated(): void;
|
|
56
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
57
|
+
private _updateFirstSize;
|
|
58
|
+
private _onResizerMouseDown;
|
|
59
|
+
private _onDocumentMouseMove;
|
|
60
|
+
private _onDocumentMouseUp;
|
|
61
|
+
disconnectedCallback(): void;
|
|
62
|
+
render(): import("lit").TemplateResult<1>;
|
|
63
|
+
}
|
|
64
|
+
declare global {
|
|
65
|
+
interface HTMLElementTagNameMap {
|
|
66
|
+
'mac-split': MacSplit;
|
|
67
|
+
'mac-split-pane': MacSplitPane;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import './mac-split';
|
|
3
|
+
declare const meta: Meta;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export declare const Horizontal: Story;
|
|
8
|
+
export declare const Vertical: Story;
|
|
9
|
+
export declare const WithMinMax: Story;
|
|
10
|
+
export declare const Disabled: Story;
|
|
11
|
+
export declare const PixelUnit: Story;
|
|
12
|
+
export declare const Nested: Story;
|
|
13
|
+
export declare const WithCards: Story;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { BaseElement } from '../../internal/base-element';
|
|
2
|
+
export interface TabItem {
|
|
3
|
+
/** 唯一键 */
|
|
4
|
+
key: string;
|
|
5
|
+
/** 标签文本 */
|
|
6
|
+
label: string;
|
|
7
|
+
/** 标签是否禁用 */
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
/** 标签是否可关闭 */
|
|
10
|
+
closable?: boolean;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* @tag mac-tabs
|
|
14
|
+
* @summary macOS 风格的标签页组件,带带动画指示器。
|
|
15
|
+
*
|
|
16
|
+
* @slot - 用于放置 mac-tab-pane 元素的默认插槽。
|
|
17
|
+
* @slot prefix - 标签导航前的内容。
|
|
18
|
+
* @slot suffix - 标签导航后的内容。
|
|
19
|
+
*
|
|
20
|
+
* @cssproperty --md-tabs-nav-bg - Tab navigation bar background.
|
|
21
|
+
* @cssproperty --md-tabs-nav-border - Tab navigation bar bottom border.
|
|
22
|
+
* @cssproperty --md-tabs-nav-padding - Tab navigation bar padding.
|
|
23
|
+
* @cssproperty --md-tabs-item-color - Tab item text color.
|
|
24
|
+
* @cssproperty --md-tabs-item-hover-color - Tab item hover text color.
|
|
25
|
+
* @cssproperty --md-tabs-item-active-color - Tab item active text color.
|
|
26
|
+
* @cssproperty --md-tabs-item-disabled-color - Tab item disabled text color.
|
|
27
|
+
* @cssproperty --md-tabs-item-padding - Tab item padding.
|
|
28
|
+
* @cssproperty --md-tabs-item-font-size - Tab item font size.
|
|
29
|
+
* @cssproperty --md-tabs-item-gap - Gap between tab items.
|
|
30
|
+
* @cssproperty --md-tabs-indicator-color - Active indicator color.
|
|
31
|
+
* @cssproperty --md-tabs-indicator-height - Active indicator height.
|
|
32
|
+
* @cssproperty --md-tabs-indicator-radius - Active indicator radius.
|
|
33
|
+
* @cssproperty --md-tabs-pane-padding - Tab pane content padding.
|
|
34
|
+
* @cssproperty --md-tabs-close-color - Close icon color.
|
|
35
|
+
* @cssproperty --md-tabs-close-hover-color - Close icon hover color.
|
|
36
|
+
* @cssproperty --md-tabs-close-hover-bg - Close icon hover background.
|
|
37
|
+
* @cssproperty --md-tabs-add-color - Add icon color.
|
|
38
|
+
* @cssproperty --md-tabs-add-hover-color - Add icon hover color.
|
|
39
|
+
* @cssproperty --md-tabs-add-hover-bg - Add icon hover background.
|
|
40
|
+
* @cssproperty --md-tabs-segment-bg - Segment type background.
|
|
41
|
+
* @cssproperty --md-tabs-segment-item-color - Segment item text color.
|
|
42
|
+
* @cssproperty --md-tabs-segment-item-active-bg - Segment active item background.
|
|
43
|
+
* @cssproperty --md-tabs-segment-item-active-color - Segment active item text color.
|
|
44
|
+
* @cssproperty --md-tabs-segment-item-hover-bg - Segment item hover background.
|
|
45
|
+
* @cssproperty --md-tabs-segment-radius - Segment container radius.
|
|
46
|
+
*
|
|
47
|
+
* @event mac-tabs-change - 激活标签变化时触发。`detail: { key: string }`
|
|
48
|
+
* @event mac-tabs-close - 标签关闭时触发。`detail: { key: string }`
|
|
49
|
+
* @event mac-tabs-add - 点击添加按钮时触发。
|
|
50
|
+
*/
|
|
51
|
+
export declare class MacTabs extends BaseElement {
|
|
52
|
+
static styles: import("lit").CSSResult[];
|
|
53
|
+
/** 标签类型:line(下划线指示器)、card(卡片标签)、segment(分段控制器) */
|
|
54
|
+
type: 'line' | 'card' | 'segment';
|
|
55
|
+
/** 组件尺寸 */
|
|
56
|
+
size?: 'sm' | 'md' | 'lg';
|
|
57
|
+
/** 激活标签的键(受控模式) */
|
|
58
|
+
value: string;
|
|
59
|
+
/** 默认激活标签的键(非受控模式) */
|
|
60
|
+
defaultValue: string;
|
|
61
|
+
/** 标签是否可关闭 */
|
|
62
|
+
closable: boolean;
|
|
63
|
+
/** 是否显示添加按钮 */
|
|
64
|
+
addable: boolean;
|
|
65
|
+
/** 是否启用标签切换动画 */
|
|
66
|
+
animated: boolean;
|
|
67
|
+
/** 触发模式:click 或 hover */
|
|
68
|
+
trigger: 'click' | 'hover';
|
|
69
|
+
/** 标签项数据(替代插槽方式) */
|
|
70
|
+
items: TabItem[];
|
|
71
|
+
private _activeKey;
|
|
72
|
+
private _navContent;
|
|
73
|
+
willUpdate(): void;
|
|
74
|
+
connectedCallback(): void;
|
|
75
|
+
updated(changed: Map<string, unknown>): void;
|
|
76
|
+
firstUpdated(): void;
|
|
77
|
+
private _initActiveKey;
|
|
78
|
+
private _getItems;
|
|
79
|
+
private _getActiveKey;
|
|
80
|
+
private _selectTab;
|
|
81
|
+
private _closeTab;
|
|
82
|
+
private _handleAdd;
|
|
83
|
+
private _handleTabHover;
|
|
84
|
+
private _updateIndicator;
|
|
85
|
+
private _syncPanes;
|
|
86
|
+
private _renderCloseBtn;
|
|
87
|
+
private _renderAddBtn;
|
|
88
|
+
private _renderNav;
|
|
89
|
+
render(): import("lit").TemplateResult<1>;
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* @tag mac-tab-pane
|
|
93
|
+
* @summary mac-tabs 的子面板(用于插槽模式)。
|
|
94
|
+
*
|
|
95
|
+
* @property tab-key - 与标签匹配的唯一键。
|
|
96
|
+
* @property label - 标签文本。
|
|
97
|
+
* @property disabled - 标签是否禁用。
|
|
98
|
+
* @property closable - 标签是否可关闭。
|
|
99
|
+
*/
|
|
100
|
+
export declare class MacTabPane extends BaseElement {
|
|
101
|
+
static styles: import("lit").CSSResult[];
|
|
102
|
+
/** 唯一键 */
|
|
103
|
+
tabKey: string;
|
|
104
|
+
/** 标签文本 */
|
|
105
|
+
label: string;
|
|
106
|
+
/** 标签是否禁用 */
|
|
107
|
+
disabled: boolean;
|
|
108
|
+
/** 标签是否可关闭 */
|
|
109
|
+
closable: boolean;
|
|
110
|
+
/** 此面板当前是否激活(由 mac-tabs 管理) */
|
|
111
|
+
active: boolean;
|
|
112
|
+
render(): import("lit").TemplateResult<1>;
|
|
113
|
+
}
|
|
114
|
+
declare global {
|
|
115
|
+
interface HTMLElementTagNameMap {
|
|
116
|
+
'mac-tabs': MacTabs;
|
|
117
|
+
'mac-tab-pane': MacTabPane;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import './mac-tabs';
|
|
3
|
+
declare const meta: Meta;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export declare const LineType: Story;
|
|
8
|
+
export declare const CardType: Story;
|
|
9
|
+
export declare const SegmentType: Story;
|
|
10
|
+
export declare const ClosableAndAddable: Story;
|
|
11
|
+
export declare const DisabledTab: Story;
|
|
12
|
+
export declare const HoverTrigger: Story;
|
|
13
|
+
export declare const AllSizes: Story;
|
|
14
|
+
export declare const SegmentAllSizes: Story;
|
|
15
|
+
export declare const ManyTabs: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MacTag } from './mac-tag';
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { BaseElement } from '../../internal/base-element';
|
|
2
|
+
/**
|
|
3
|
+
* @tag mac-tag
|
|
4
|
+
* @summary 用于标签和分类的标记组件。
|
|
5
|
+
*
|
|
6
|
+
* @slot - 标签的文本内容。
|
|
7
|
+
* @slot prefix - 标签前的内容。
|
|
8
|
+
* @slot suffix - 标签后的内容。
|
|
9
|
+
*
|
|
10
|
+
* @csspart base - 标签的基础容器。
|
|
11
|
+
* @csspart label - 标签的文本。
|
|
12
|
+
* @csspart prefix - 前缀容器。
|
|
13
|
+
* @csspart suffix - 后缀容器。
|
|
14
|
+
* @csspart close - 关闭按钮。
|
|
15
|
+
*
|
|
16
|
+
* @event mac-close - 点击关闭按钮时触发。
|
|
17
|
+
*/
|
|
18
|
+
export declare class MacTag extends BaseElement {
|
|
19
|
+
static styles: import("lit").CSSResult[];
|
|
20
|
+
/** 标签的类型样式。 */
|
|
21
|
+
type: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
22
|
+
/** 标签的尺寸。 */
|
|
23
|
+
size?: 'sm' | 'md' | 'lg';
|
|
24
|
+
/** 标签是否可关闭。 */
|
|
25
|
+
closable: boolean;
|
|
26
|
+
/** 标签是否为圆角。 */
|
|
27
|
+
round: boolean;
|
|
28
|
+
/** 标签是否有边框。 */
|
|
29
|
+
bordered: boolean;
|
|
30
|
+
/** 禁用标签。 */
|
|
31
|
+
disabled: boolean;
|
|
32
|
+
willUpdate(): void;
|
|
33
|
+
render(): import("lit").TemplateResult<1>;
|
|
34
|
+
private _handleClose;
|
|
35
|
+
}
|
|
36
|
+
declare global {
|
|
37
|
+
interface HTMLElementTagNameMap {
|
|
38
|
+
'mac-tag': MacTag;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import './mac-tag';
|
|
3
|
+
declare const meta: Meta;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Primary: Story;
|
|
8
|
+
export declare const Success: Story;
|
|
9
|
+
export declare const Warning: Story;
|
|
10
|
+
export declare const Danger: Story;
|
|
11
|
+
export declare const Info: Story;
|
|
12
|
+
export declare const Small: Story;
|
|
13
|
+
export declare const Large: Story;
|
|
14
|
+
export declare const Closable: Story;
|
|
15
|
+
export declare const Round: Story;
|
|
16
|
+
export declare const Disabled: Story;
|
|
17
|
+
export declare const AllTypes: Story;
|
|
18
|
+
export declare const AllSizes: Story;
|
|
19
|
+
export declare const NoBorder: Story;
|
|
20
|
+
export declare const WithPrefix: Story;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { BaseElement } from '../../internal/base-element';
|
|
2
|
+
/**
|
|
3
|
+
* @tag mac-text-ellipsis
|
|
4
|
+
* @summary 支持行数限制、点击展开和提示框的文本省略组件。
|
|
5
|
+
*
|
|
6
|
+
* @slot - 文本内容的默认插槽。
|
|
7
|
+
* @slot tooltip - 文本被截断时悬停显示的自定义提示框内容。
|
|
8
|
+
* 如果未提供且 `tooltip` 为 `true`,则将使用完整文本作为提示框内容。
|
|
9
|
+
*
|
|
10
|
+
* @cssproperty --md-ellipsis-color - 文本颜色。
|
|
11
|
+
* @cssproperty --md-ellipsis-expand-color - 展开触发链接的颜色。
|
|
12
|
+
* @cssproperty --md-ellipsis-tooltip-bg - 提示框背景色。
|
|
13
|
+
* @cssproperty --md-ellipsis-tooltip-color - 提示框文本颜色。
|
|
14
|
+
*
|
|
15
|
+
* @event mac-ellipsis-expand - 文本展开或收起时触发。`detail: { expanded: boolean }`
|
|
16
|
+
*/
|
|
17
|
+
export declare class MacTextEllipsis extends BaseElement {
|
|
18
|
+
static styles: import("lit").CSSResult[];
|
|
19
|
+
/** 截断前显示的最大行数。 */
|
|
20
|
+
lineClamp: number;
|
|
21
|
+
/** 如何触发展开。'click' 显示展开链接;'none' 禁用展开。 */
|
|
22
|
+
expandTrigger: 'click' | 'none';
|
|
23
|
+
/** 文本当前是否已展开。 */
|
|
24
|
+
expanded: boolean;
|
|
25
|
+
/** 文本被截断时悬停是否显示提示框。 */
|
|
26
|
+
tooltip: boolean;
|
|
27
|
+
private _isTruncated;
|
|
28
|
+
private _tooltipVisible;
|
|
29
|
+
private _contentEl;
|
|
30
|
+
private _tooltipEl;
|
|
31
|
+
private _tooltipSlot;
|
|
32
|
+
firstUpdated(): void;
|
|
33
|
+
updated(changed: Map<string, unknown>): void;
|
|
34
|
+
private _checkTruncation;
|
|
35
|
+
private _handleContentClick;
|
|
36
|
+
private _handleMouseEnter;
|
|
37
|
+
private _handleMouseLeave;
|
|
38
|
+
private _showTooltip;
|
|
39
|
+
private _hideTooltip;
|
|
40
|
+
disconnectedCallback(): void;
|
|
41
|
+
render(): import("lit").TemplateResult<1>;
|
|
42
|
+
}
|
|
43
|
+
declare global {
|
|
44
|
+
interface HTMLElementTagNameMap {
|
|
45
|
+
'mac-text-ellipsis': MacTextEllipsis;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import './mac-text-ellipsis';
|
|
3
|
+
declare const meta: Meta;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export declare const LineClamp2: Story;
|
|
8
|
+
export declare const LineClamp1: Story;
|
|
9
|
+
export declare const ClickToExpand: Story;
|
|
10
|
+
export declare const ClickToExpandLine2: Story;
|
|
11
|
+
export declare const WithTooltipSlot: Story;
|
|
12
|
+
export declare const WithTooltipBoolean: Story;
|
|
13
|
+
export declare const WithTooltipAndExpand: Story;
|
|
14
|
+
export declare const ShortText: Story;
|
|
15
|
+
export declare const DifferentWidths: Story;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { type TemplateResult } from 'lit';
|
|
2
|
+
import { BaseElement } from '../../internal/base-element';
|
|
3
|
+
export interface TreeNodeData {
|
|
4
|
+
key: string;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
children?: TreeNodeData[];
|
|
8
|
+
[key: string]: unknown;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* @tag mac-tree
|
|
12
|
+
* @summary 用于展示层级数据的树形组件。
|
|
13
|
+
*
|
|
14
|
+
* @csspart node - 树节点行。
|
|
15
|
+
* @csspart node-label - 节点标签文本。
|
|
16
|
+
* @csspart toggle - 展开/收起切换按钮。
|
|
17
|
+
* @csspart checkbox - 复选框元素。
|
|
18
|
+
* @csspart children - 子节点容器。
|
|
19
|
+
*/
|
|
20
|
+
export declare class MacTree extends BaseElement {
|
|
21
|
+
static styles: import("lit").CSSResult[];
|
|
22
|
+
/** 树形数据数组。 */
|
|
23
|
+
data: TreeNodeData[];
|
|
24
|
+
/** 当前展开的节点键(受控)。 */
|
|
25
|
+
expandedKeys: string[];
|
|
26
|
+
/** 当前选中的节点键(受控)。 */
|
|
27
|
+
selectedKeys: string[];
|
|
28
|
+
/** 当前勾选的节点键(受控,用于可勾选模式)。 */
|
|
29
|
+
checkedKeys: string[];
|
|
30
|
+
/** 默认展开的节点键(非受控)。 */
|
|
31
|
+
defaultExpandedKeys: string[];
|
|
32
|
+
/** 默认选中的节点键(非受控)。 */
|
|
33
|
+
defaultSelectedKeys: string[];
|
|
34
|
+
/** 默认勾选的节点键(非受控)。 */
|
|
35
|
+
defaultCheckedKeys: string[];
|
|
36
|
+
/** 是否默认展开所有节点。 */
|
|
37
|
+
defaultExpandAll: boolean;
|
|
38
|
+
/** 是否显示复选框。 */
|
|
39
|
+
checkable: boolean;
|
|
40
|
+
/** 是否允许多选。 */
|
|
41
|
+
multiple: boolean;
|
|
42
|
+
/** 节点是否可选中。 */
|
|
43
|
+
selectable: boolean;
|
|
44
|
+
/** 是否显示连接线。 */
|
|
45
|
+
showLine: boolean;
|
|
46
|
+
/** 整行节点是否可点击以进行选择。 */
|
|
47
|
+
blockNode: boolean;
|
|
48
|
+
/** 无数据时的空文本。 */
|
|
49
|
+
emptyText: string;
|
|
50
|
+
private _innerExpandedKeys;
|
|
51
|
+
private _innerSelectedKeys;
|
|
52
|
+
private _innerCheckedKeys;
|
|
53
|
+
private _innerHalfCheckedKeys;
|
|
54
|
+
private _controlledExpanded;
|
|
55
|
+
private _controlledSelected;
|
|
56
|
+
private _controlledChecked;
|
|
57
|
+
connectedCallback(): void;
|
|
58
|
+
willUpdate(changedProps: Map<string, unknown>): void;
|
|
59
|
+
private get _expanded();
|
|
60
|
+
private get _selected();
|
|
61
|
+
private get _checked();
|
|
62
|
+
private _expandAll;
|
|
63
|
+
private _findNode;
|
|
64
|
+
private _getParentKey;
|
|
65
|
+
private _getCheckState;
|
|
66
|
+
private _updateHalfCheckedKeys;
|
|
67
|
+
private _toggleExpand;
|
|
68
|
+
private _toggleSelect;
|
|
69
|
+
private _toggleCheck;
|
|
70
|
+
private _renderToggle;
|
|
71
|
+
private _renderCheckbox;
|
|
72
|
+
private _renderNode;
|
|
73
|
+
render(): TemplateResult<1>;
|
|
74
|
+
}
|
|
75
|
+
declare global {
|
|
76
|
+
interface HTMLElementTagNameMap {
|
|
77
|
+
'mac-tree': MacTree;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import './mac-tree';
|
|
3
|
+
declare const meta: Meta;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const DefaultExpanded: Story;
|
|
8
|
+
export declare const WithCheckboxes: Story;
|
|
9
|
+
export declare const WithLines: Story;
|
|
10
|
+
export declare const MultipleSelect: Story;
|
|
11
|
+
export declare const ControlledExpanded: Story;
|
|
12
|
+
export declare const Empty: Story;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { BaseElement } from '../../internal/base-element';
|
|
2
|
+
export interface TreeOption {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
children?: TreeOption[];
|
|
7
|
+
}
|
|
8
|
+
export declare class MacTreeSelect extends BaseElement {
|
|
9
|
+
static styles: import("lit").CSSResult[];
|
|
10
|
+
options: TreeOption[];
|
|
11
|
+
value: string | string[];
|
|
12
|
+
defaultValue: string | string[];
|
|
13
|
+
placeholder: string;
|
|
14
|
+
size?: 'sm' | 'md' | 'lg';
|
|
15
|
+
disabled: boolean;
|
|
16
|
+
error: boolean;
|
|
17
|
+
success: boolean;
|
|
18
|
+
clearable: boolean;
|
|
19
|
+
multiple: boolean;
|
|
20
|
+
searchable: boolean;
|
|
21
|
+
panel: boolean;
|
|
22
|
+
checkable: boolean;
|
|
23
|
+
defaultExpandAll: boolean;
|
|
24
|
+
searchPlaceholder: string;
|
|
25
|
+
emptyText: string;
|
|
26
|
+
private _open;
|
|
27
|
+
private _expandedKeys;
|
|
28
|
+
private _searchQuery;
|
|
29
|
+
private get _ctrl();
|
|
30
|
+
private get _resVal();
|
|
31
|
+
connectedCallback(): void;
|
|
32
|
+
disconnectedCallback(): void;
|
|
33
|
+
private _onDocClick;
|
|
34
|
+
private _toggle;
|
|
35
|
+
private _openDropdown;
|
|
36
|
+
private _close;
|
|
37
|
+
private _expandAll;
|
|
38
|
+
private _getSelectedSet;
|
|
39
|
+
private _getLabel;
|
|
40
|
+
private _isSelected;
|
|
41
|
+
private _getCheckState;
|
|
42
|
+
private _select;
|
|
43
|
+
private _toggleCheck;
|
|
44
|
+
private _removeTag;
|
|
45
|
+
private _clear;
|
|
46
|
+
private _emit;
|
|
47
|
+
private _toggleExpand;
|
|
48
|
+
private _filterOptions;
|
|
49
|
+
private _onKey;
|
|
50
|
+
private _renderNode;
|
|
51
|
+
private _renderTrigger;
|
|
52
|
+
private _renderDropdown;
|
|
53
|
+
render(): import("lit").TemplateResult<1>;
|
|
54
|
+
}
|
|
55
|
+
declare global {
|
|
56
|
+
interface HTMLElementTagNameMap {
|
|
57
|
+
'mac-tree-select': MacTreeSelect;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import './mac-tree-select';
|
|
3
|
+
declare const meta: Meta;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithValue: Story;
|
|
8
|
+
export declare const DefaultExpandAll: Story;
|
|
9
|
+
export declare const Multiple: Story;
|
|
10
|
+
export declare const Checkable: Story;
|
|
11
|
+
export declare const Searchable: Story;
|
|
12
|
+
export declare const Clearable: Story;
|
|
13
|
+
export declare const Disabled: Story;
|
|
14
|
+
export declare const ErrorState: Story;
|
|
15
|
+
export declare const Sizes: Story;
|
|
16
|
+
export declare const PanelOnly: Story;
|
|
17
|
+
export declare const PanelOnlyCheckable: Story;
|
|
18
|
+
export declare const PanelOnlySearchable: Story;
|
|
19
|
+
export declare const Controlled: Story;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
export declare abstract class BaseElement extends LitElement {
|
|
3
|
+
static shadowRootOptions: ShadowRootInit;
|
|
4
|
+
/** Component-level theme override. Takes precedence over mac-config-provider. */
|
|
5
|
+
theme?: 'light' | 'dark';
|
|
6
|
+
private _globalSize?;
|
|
7
|
+
private _globalTheme?;
|
|
8
|
+
private _configProvider;
|
|
9
|
+
private _configObserver;
|
|
10
|
+
connectedCallback(): void;
|
|
11
|
+
disconnectedCallback(): void;
|
|
12
|
+
private _findConfigProvider;
|
|
13
|
+
private _readConfigFromProvider;
|
|
14
|
+
protected get _resolvedSize(): 'sm' | 'md' | 'lg';
|
|
15
|
+
protected get _resolvedTheme(): 'light' | 'dark' | undefined;
|
|
16
|
+
update(changedProperties: PropertyValues): void;
|
|
17
|
+
protected emit(name: string, options?: CustomEventInit): void;
|
|
18
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { PropertyDeclaration } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Boolean converter that accepts both HTML boolean syntax (`disabled`) and the
|
|
4
|
+
* explicit string form (`disabled="false"`). This is useful for templates
|
|
5
|
+
* generated by server-side renderers and keeps the public attributes intuitive.
|
|
6
|
+
*/
|
|
7
|
+
export declare const booleanAttribute: Pick<PropertyDeclaration, 'converter'>['converter'];
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
export { MacConfigProvider } from './components/config-provider/mac-config-provider';
|
|
2
|
+
export { MacButton } from './components/button/mac-button';
|
|
3
|
+
export { MacCard } from './components/card/mac-card';
|
|
4
|
+
export { MacInput } from './components/input/mac-input';
|
|
5
|
+
export { MacInputNumber } from './components/input-number/mac-input-number';
|
|
6
|
+
export { MacForm } from './components/form/mac-form';
|
|
7
|
+
export { MacFormItem } from './components/form/mac-form-item';
|
|
8
|
+
export type { FormRule } from './components/form/mac-form';
|
|
9
|
+
export { MacRadio, MacRadioGroup } from './components/radio/mac-radio';
|
|
10
|
+
export type { RadioOption } from './components/radio/mac-radio';
|
|
11
|
+
export { MacCheckbox, MacCheckboxGroup } from './components/checkbox/mac-checkbox';
|
|
12
|
+
export type { CheckboxOption } from './components/checkbox/mac-checkbox';
|
|
13
|
+
export { MacDatePicker } from './components/date-picker/mac-date-picker';
|
|
14
|
+
export { MacDateRangePicker } from './components/date-picker/mac-date-range-picker';
|
|
15
|
+
export type { PickerType, PanelView } from './components/date-picker/mac-date-picker';
|
|
16
|
+
export { MacSelect } from './components/select/mac-select';
|
|
17
|
+
export type { SelectOption, OptionGroup } from './components/select/mac-select';
|
|
18
|
+
export { MacTreeSelect } from './components/tree-select/mac-tree-select';
|
|
19
|
+
export type { TreeOption } from './components/tree-select/mac-tree-select';
|
|
20
|
+
export { MacTree } from './components/tree/mac-tree';
|
|
21
|
+
export type { TreeNodeData } from './components/tree/mac-tree';
|
|
22
|
+
export { MacDesktopIcon } from './components/desktop-icon/mac-desktop-icon';
|
|
23
|
+
export { MacDesktop } from './components/desktop/mac-desktop';
|
|
24
|
+
export type { DesktopIconData } from './components/desktop/mac-desktop';
|
|
25
|
+
export { MacDockItem } from './components/dock/mac-dock-item';
|
|
26
|
+
export { MacDock } from './components/dock/mac-dock';
|
|
27
|
+
export { MacModal } from './components/modal/mac-modal';
|
|
28
|
+
export { MacConfirm } from './components/confirm/mac-confirm';
|
|
29
|
+
export type { ConfirmOptions } from './components/confirm/mac-confirm';
|
|
30
|
+
export { MacGroupButton } from './components/group-button/mac-group-button';
|
|
31
|
+
export type { GroupButtonItem } from './components/group-button/mac-group-button';
|
|
32
|
+
export { MacDropdown } from './components/dropdown/mac-dropdown';
|
|
33
|
+
export type { DropdownItem } from './components/dropdown/mac-dropdown';
|
|
34
|
+
export { MacMenu } from './components/menu/mac-menu';
|
|
35
|
+
export { MacTextEllipsis } from './components/text-ellipsis/mac-text-ellipsis';
|
|
36
|
+
export { MacRating } from './components/rating/mac-rating';
|
|
37
|
+
export { MacDescriptions, MacDescriptionItem } from './components/descriptions/mac-descriptions';
|
|
38
|
+
export type { DescriptionItem } from './components/descriptions/mac-descriptions';
|
|
39
|
+
export { MacNumberAnimation } from './components/number-animation/mac-number-animation';
|
|
40
|
+
export { MacTabs, MacTabPane } from './components/tabs/mac-tabs';
|
|
41
|
+
export type { TabItem } from './components/tabs/mac-tabs';
|
|
42
|
+
export { MacDrawer } from './components/drawer/mac-drawer';
|
|
43
|
+
export { MacPopconfirm } from './components/popconfirm/mac-popconfirm';
|
|
44
|
+
export { MacSplit, MacSplitPane } from './components/split/mac-split';
|
|
45
|
+
export { MacLazyImage } from './components/lazy-image/mac-lazy-image';
|
|
46
|
+
export { MacInfiniteScroll } from './components/infinite-scroll/mac-infinite-scroll';
|
|
47
|
+
export { MacTag } from './components/tag/mac-tag';
|
|
48
|
+
export { MacDynamicTags } from './components/dynamic-tags/mac-dynamic-tags';
|
|
49
|
+
export { MacCarousel, MacCarouselItem } from './components/carousel/mac-carousel';
|
|
50
|
+
export { MacProgress } from './components/progress/mac-progress';
|
|
51
|
+
export type { CircleConfig, GradientConfig } from './components/progress/mac-progress';
|
|
52
|
+
export { MacAlert } from './components/alert/mac-alert';
|
|
53
|
+
export { MacAnimation } from './components/animation/mac-animation';
|
|
54
|
+
export { MacDataTable } from './components/data-table/mac-data-table';
|
|
55
|
+
export type { DataTableColumn, DataTablePagination, DataTableRowSelection, DataTableSortOrder, DataTableSortInfo, DataTableChangeDetail, DataTableSelectDetail, DataTableSortDetail, DataTableRowClickDetail, } from './components/data-table/mac-data-table';
|
|
56
|
+
export { registerAnimation, getAnimation, hasAnimation, getAnimationNames, getAllAnimations, animationStyleSheet, buildAnimationShorthand, getAnimationStyleObject, BUILT_IN, BUILT_IN_ANIMATION_NAMES, } from './components/animation/animations';
|
|
57
|
+
export type { AnimationCategory, AnimationDefinition, AnimationOptions, } from './components/animation/animations';
|
|
58
|
+
export { BaseElement } from './internal/base-element';
|
|
59
|
+
export { sharedStyles } from './styles/shared-styles';
|
|
60
|
+
export { themeTokens } from './styles/theme';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CSSResult } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Theme tokens following the naming convention:
|
|
4
|
+
* --{size}-{component}-{part}-{state}
|
|
5
|
+
*
|
|
6
|
+
* size: sm | md | lg
|
|
7
|
+
* component: button | input | select | dropdown | card | dialog | dock | glass | mac | icon | tooltip | text-shadow | magnify | indicator | separator | color | spacing | radius | font | transition | opacity
|
|
8
|
+
* part: container | item | label | trigger | tag | shortcut | arrow | divider | separator | highlight | shadow | bg | border | padding | font-size
|
|
9
|
+
* state: hover | active | focus | disabled | danger | error | success | dark (optional)
|
|
10
|
+
*/
|
|
11
|
+
export declare const themeTokens: CSSResult;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|