@humuchen/mac-ui 0.0.1

package/dist/types/components/confirm/mac-confirm.d.ts

@@ -0,0 +1,86 @@
+import { BaseElement } from '../../internal/base-element';
+export interface ConfirmOptions {
+    title?: string;
+    content?: string;
+    confirmText?: string;
+    cancelText?: string;
+    danger?: boolean;
+    showIcon?: boolean;
+    width?: string | number;
+    maskClosable?: boolean;
+    theme?: 'light' | 'dark';
+    titleAlign?: 'left' | 'center' | 'right';
+    showDivider?: boolean;
+    onOk?: () => void;
+    onCancel?: () => void;
+}
+/**
+ * @tag mac-confirm
+ * @summary 带遮罩和居中内容的 macOS 风格确认对话框。
+ *
+ * @slot - 对话框主体内容（替换 content 属性）。
+ * @slot footer - 自定义底部内容（替换默认按钮）。
+ *
+ * @csspart mask - 遮罩/覆盖层元素。
+ * @csspart container - 对话框容器。
+ * @csspart title - 标题文本。
+ * @csspart body - 主体内容区域。
+ * @csspart footer - 底部区域。
+ *
+ * @event mac-confirm-open - 对话框打开时触发。
+ * @event mac-confirm-close - 对话框关闭时触发。
+ * @event mac-confirm-ok - 点击确定按钮时触发。
+ * @event mac-confirm-cancel - 点击取消按钮时触发。
+ */
+export declare class MacConfirm extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** 对话框标题文本 */
+    title: string;
+    /** 对话框标题对齐方式：left | center | right */
+    titleAlign: 'left' | 'center' | 'right';
+    /** 对话框主体内容文本 */
+    content: string;
+    /** 确认按钮文本 */
+    confirmText: string;
+    /** 取消按钮文本 */
+    cancelText: string;
+    /** 确认按钮是否使用危险样式 */
+    danger: boolean;
+    /** 是否显示图标 */
+    showIcon: boolean;
+    /** 对话框宽度，例如 '420px' 或 420 */
+    width: string | number;
+    /** 对话框是否可见 */
+    visible: boolean;
+    /** 点击遮罩是否关闭对话框 */
+    maskClosable: boolean;
+    /** 是否在标题/主体和主体/底部之间显示分隔线 */
+    showDivider: boolean;
+    willUpdate(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleKeyDown;
+    private _onMaskClick;
+    private _onOk;
+    private _onCancel;
+    private _cancel;
+    /** 打开对话框 */
+    open(): void;
+    /** 关闭对话框 */
+    close(): void;
+    private _resolvedWidth;
+    private static _activeInstance;
+    /**
+     * 以命令式方式打开确认对话框。
+     * 返回一个 Promise，解析为 true（确定）或 false（取消）。
+     */
+    static open(options: ConfirmOptions): Promise<boolean>;
+    /** 关闭当前活动的命令式对话框 */
+    static close(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-confirm': MacConfirm;
+    }
+}

package/dist/types/components/confirm/mac-confirm.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../button/mac-button';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Danger: Story;
+export declare const NoIcon: Story;
+export declare const OnlyTitle: Story;
+export declare const CustomWidth: Story;
+export declare const WithSlot: Story;
+export declare const TitleAlignCenter: Story;
+export declare const TitleAlignRight: Story;
+export declare const NoDivider: Story;
+export declare const ImperativeAPI: Story;

package/dist/types/components/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { MacDataTable } from './mac-data-table';
+export type { DataTableColumn, DataTablePagination, DataTableRowSelection, DataTableSortOrder, DataTableSortInfo, DataTableChangeDetail, DataTableSelectDetail, DataTableSortDetail, DataTableRowClickDetail, } from './mac-data-table';

package/dist/types/components/data-table/mac-data-table.d.ts

