@wc-kit/core 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -16,14 +16,20 @@ export declare const arrowLeft: WcIconData;
16
16
  /** 向右箭头 */
17
17
  export declare const arrowRight: WcIconData;
18
18
 
19
+ /** 回到顶部(顶部横线 + 上箭头,vertical-align-top 风格) */
20
+ export declare const arrowUp: WcIconData;
21
+
19
22
  /**
20
23
  * 组件共享基础样式,每个组件的 static styles 中首先引入。
21
24
  */
22
25
  export declare const baseStyles: CSSResult;
23
26
 
24
- /** 全部内置图标,供 registerBuiltinIcons 批量注册 */
27
+ /** 手挑内置图标(组件内部依赖 + 高频图标;与 Feather 全集重名时以这些为准) */
25
28
  export declare const builtinIcons: WcIconData[];
26
29
 
30
+ /** 全部内置图标 = 手挑优先版 + Feather 全集其余,供 registerBuiltinIcons 批量注册 */
31
+ export declare const builtinIconsWithFeather: WcIconData[];
32
+
27
33
  /** 日历(日期选择器用) */
28
34
  export declare const calendar: WcIconData;
29
35
 
@@ -225,7 +231,7 @@ declare const PRESET_SIZES: Record<string, string>;
225
231
  declare const PRESET_SIZES_2: Record<string, string>;
226
232
 
227
233
  /**
228
- * 批量注册全部内置图标(22 个)。
234
+ * 批量注册全部内置图标(手挑 23 个 + Feather 其余 268 个 = 291 个)。
229
235
  * 应用入口调用一次即可;也可以从各图标文件单独 import + registerIcon 按需注册。
230
236
  */
231
237
  export declare function registerBuiltinIcons(): void;