@@ -0,0 +1,212 @@
+import { BaseElement } from '../../internal/base-element';
+export type DataTableSortOrder = 'asc' | 'desc';
+/**
+ * 数据表格列定义
+ */
+export interface DataTableColumn<T = any> {
+    /** 列唯一标识 */
+    key: string;
+    /** 列标题 */
+    title: string;
+    /** 数据字段名（缺省时取 key） */
+    dataIndex?: string;
+    /** 列宽 */
+    width?: string | number;
+    /** 对齐方式 */
+    align?: 'left' | 'center' | 'right';
+    /** 是否可排序 */
+    sortable?: boolean;
+    /** 支持的排序方向，默认 ['asc','desc']（含取消） */
+    sortDirections?: DataTableSortOrder[];
+    /** 默认排序方向 */
+    defaultSortOrder?: DataTableSortOrder;
+    /** 本地排序比较函数 */
+    sorter?: (a: T, b: T) => number;
+    /** 自定义单元格渲染 */
+    render?: (row: T, index: number, column: DataTableColumn<T>) => unknown;
+    /** 单元格内容超出省略 */
+    ellipsis?: boolean;
+}
+/**
+ * 分页配置
+ */
+export interface DataTablePagination {
+    /** 当前页（受控） */
+    current?: number;
+    /** 每页条数（受控） */
+    pageSize?: number;
+    /** 默认当前页（非受控） */
+    defaultCurrent?: number;
+    /** 默认每页条数（非受控） */
+    defaultPageSize?: number;
+    /** 总条数（远程模式必填） */
+    total?: number;
+    /** 可选每页条数 */
+    pageSizeOptions?: number[];
+    /** 显示条数选择器 */
+    showSizeChanger?: boolean;
+    /** 显示快速跳页输入框 */
+    showQuickJumper?: boolean;
+    /** 显示总条数 */
+    showTotal?: boolean;
+    /** 简洁模式 */
+    simple?: boolean;
+    /** 禁用分页 */
+    disabled?: boolean;
+    /** 总条数文案前缀，默认「共 」 */
+    prefix?: string;
+}
+/**
+ * 行选择配置
+ */
+export interface DataTableRowSelection<T = any> {
+    /** 选择类型，默认 checkbox */
+    type?: 'checkbox' | 'radio';
+    /** 选中行 key（受控） */
+    selectedRowKeys?: Array<string | number>;
+    /** 行复选框属性 */
+    getCheckboxProps?: (row: T, index: number) => {
+        disabled?: boolean;
+    };
+    /** 禁用全部选择 */
+    disabled?: boolean;
+}
+export interface DataTableSortInfo {
+    columnKey: string;
+    order: DataTableSortOrder;
+}
+/**
+ * mac-data-table-change 事件详情
+ */
+export interface DataTableChangeDetail {
+    page: number;
+    pageSize: number;
+    sorter: DataTableSortInfo | null;
+}
+/**
+ * mac-data-table-select 事件详情
+ */
+export interface DataTableSelectDetail<T = any> {
+    selectedRowKeys: Array<string | number>;
+    selectedRows: T[];
+    changedRow?: T;
+    changedRowKey?: string | number;
+    type: 'single' | 'multiple' | 'all';
+}
+/**
+ * mac-data-table-sort 事件详情
+ */
+export interface DataTableSortDetail {
+    sorter: DataTableSortInfo | null;
+}
+/**
+ * mac-data-table-row-click 事件详情
+ */
+export interface DataTableRowClickDetail<T = any> {
+    row: T;
+    index: number;
+}
+/**
+ * @tag mac-data-table
+ * @summary macOS 风格数据表格组件，支持可配置分页、排序与行选择。
+ *
+ * @slot title - 表格上方标题区域。
+ * @slot footer - 分页上方底部区域（汇总等）。
+ * @slot empty - 自定义空数据内容。
+ *
+ * @cssproperty --md-data-table-container-bg - 容器背景。
+ * @cssproperty --md-data-table-container-border - 容器边框。
+ * @cssproperty --md-data-table-container-radius - 容器圆角。
+ * @cssproperty --md-data-table-header-bg - 表头背景。
+ * @cssproperty --md-data-table-header-color - 表头文字颜色。
+ * @cssproperty --md-data-table-row-hover-bg - 行悬停背景。
+ * @cssproperty --md-data-table-row-selected-bg - 选中行背景。
+ * @cssproperty --md-data-table-cell-padding - 单元格内边距。
+ * @cssproperty --md-data-table-pagination-item-active-bg - 分页激活背景。
+ *
+ * @event mac-data-table-change - 分页或排序变化时触发。`detail: { page, pageSize, sorter }`
+ * @event mac-data-table-select - 行选择变化时触发。`detail: { selectedRowKeys, selectedRows, type }`
+ * @event mac-data-table-sort - 排序变化时触发。`detail: { sorter }`
+ * @event mac-data-table-row-click - 行点击时触发。`detail: { row, index }`
+ */
+export declare class MacDataTable extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** 列定义 */
+    columns: DataTableColumn[];
+    /** 数据源 */
+    data: any[];
+    /** 行 key 字段名或取值函数（缺省用索引） */
+    rowKey?: string | ((record: any) => string | number);
+    /** 行类名生成函数 */
+    rowClassName?: (row: any, index: number) => string;
+    /** 分页配置：false 关闭，true 默认开启，对象为详细配置 */
+    pagination: boolean | DataTablePagination;
+    /** 行选择配置 */
+    rowSelection?: DataTableRowSelection;
+    /** 远程模式：组件不本地分页/排序，仅触发事件由外部处理 */
+    remote: boolean;
+    /** 边框样式 */
+    bordered: boolean;
+    /** 斑马纹 */
+    striped: boolean;
+    /** 表头吸顶 */
+    sticky: boolean;
+    /** 加载中 */
+    loading: boolean;
+    /** 空数据文案 */
+    emptyText: string;
+    /** 组件尺寸 */
+    size?: 'sm' | 'md' | 'lg';
+    private _internalPage;
+    private _internalPageSize;
+    private _internalSelectedKeys;
+    private _sortColumn;
+    private _sortOrder;
+    private _processedData;
+    private _sortInitialized;
+    connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    private _initDefaults;
+    private get _paginationConfig();
+    private get _isPageControlled();
+    private get _isPageSizeControlled();
+    private get _effectivePage();
+    private get _effectivePageSize();
+    private get _effectiveTotal();
+    private get _pageCount();
+    private _clampPage;
+    private _computeProcessedData;
+    private get _displayEntries();
+    private get _currentSortInfo();
+    private _getRowKey;
+    private get _isSelectionControlled();
+    private get _selectedKeys();
+    private get _selectedKeySet();
+    private _isRowDisabled;
+    private _emitSelect;
+    private _handleRowSelect;
+    private _handleSelectAll;
+    private _handleSortClick;
+    private _gotoPage;
+    private _handleQuickJumper;
+    private _handleSimpleJumper;
+    private _handleSizeChange;
+    private _getPageList;
+    private _renderCellContent;
+    private _alignClass;
+    private _widthStyle;
+    render(): import("lit").TemplateResult<1>;
+    private _colspan;
+    private _renderHeader;
+    private _renderSelectionHeader;
+    private _renderTh;
+    private _renderRow;
+    private _renderSelectionCell;
+    private _renderTd;
+    private _renderPagination;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-data-table': MacDataTable;
+    }
+}

package/dist/types/components/data-table/mac-data-table.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-data-table';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const PaginationConfig: Story;
+export declare const NoPagination: Story;
+export declare const SimplePagination: Story;
+export declare const ControlledPagination: Story;
+export declare const Sorting: Story;
+export declare const RowSelection: Story;
+export declare const RadioSelection: Story;
+export declare const RemoteMode: Story;
+export declare const Empty: Story;
+export declare const Sizes: Story;
+export declare const DarkMode: Story;
+export declare const WithTitleAndFooter: Story;

package/dist/types/components/date-picker/date-picker-utils.d.ts

@@ -0,0 +1,13 @@
+export declare const pad: (n: number) => string;
+export declare function fmtDate(d: Date, f: string): string;
+export declare function prsDate(s: string, f: string): Date | null;
+export declare function sameDay(a: Date, b: Date): boolean;
+export declare function weekStart(d: Date): Date;
+export declare function weekNumber(d: Date): number;
+export declare function calDays(y: number, m: number): {
+    date: Date;
+    cur: boolean;
+}[];
+export declare const WDS: string[];
+export declare const MNS: string[];
+export declare const QNS: string[];

package/dist/types/components/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { MacDatePicker } from './mac-date-picker';
+export { MacDateRangePicker } from './mac-date-range-picker';
+export type { PickerType, PanelView } from './mac-date-picker';

package/dist/types/components/date-picker/mac-date-picker.d.ts