@@ -396,18 +402,23 @@ export declare class wcBreadcrumbItem extends LitElement {
396
402
  * 按钮
397
403
  *
398
404
  * @slot - 按钮内容
399
- * @slot icon - 图标(位置由 iconPosition 控制)
405
+ * @slot icon - 图标(位置由 iconPosition 控制;loading 时被 spinner 替换)
400
406
  * @csspart base - 按钮根元素
401
407
  * @csspart icon - 图标容器
402
408
  * @csspart content - 文案容器
403
409
  * @cssprop --wc-button-height - 按钮高度
410
+ * @cssprop --wc-button-ghost-hover-bg - ghost 模式悬停淡底色
411
+ * @cssprop --wc-button-ripple-color - 波纹颜色(默认 currentColor 45% 透明度)
412
+ * @cssprop --wc-button-ripple-duration - 波纹扩散时长(默认 600ms)
404
413
  */
405
414
  export declare class wcButton extends LitElement {
406
415
  static styles: CSSResult[];
407
416
  /** 组件风格(语义色) */
408
417
  theme: wcButtonTheme;
409
- /** 按钮形式 */
410
- variant: wcButtonVariant;
418
+ /** 按钮类型(形式) */
419
+ type: wcButtonType;
420
+ /** 原生按钮行为:submit / reset 仅在 wc-form 内触发提交 / 重置 */
421
+ htmlType: 'button' | 'submit' | 'reset';
411
422
  /** 尺寸 */
412
423
  size: wcButtonSize;
413
424
  /** 图标位置:start 左 / end 右 */
@@ -418,7 +429,14 @@ export declare class wcButton extends LitElement {
418
429
  disabled: boolean;
419
430
  /** 加载状态 */
420
431
  loading: boolean;
432
+ /** 幽灵模式:透明底 + 主题色边框/文字(用于深色背景;outline/dashed 悬停改为半透明淡底) */
433
+ ghost: boolean;
434
+ /** 渐变底:实色按钮改为主题色线性渐变(仅 base 变体且非 default 主题生效) */
435
+ gradient: boolean;
436
+ /** 点击波纹效果 */
437
+ ripple: boolean;
421
438
  private handleClick;
439
+ private _spawnRipple;
422
440
  /** 是否有图标(icon 插槽检测) */
423
441
  private _hasIcon;
424
442
  /** 是否有文案(默认插槽检测),两者决定纯图标方形态 */
@@ -441,6 +459,7 @@ export declare class wcButton extends LitElement {
441
459
  export declare class wcButtonGroup extends LitElement {
442
460
  static styles: CSSResult[];
443
461
  render(): TemplateResult<1>;
462
+ private _syncMargins;
444
463
  }
445
464
 
446
465
  export declare type wcButtonIconPosition = 'start' | 'end';
@@ -449,7 +468,7 @@ export declare type wcButtonSize = 'small' | 'medium' | 'large';
449
468
 
450
469
  export declare type wcButtonTheme = 'default' | 'primary' | 'success' | 'warning' | 'danger';
451
470
 
452
- export declare type wcButtonVariant = 'base' | 'outline' | 'dashed' | 'text' | 'link';
471
+ export declare type wcButtonType = 'base' | 'outline' | 'dashed' | 'text' | 'link';
453
472
 
454
473
  /**
455
474
  * 卡片。header 区由 title / subtitle 属性或 header 插槽组成,actions 插槽
@@ -474,6 +493,7 @@ export declare type wcButtonVariant = 'base' | 'outline' | 'dashed' | 'text' | '
474
493
  * @csspart actions - 头部操作区
475
494
  * @csspart body - 内容区
476
495
  * @csspart footer - 底部
496
+ * @cssprop --wc-card-radius - 卡片圆角(默认 --wc-radius-medium)
477
497
  */
478
498
  export declare class wcCard extends LitElement {
479
499
  static styles: CSSResult[];
@@ -754,6 +774,84 @@ declare type wcDrawerCloseReason = 'close-btn' | 'overlay' | 'escape' | 'confirm
754
774
 
755
775
  declare type wcDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
756
776
 
777
+ /**
778
+ * 下拉菜单:点击触发元素弹出菜单面板(fixed 定位,空间不足自动翻转)。
779
+ * 触发元素放 `slot="trigger"`,菜单项用 `wc-dropdown-item` 作为默认子元素;
780
+ * 支持键盘导航(↑↓ 移动高亮、Enter 选中、Esc 关闭)与点击外部关闭。
781
+ *
782
+ * @slot trigger - 触发元素
783
+ * @slot - 菜单项(wc-dropdown-item)
784
+ * @csspart trigger - 触发区
785
+ * @csspart base - 菜单面板
786
+ * @fires wc-open - 菜单展开
787
+ * @fires wc-close - 菜单关闭,detail.reason: 'outside' | 'escape' | 'select' | 'toggle'
788
+ * @fires wc-select - 选中菜单项,detail.value / detail.label(之后自动关闭)
789
+ * @cssprop --wc-dropdown-min-width - 面板最小宽度(默认 120px)
790
+ * @cssprop --wc-dropdown-max-height - 面板最大高度(默认 280px)
791
+ */
792
+ export declare class wcDropdown extends LitElement {
793
+ static styles: CSSResult[];
794
+ /** 期望弹出方向(空间不足自动翻转) */
795
+ placement: WcPlacement;
796
+ /** 当前是否打开 */
797
+ open: boolean;
798
+ /** 禁用(触发器不响应点击/键盘) */
799
+ disabled: boolean;
800
+ private panelId;
801
+ private itemUid;
802
+ private activeIndex;
803
+ private assignedItems;
804
+ constructor();
805
+ disconnectedCallback(): void;
806
+ connectedCallback(): void;
807
+ /** 面板中的可用菜单项列表 */
808
+ private get enabledItems();
809
+ /** 打开菜单 */
810
+ show(): void;
811
+ /** 关闭菜单(不派发事件) */
812
+ hide(): void;
813
+ /** 切换开合 */
814
+ toggle(): void;
815
+ private emitClose;
816
+ private onDocumentClick;
817
+ private bindSideEffects;
818
+ private unbindSideEffects;
819
+ protected updated(changed: Map<string, unknown>): void;
820
+ /** 计算并应用 fixed 定位(同 Popconfirm,无箭头) */
821
+ private position;
822
+ private onSlotChange;
823
+ private syncActive;
824
+ private onPanelClick;
825
+ private selectItem;
826
+ private onTriggerClick;
827
+ private handleKeydown;
828
+ render(): TemplateResult<1>;
829
+ }
830
+
831
+ /**
832
+ * 下拉菜单项,必须作为 wc-dropdown 的子元素使用。
833
+ * `divider` 属性渲染为分隔线(忽略内容与 danger/disabled)。
834
+ *
835
+ * @slot - 菜单项文本
836
+ * @csspart base - 菜单项根元素
837
+ */
838
+ export declare class wcDropdownItem extends LitElement {
839
+ static styles: CSSResult[];
840
+ /** 菜单项值(随 wc-select 事件的 detail.value 抛出) */
841
+ value: string;
842
+ /** 禁用 */
843
+ disabled: boolean;
844
+ /** 危险操作(红色文字) */
845
+ danger: boolean;
846
+ /** 渲染为分隔线 */
847
+ divider: boolean;
848
+ /** 键盘导航高亮态(由 wc-dropdown 管理) */
849
+ active: boolean;
850
+ /** 菜单项文本 */
851
+ get label(): string;
852
+ render(): TemplateResult<1>;
853
+ }
854
+
757
855
  /**
758
856
  * 空状态。默认展示占位图形 + 「暂无数据」文案,均可用插槽自定义,
759
857
  * 另有 action 插槽放置操作按钮(如重试)。
@@ -779,6 +877,149 @@ export declare class wcEmpty extends LitElement {
779
877
  protected render(): TemplateResult;
780
878
  }
781
879
 
880
+ /**
881
+ * 悬浮按钮:固定在视口角落的圆形/方形操作按钮(形态对齐 antd FloatButton)。
882
+ * 有 href 渲染链接,dot/count 渲染右上角徽标,tooltip 悬浮显示气泡;
883
+ * backtop 为「回到顶部」预设——滚动超过 visibility-height 才显示,点击滚回顶部。
884
+ * 组合用法见 wc-float-button-group。
885
+ *
886
+ * @example
887
+ * ```html
888
+ * <wc-float-button icon="plus" tooltip="新增"></wc-float-button>
889
+ * <wc-float-button backtop></wc-float-button>
890
+ * ```
891
+ *
892
+ * @slot icon - 图标(覆盖 icon 属性)
893
+ * @slot - 文字描述(覆盖 description 属性)
894
+ * @csspart base - 按钮本体
895
+ * @csspart badge - 徽标
896
+ * @cssprop --wc-float-button-bottom - 距视口底部距离(默认 24px)
897
+ * @cssprop --wc-float-button-right - 距视口右侧距离(默认 24px)
898
+ * @cssprop --wc-float-button-size - 按钮尺寸(默认 40px)
899
+ */
900
+ export declare class wcFloatButton extends LitElement {
901
+ static styles: CSSResult[];
902
+ /** 形状 */
903
+ shape: wcFloatButtonShape;
904
+ /** 类型:default 白底 / primary 主题色底 */
905
+ type: wcFloatButtonType;
906
+ /** 图标名称(内置图标库) */
907
+ icon: string;
908
+ /** 文字描述(square 形状下显示在图标下方) */
909
+ description: string;
910
+ /** 悬浮提示内容(backtop 时缺省为「回到顶部」) */
911
+ tooltip: string;
912
+ /** 链接地址(有值渲染 <a>,否则渲染 <button>) */
913
+ href: string;
914
+ /** 链接打开方式(仅 href 存在时生效) */
915
+ target: string;
916
+ /** 禁用 */
917
+ disabled: boolean;
918
+ /** 右上角红点(忽略 count,恒显示) */
919
+ dot: boolean;
920
+ /** 右上角徽标数字(<= 0 隐藏) */
921
+ count: number;
922
+ /** 徽标数字上限,超出显示「max+」 */
923
+ max: number;
924
+ /** 回到顶部预设 */
925
+ backtop: boolean;
926
+ /** 回到顶部:滚动超过该距离(px)才显示 */
927
+ visibilityHeight: number;
928
+ private localize;
929
+ private tipId;
930
+ /** icon/description 插槽是否有内容(空容器会撑出 flex gap 偏移,需隐藏) */
931
+ private _hasIcon;
932
+ private _hasText;
933
+ private onIconSlotChange;
934
+ private onTextSlotChange;
935
+ private showTimer;
936
+ private hideTimer;
937
+ private onScroll;
938
+ private onDocumentClick;
939
+ connectedCallback(): void;
940
+ disconnectedCallback(): void;
941
+ protected updated(changed: Map<string, unknown>): void;
942
+ private bindBacktop;
943
+ private unbindBacktop;
944
+ private tooltipIsOpen;
945
+ /** 实际展示的提示文本(backtop 缺省取 i18n 文案) */
946
+ private get effectiveTooltip();
947
+ private showTip;
948
+ private hideTip;
949
+ /** 气泡 fixed 定位于按钮左侧,垂直居中(空间不足贴边时夹近视口) */
950
+ private positionTip;
951
+ private bindOutsideClose;
952
+ private unbindOutsideClose;
953
+ private clearTimers;
954
+ private onClick;
955
+ /** 实际展示的徽标文本 */
956
+ private get displayCount();
957
+ render(): TemplateResult;
958
+ }
959
+
960
+ /**
961
+ * 悬浮按钮组:子元素 `wc-float-button` 垂直堆叠于宿主上方(形态对齐
962
+ * antd FloatButton.Group,但按钮间用间距分离)。trigger="click"/"hover"
963
+ * 时变为 speed-dial:收起只显示触发按钮(plus 展开时旋转成 ×),点击/悬浮展开。
964
+ * group 的 shape 会同步给未显式设置 shape 的子按钮。
965
+ *
966
+ * @example
967
+ * ```html
968
+ * <wc-float-button-group trigger="click">
969
+ * <wc-float-button icon="plus" tooltip="新增"></wc-float-button>
970
+ * <wc-float-button icon="search" tooltip="搜索"></wc-float-button>
971
+ * </wc-float-button-group>
972
+ * ```
973
+ *
974
+ * @slot - 子按钮(wc-float-button)
975
+ * @csspart trigger - 触发按钮(仅 trigger 模式)
976
+ * @csspart items - 子按钮容器
977
+ * @cssprop --wc-float-button-bottom - 距视口底部距离(默认 24px)
978
+ * @cssprop --wc-float-button-right - 距视口右侧距离(默认 24px)
979
+ * @cssprop --wc-float-button-gap - 按钮间距(默认 8px)
980
+ * @fires wc-open - 展开
981
+ * @fires wc-close - 收起,detail.reason: 'outside' | 'escape' | 'toggle'
982
+ */
983
+ export declare class wcFloatButtonGroup extends LitElement {
984
+ static styles: CSSResult[];
985
+ /** 形状(同步给未显式设置 shape 的子按钮与触发按钮) */
986
+ shape: wcFloatButtonShape;
987
+ /** 触发方式:空 = 子按钮常显堆叠 */
988
+ trigger: wcFloatButtonGroupTrigger;
989
+ /** 当前是否展开(仅 trigger 模式生效) */
990
+ open: boolean;
991
+ /** 触发按钮图标(默认 plus) */
992
+ icon: string;
993
+ private localize;
994
+ constructor();
995
+ disconnectedCallback(): void;
996
+ connectedCallback(): void;
997
+ /** 展开(仅 trigger 模式) */
998
+ show(): void;
999
+ /** 收起(不派发事件) */
1000
+ hide(): void;
1001
+ /** 切换开合 */
1002
+ toggle(): void;
1003
+ private emitClose;
1004
+ private onDocumentClick;
1005
+ private bindOutsideClose;
1006
+ private unbindOutsideClose;
1007
+ private handleKeydown;
1008
+ private onTriggerClick;
1009
+ private onHostMouseenter;
1010
+ private onHostMouseleave;
1011
+ private onSlotChange;
1012
+ private syncShapes;
1013
+ protected updated(changed: Map<string, unknown>): void;
1014
+ render(): TemplateResult;
1015
+ }
1016
+
1017
+ export declare type wcFloatButtonGroupTrigger = '' | 'click' | 'hover';
1018
+
1019
+ export declare type wcFloatButtonShape = 'circle' | 'square';
1020
+
1021
+ export declare type wcFloatButtonType = 'default' | 'primary';
1022
+
782
1023
  /**
783
1024
  * 表单容器:拦截提交做整体校验,聚合校验结果。
784
1025
  *
@@ -788,10 +1029,10 @@ export declare class wcEmpty extends LitElement {
788
1029
  * <wc-form-item label="用户名" name="username" required>
789
1030
  * <wc-input></wc-input>
790
1031
  * </wc-form-item>
791
- * <wc-button theme="primary" type="submit">提交</wc-button>
1032
+ * <wc-button theme="primary" html-type="submit">提交</wc-button>
792
1033
  * </wc-form>
793
1034
  * ```
794
- * 点击 `wc-button[type=submit]` / `wc-button[type=reset]` 会触发提交流程 /
1035
+ * 点击 `wc-button[html-type=submit]` / `wc-button[html-type=reset]` 会触发提交流程 /
795
1036
  * 重置(事件委托,按钮可以是任意层级后代)。
796
1037
  *
797
1038
  * @slot - 放置 wc-form-item 与按钮
@@ -813,7 +1054,7 @@ export declare class wcForm extends LitElement {
813
1054
  /** 触发提交流程(等同点击 submit 按钮) */
814
1055
  submit(): Promise<void>;
815
1056
  private onSubmit;
816
- /** 委托处理 wc-button[type=submit|reset](控件在各自 shadow 内,需用 composedPath) */
1057
+ /** 委托处理 wc-button[html-type=submit|reset](控件在各自 shadow 内,需用 composedPath) */
817
1058
  private onHostClick;
818
1059
  private focusFirstError;
819
1060
  render(): TemplateResult<1>;
@@ -1157,6 +1398,7 @@ declare type wcInputStatus = 'default' | 'success' | 'warning' | 'error';
1157
1398
  * @slot empty - 空状态(默认渲染 wc-empty)
1158
1399
  * @csspart base - 列表容器
1159
1400
  * @csspart empty - 空状态区
1401
+ * @cssprop --wc-list-radius - 列表圆角(默认 --wc-radius-medium)
1160
1402
  */
1161
1403
  export declare class wcList extends LitElement {
1162
1404
  static styles: CSSResult[];
@@ -1612,6 +1854,57 @@ declare type wcSpaceAlign = 'start' | 'center' | 'end' | 'baseline';
1612
1854
 
1613
1855
  declare type wcSpaceDirection = 'horizontal' | 'vertical';
1614
1856
 
1857
+ /**
1858
+ * 组合按钮:主操作按钮 + 下拉箭头(形态对齐 antd Dropdown.Button)。
1859
+ * 左侧主按钮派发 `wc-main-click`,右侧箭头派发 `wc-arrow-click` 并展开
1860
+ * 内置下拉菜单。菜单项用 `wc-dropdown-item` 作为默认子元素传入。
1861
+ *
1862
+ * @slot - 主按钮文案
1863
+ * @slot -(wc-dropdown-item 菜单项,自动进入下拉面板)
1864
+ * @csspart base - 组合容器
1865
+ * @cssprop --wc-split-button-radius - 两端保留的圆角
1866
+ * @fires wc-main-click - 点击主按钮
1867
+ * @fires wc-arrow-click - 点击下拉箭头(菜单随之开合)
1868
+ */
1869
+ export declare class wcSplitButton extends LitElement {
1870
+ static styles: CSSResult[];
1871
+ /** 按钮风格(透传两枚按钮) */
1872
+ theme: wcSplitButtonTheme;
1873
+ /** 按钮类型(透传两枚按钮) */
1874
+ type: wcSplitButtonType;
1875
+ /** 尺寸(透传两枚按钮) */
1876
+ size: wcSplitButtonSize;
1877
+ /** 下拉弹出方向 */
1878
+ placement: WcPlacement;
1879
+ /** 禁用(透传两枚按钮与下拉) */
1880
+ disabled: boolean;
1881
+ /** 加载中(透传两枚按钮) */
1882
+ loading: boolean;
1883
+ /** 幽灵模式(透传两枚按钮) */
1884
+ ghost: boolean;
1885
+ /** 渐变底(透传两枚按钮) */
1886
+ gradient: boolean;
1887
+ /** 点击波纹(透传两枚按钮) */
1888
+ ripple: boolean;
1889
+ private localize;
1890
+ private observer;
1891
+ private get dropdown();
1892
+ connectedCallback(): void;
1893
+ disconnectedCallback(): void;
1894
+ private syncItemSlots;
1895
+ /** 主按钮点击:拦截原生冒泡,改派 wc-main-click */
1896
+ private onMainClick;
1897
+ /** 箭头点击:拦截原生冒泡(避免污染业务层),手动开合下拉并派发 wc-arrow-click */
1898
+ private onArrowClick;
1899
+ render(): TemplateResult<1>;
1900
+ }
1901
+
1902
+ export declare type wcSplitButtonSize = 'small' | 'medium' | 'large';
1903
+
1904
+ export declare type wcSplitButtonTheme = 'default' | 'primary' | 'success' | 'warning' | 'danger';
1905
+
1906
+ export declare type wcSplitButtonType = 'base' | 'outline' | 'dashed' | 'text' | 'link';
1907
+
1615
1908
  /**
1616
1909
  * 开关
1617
1910
  *
@@ -1787,7 +2080,7 @@ export declare class wcTag extends LitElement {
1787
2080
  /** 尺寸 */
1788
2081
  size: wcTagSize;
1789
2082
  /** 填充风格:dark 实底 / light 浅底 / outline 描边 */
1790
- variant: wcTagVariant;
2083
+ type: wcTagType;
1791
2084
  /** 可关闭 */
1792
2085
  closable: boolean;
1793
2086
  /** 禁用 */
@@ -1801,7 +2094,7 @@ declare type wcTagSize = 'small' | 'medium' | 'large';
1801
2094
 
1802
2095
  declare type wcTagTheme = 'default' | 'primary' | 'success' | 'warning' | 'danger';
1803
2096
 
1804
- declare type wcTagVariant = 'dark' | 'light' | 'outline';
2097
+ declare type wcTagType = 'dark' | 'light' | 'outline';
1805
2098
 
1806
2099
  /**
1807
2100
  * 排版文本。text 为正文;heading 按 level(1~6)渲染对应语义与字号,
@@ -1812,12 +2105,12 @@ declare type wcTagVariant = 'dark' | 'light' | 'outline';
1812
2105
  */
1813
2106
  export declare class wcText extends LitElement {
1814
2107
  static styles: CSSResult[];
1815
- /** 变体:正文 / 标题 */
1816
- variant: wcTextVariant;
2108
+ /** 类型:正文 / 标题 */
2109
+ type: wcTextType;
1817
2110
  /** 标题级别(仅 heading 生效,1~6,默认 3) */
1818
2111
  level: number;
1819
2112
  /** 语义色 */
1820
- type: wcTextType;
2113
+ theme: wcTextTheme;
1821
2114
  /** 禁用态(灰字 + not-allowed) */
1822
2115
  disabled: boolean;
1823
2116
  private get headingLevel();
@@ -1868,9 +2161,9 @@ declare const wcTextarea_base: typeof LitElement & (new (...args: any[]) => Form
1868
2161
 
1869
2162
  declare type wcTextareaStatus = 'default' | 'success' | 'warning' | 'error';
1870
2163
 
1871
- declare type wcTextType = 'default' | 'secondary' | 'success' | 'warning' | 'danger';
2164
+ declare type wcTextTheme = 'default' | 'secondary' | 'success' | 'warning' | 'danger';
1872
2165
 
1873
- declare type wcTextVariant = 'text' | 'heading';
2166
+ declare type wcTextType = 'text' | 'heading';
1874
2167
 
1875
2168
  /**
1876
2169
  * 主题切换控制:通过 documentElement 上的 data-theme 属性驱动 tokens.css