@@ -0,0 +1,72 @@
+import { BaseElement } from '../../internal/base-element';
+export type PickerType = 'date' | 'datetime' | 'year' | 'quarter' | 'week';
+export type PanelView = 'day' | 'month' | 'year';
+export declare class MacDatePicker extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    value: string;
+    defaultValue: string;
+    format: string;
+    placeholder: string;
+    disabled: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    clearable: boolean;
+    error: boolean;
+    success: boolean;
+    disabledDate?: (date: Date) => boolean;
+    type: PickerType;
+    panel: boolean;
+    showFooter: boolean;
+    private _open;
+    private _view;
+    private _panelView;
+    private _hh;
+    private _mm;
+    private _ss;
+    private _trigger;
+    private _portalEl;
+    private _portalId;
+    private _scrollHandler;
+    private get _ctrl();
+    private get _resVal();
+    private get _selDate();
+    private static _stylesInjected;
+    private static _injectPortalStyles;
+    willUpdate(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _addScrollListener;
+    private _removeScrollListener;
+    private _onDocClick;
+    private _toggle;
+    private _openPanel;
+    private _close;
+    private _createPortal;
+    private _removePortal;
+    private _syncTime;
+    private _emit;
+    private _pick;
+    private _pickQuarter;
+    private _pickYear;
+    private _pickMonth;
+    private _prev;
+    private _next;
+    private _today;
+    private _clear;
+    private _timeChange;
+    private _onKey;
+    private _renderHeader;
+    private _renderDays;
+    private _renderMonths;
+    private _renderYears;
+    private _renderQuarters;
+    private _renderTime;
+    private _renderFooter;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _updatePortalContent;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-date-picker': MacDatePicker;
+    }
+}

package/dist/types/components/date-picker/mac-date-picker.stories.d.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-date-picker';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Placeholder: Story;
+export declare const Disabled: Story;
+export declare const Clearable: Story;
+export declare const Sizes: Story;
+export declare const ErrorState: Story;
+export declare const SuccessState: Story;
+export declare const DisabledDate: Story;
+export declare const YearPicker: Story;
+export declare const QuarterPicker: Story;
+export declare const WeekPicker: Story;
+export declare const DateTimePicker: Story;
+export declare const Controlled: Story;
+export declare const PanelOnly: Story;
+export declare const PanelOnlyWithValue: Story;
+export declare const PanelOnlyYear: Story;
+export declare const PanelOnlyQuarter: Story;
+export declare const PanelOnlyWeek: Story;
+export declare const PanelOnlyDateTime: Story;
+export declare const HideFooter: Story;
+export declare const PanelOnlyHideFooter: Story;
+export declare const CustomIcon: Story;

package/dist/types/components/date-picker/mac-date-range-picker.d.ts

@@ -0,0 +1,58 @@
+import { BaseElement } from '../../internal/base-element';
+export declare class MacDateRangePicker extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    value: [string, string];
+    defaultValue: [string, string];
+    format: string;
+    placeholder: string;
+    disabled: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    clearable: boolean;
+    error: boolean;
+    success: boolean;
+    disabledDate?: (date: Date) => boolean;
+    private _open;
+    private _lView;
+    private _rView;
+    private _hoverDate?;
+    private _trigger;
+    private _portalEl;
+    private _portalId;
+    private _scrollHandler;
+    private get _ctrl();
+    private get _res();
+    private get _s();
+    private get _e();
+    private get _hasStart();
+    private get _hasEnd();
+    private static _stylesInjected;
+    private static _injectPortalStyles;
+    willUpdate(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _addScrollListener;
+    private _removeScrollListener;
+    private _onDoc;
+    private _toggle;
+    private _openP;
+    private _close;
+    private _createPortal;
+    private _removePortal;
+    private _updatePortalContent;
+    private _emit;
+    private _pick;
+    private _prevL;
+    private _nextL;
+    private _prevR;
+    private _nextR;
+    private _clear;
+    private _onKey;
+    private _renderCal;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-date-range-picker': MacDateRangePicker;
+    }
+}

package/dist/types/components/date-picker/mac-date-range-picker.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-date-range-picker';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Disabled: Story;
+export declare const Clearable: Story;
+export declare const Sizes: Story;
+export declare const ErrorState: Story;
+export declare const DisabledDate: Story;
+export declare const Controlled: Story;

package/dist/types/components/descriptions/mac-descriptions.d.ts

@@ -0,0 +1,99 @@
+import { BaseElement } from '../../internal/base-element';
+export interface DescriptionItem {
+    label: string;
+    value: string;
+    span?: number;
+    labelStyle?: string;
+    contentStyle?: string;
+}
+/**
+ * @tag mac-descriptions
+ * @summary A macOS-style descriptions list component for displaying key-value pairs.
+ *
+ * @slot - Default slot for mac-description-item elements.
+ * @slot title - Custom title content.
+ * @slot extra - Extra content in the header (e.g. actions).
+ *
+ * @cssproperty --md-descriptions-container-bg - Container background.
+ * @cssproperty --md-descriptions-container-border - Container border color.
+ * @cssproperty --md-descriptions-container-radius - Container border radius.
+ * @cssproperty --md-descriptions-container-shadow - Container shadow.
+ * @cssproperty --md-descriptions-header-padding - Header padding.
+ * @cssproperty --md-descriptions-header-border - Header bottom border.
+ * @cssproperty --md-descriptions-title-font-size - Title font size.
+ * @cssproperty --md-descriptions-title-color - Title text color.
+ * @cssproperty --md-descriptions-label-color - Label text color.
+ * @cssproperty --md-descriptions-label-bg - Label background.
+ * @cssproperty --md-descriptions-label-width - Label width (left placement).
+ * @cssproperty --md-descriptions-value-color - Value text color.
+ * @cssproperty --md-descriptions-value-bg - Value background.
+ * @cssproperty --md-descriptions-row-border - Row separator border.
+ * @cssproperty --md-descriptions-cell-padding - Cell padding.
+ * @cssproperty --md-descriptions-separator-color - Separator color.
+ */
+export declare class MacDescriptions extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** Label placement: 'left' shows label beside value, 'top' shows label above value */
+    labelPlacement: 'left' | 'top';
+    /** Label text alignment */
+    labelAlign: 'left' | 'center' | 'right';
+    /** Number of columns per row */
+    column: number;
+    /** Component size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to show bordered style */
+    bordered: boolean;
+    /** Title text */
+    title: string;
+    /** Separator between label and value (only for label-placement='left' and not bordered) */
+    separator: string;
+    /** Data items (alternative to slot) */
+    items: DescriptionItem[];
+    willUpdate(): void;
+    private _getItems;
+    private _renderHeader;
+    /**
+     * Build rows from items respecting column count and span.
+     * Each row is an array of { item, effectiveSpan }.
+     */
+    private _buildRows;
+    /** label-placement: left + bordered → table with label | value columns */
+    private _renderLeftBordered;
+    /** label-placement: left + not bordered → inline label: value list */
+    private _renderLeftNonBordered;
+    /** label-placement: top + bordered → table with label row above value row */
+    private _renderTopBordered;
+    /** label-placement: top + not bordered → grid with label above value */
+    private _renderTopNonBordered;
+    render(): import("lit").TemplateResult<1>;
+}
+/**
+ * @tag mac-description-item
+ * @summary A child item for mac-descriptions (used in slot mode).
+ *
+ * @property label - Label text
+ * @property value - Value text (alternative to text content)
+ * @property span - Number of columns this item spans
+ * @property label-style - Custom CSS style for the label
+ * @property content-style - Custom CSS style for the content
+ */
+export declare class MacDescriptionItem extends BaseElement {
+    static styles: import("lit").CSSResult[];
+    /** Label text */
+    label: string;
+    /** Value text (alternative to text content) */
+    value: string;
+    /** Number of columns this item spans */
+    span: number;
+    /** Custom CSS style for the label */
+    labelStyle: string;
+    /** Custom CSS style for the content */
+    contentStyle: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mac-descriptions': MacDescriptions;
+        'mac-description-item': MacDescriptionItem;
+    }
+}

package/dist/types/components/descriptions/mac-descriptions.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './mac-descriptions';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const WithTitle: Story;
+export declare const WithExtra: Story;
+export declare const LabelPlacementTop: Story;
+export declare const LabelPlacementTopBordered: Story;
+export declare const Bordered: Story;
+export declare const LabelAlign: Story;
+export declare const Separator: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;
+export declare const TwoColumns: Story;
+export declare const Span: Story;
+export declare const SlotMode: Story;
+export declare const ItemStyle: Story;
+export declare const AllSizesBordered: Story;
+export declare const AllSizesTopPlacement: Story;

package/dist/types/components/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { MacDesktop } from './mac-desktop';
+export type { DesktopIconData } from './mac-desktop';