@astryx-vue/core 0.2.0 → 0.2.2

package/dist/{types-JktRxujg.d.ts → types-Cp4liug-.d.ts}

@@ -1,4 +1,4 @@
-import { VNode, VNodeChild } from "vue";
+import { CSSProperties, VNode, VNodeChild } from "vue";
 //#region src/Table/types.d.ts
 type TableDensity = 'compact' | 'balanced' | 'spacious';
 type TableDividers = 'rows' | 'columns' | 'grid' | 'none';
@@ -33,6 +33,10 @@ interface TableColumn<T extends Record<string, unknown> = Record<string, unknown
   };
   /** Field key used by the filtering plugin. */
   filter?: string;
+  /** 表头只留给读屏，视觉上留空。 */
+  headerHidden?: boolean;
+  /** 为 false 时，列宽拖动不给这一列画把手。 */
+  resizable?: boolean;
   renderCell?: (item: T, index: number) => VNodeChild;
 }
 interface TableFilterField {
@@ -68,6 +72,47 @@ interface TableSelectionContribution<T> {
   rowLabel?: (row: T) => string;
   hasRowHighlight?: boolean;
 }
+interface TableRowMenuItem {
+  id: string;
+  label: string;
+  icon?: string;
+  onSelect: () => void;
+}
+interface TableGroupPatch {
+  groupKey: string;
+  count: number;
+  collapsed: boolean;
+  onToggle: () => void;
+  render?: () => VNodeChild;
+}
+interface TablePanelPatch {
+  variant: 'muted' | 'transparent';
+  render: () => VNodeChild;
+}
+interface TableRowPatch {
+  attrs?: Record<string, string | undefined>;
+  class?: string;
+  onClick?: (event: MouseEvent) => void;
+  suppressSelection?: boolean;
+  skipRowIndex?: boolean;
+  group?: TableGroupPatch;
+  panel?: TablePanelPatch;
+  menu?: readonly TableRowMenuItem[];
+}
+interface TableCellPatch {
+  class?: string;
+  style?: CSSProperties;
+  attrs?: Record<string, string | undefined>;
+}
+interface TableCellPatchInput<T extends Record<string, unknown>> {
+  column: TableColumn<T>;
+  columns: readonly TableColumn<T>[];
+  row: T | null;
+  kind: 'header' | 'body';
+}
+interface TableHeaderPatch {
+  before?: () => VNodeChild;
+}
 interface TablePlugin<T extends Record<string, unknown> = Record<string, unknown>> {
   transformColumns?: (columns: TableColumn<T>[]) => TableColumn<T>[];
   sortFor?: (column: TableColumn<T>) => TableSortContribution | null;
@@ -76,11 +121,29 @@ interface TablePlugin<T extends Record<string, unknown> = Record<string, unknown
   widthFor?: (column: TableColumn<T>) => number | undefined;
   onColumnResizeEnd?: (key: string, width: number) => void;
   below?: () => VNodeChild;
+  /** 改一行的属性、点击、分组头或展开面板。多个插件的结果会合并。 */
+  rowPatch?: (row: T, index: number, columnCount: number) => TableRowPatch | null;
+  /** 改表头或单元格的定位与类名。选择列的 key 是 `__select`。 */
+  cellPatch?: (input: TableCellPatchInput<T>) => TableCellPatch | null;
+  /** 在列表头文字前面加控件，例如树的全部展开。 */
+  headerPatch?: (column: TableColumn<T>) => TableHeaderPatch | null;
+  /** 表格滚动容器挂上或卸下时调用，用来画固定列的滚动阴影。 */
+  bindScrollRoot?: (element: HTMLElement | null) => void;
 }
 interface TableProps<T extends Record<string, unknown> = Record<string, unknown>> {
   data?: readonly T[];
   columns?: readonly TableColumn<T>[];
-  idKey?: string;
+  idKey?: string | ((item: T) => string);
+  /**
+   * 窗口里第一行数据的行号，从 1 计。
+   * 和 `rowCount` 任一设置后，数据行带 `aria-rowindex`。分组头和展开面板不计。
+   */
+  rowIndexStart?: number;
+  /**
+   * 完整结果集的行数，含当前窗口以外的行。
+   * 设置后表格带 `aria-rowcount`。只设置了 `rowIndexStart` 时，行数为未知（-1）。
+   */
+  rowCount?: number;
   density?: TableDensity;
   dividers?: TableDividers;
   isStriped?: boolean;
@@ -104,4 +167,4 @@ interface TableCellProps {
   headers?: string;
 }
 //#endregion
-export { TableSortEntry as _, TableColumn as a, TableVerticalAlign as b, TableDividers as c, TableFilterValue as d, TablePlugin as f, TableSortDirection as g, TableSlots as h, TableCellProps as i, TableFilterField as l, TableRowProps as m, PixelWidth as n, TableColumnAlign as o, TableProps as p, ProportionalWidth as r, TableDensity as s, ColumnWidth as t, TableFilterState as u, TableSortState as v, TableTextOverflow as y };
+export { TableSortEntry as C, TableVerticalAlign as E, TableSortDirection as S, TableTextOverflow as T, TableProps as _, TableCellProps as a, TableRowProps as b, TableDensity as c, TableFilterState as d, TableFilterValue as f, TablePlugin as g, TablePanelPatch as h, TableCellPatch as i, TableDividers as l, TableHeaderPatch as m, PixelWidth as n, TableColumn as o, TableGroupPatch as p, ProportionalWidth as r, TableColumnAlign as s, ColumnWidth as t, TableFilterField as u, TableRowMenuItem as v, TableSortState as w, TableSlots as x, TableRowPatch as y };

package/dist/{index-B8MbfMwV.d.ts → types-DDAAT1Xd.d.ts}

@@ -1,10 +1,17 @@
 import { a as ButtonProps } from "./types-WlmsNL1I.js";
-import { c as ItemTarget } from "./types-CAZY4Xua.js";
 import { n as LayerPlacement, t as LayerAlignment } from "./position-DFW5ymAF.js";
-import { Component, ComputedRef, InjectionKey, VNodeChild } from "vue";
+import { c as ItemTarget } from "./types-CAZY4Xua.js";
+import { Component, VNodeChild } from "vue";
 //#region src/DropdownMenu/types.d.ts
 /** Size of the menu, derived from the trigger button's size. */
 type DropdownMenuSize = 'sm' | 'md' | 'lg';
+/**
+ * Where the menu opens.
+ *
+ * `popover` hangs off the trigger. `bottom-sheet` rises from the bottom edge.
+ * `adaptive` uses the sheet only on a compact touch surface.
+ */
+type DropdownMenuPresentation = 'adaptive' | 'bottom-sheet' | 'popover';
 /** Visual variant of one menu row. */
 type DropdownMenuItemVariant = 'default' | 'destructive';
 /**
@@ -132,6 +139,13 @@ interface DropdownMenuProps {
    * @default 'below'
    */
   placement?: LayerPlacement;
+  /**
+   * `popover` anchors to the trigger. `bottom-sheet` uses a bottom sheet.
+   * `adaptive` chooses the sheet on a compact touch surface and a popover
+   * otherwise.
+   * @default 'popover'
+   */
+  presentation?: DropdownMenuPresentation;
   /**
    * How the menu aligns with the trigger along the placement axis.
    * @default 'start'
@@ -247,85 +261,25 @@ interface DropdownMenuGroupSlots {
   /** Rich content replacing the `title` prop, still used as the group's name. */
   title?: () => VNodeChild;
 }
-//#endregion
-//#region src/DropdownMenu/context.d.ts
-/**
- * What a `DropdownMenu` tells the rows inside it.
- *
- * `menuSize` is a computed ref rather than a plain value: a row reads it after
- * mount, so a snapshot would leave every row stuck at the size the trigger had
- * when the menu was created.
- */
-interface DropdownMenuContextValue {
-  /** Closes the menu and returns focus to the trigger. */
-  closeMenu: () => void;
-  /** Size of the menu, derived from the trigger button's size. */
-  menuSize: ComputedRef<DropdownMenuSize>;
+interface DropdownMenuSubMenuProps {
+  /** Row label. */
+  label?: string | number;
+  /** Icon before the label. A CSS class or a component. */
+  icon?: string | Component;
+  /** Secondary line under the label. */
+  description?: string | number;
+  /**
+   * Whether the row can open its flyout.
+   * @default false
+   */
+  isDisabled?: boolean;
+}
+interface DropdownMenuSubMenuSlots {
+  /** The rows of the nested menu. */
+  default?: () => VNodeChild;
+  icon?: () => VNodeChild;
+  label?: () => VNodeChild;
+  description?: () => VNodeChild;
 }
-/** The surrounding menu, or `undefined` when a row stands alone. */
-declare function useDropdownMenuContext(): DropdownMenuContextValue | undefined;
-//#endregion
-//#region src/DropdownMenu/DropdownMenu.vue.d.ts
-type __VLS_Props = DropdownMenuProps;
-type __VLS_Slots$2 = DropdownMenuSlots;
-type __VLS_ModelProps = {
-  'isMenuOpen'?: boolean | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base$2: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  click: () => any;
-  openChange: (isOpen: boolean) => any;
-  "update:isMenuOpen": (...args: unknown[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  onClick?: (() => any) | undefined;
-  onOpenChange?: ((isOpen: boolean) => any) | undefined;
-  "onUpdate:isMenuOpen"?: ((...args: unknown[]) => any) | undefined;
-}>, {
-  button: DropdownMenuButtonProps;
-  placement: LayerPlacement;
-  alignment: LayerAlignment;
-  hasChevron: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$3: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
-declare const _default$3: typeof __VLS_export$3;
-type __VLS_WithSlots$2<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
-//#endregion
-//#region src/DropdownMenu/DropdownMenuDivider.vue.d.ts
-declare const __VLS_export$2: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default$2: typeof __VLS_export$2;
-//#endregion
-//#region src/DropdownMenu/DropdownMenuGroup.vue.d.ts
-type __VLS_Slots$1 = DropdownMenuGroupSlots;
-declare const __VLS_base$1: import("vue").DefineComponent<DropdownMenuGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DropdownMenuGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
-declare const _default$1: typeof __VLS_export$1;
-type __VLS_WithSlots$1<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
-//#endregion
-//#region src/DropdownMenu/DropdownMenuItem.vue.d.ts
-type __VLS_Slots = DropdownMenuItemSlots;
-declare const __VLS_base: import("vue").DefineComponent<DropdownMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  click: (event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<DropdownMenuItemProps> & Readonly<{
-  onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {
-  isDisabled: boolean;
-  variant: DropdownMenuItemVariant;
-  hasCloseOnSelect: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
 //#endregion
-export { DropdownMenuTriggerProps as S, DropdownMenuOption as _, DropdownMenuContextValue as a, DropdownMenuSize as b, DropdownMenuDividerData as c, DropdownMenuGroupSlots as d, DropdownMenuItemData as f, DropdownMenuItemVariant as g, DropdownMenuItemSlots as h, _default$3 as i, DropdownMenuEmits as l, DropdownMenuItemProps as m, _default$1 as n, useDropdownMenuContext as o, DropdownMenuItemEmits as p, _default$2 as r, DropdownMenuButtonProps as s, _default as t, DropdownMenuGroupProps as u, DropdownMenuProps as v, DropdownMenuSlots as x, DropdownMenuSection as y };
+export { DropdownMenuSubMenuProps as _, DropdownMenuGroupSlots as a, DropdownMenuItemProps as c, DropdownMenuOption as d, DropdownMenuPresentation as f, DropdownMenuSlots as g, DropdownMenuSize as h, DropdownMenuGroupProps as i, DropdownMenuItemSlots as l, DropdownMenuSection as m, DropdownMenuDividerData as n, DropdownMenuItemData as o, DropdownMenuProps as p, DropdownMenuEmits as r, DropdownMenuItemEmits as s, DropdownMenuButtonProps as t, DropdownMenuItemVariant as u, DropdownMenuSubMenuSlots as v, DropdownMenuTriggerProps as y };

package/dist/types-DIYwbkpe.d.ts

@@ -0,0 +1,33 @@
+//#region src/Badge/types.d.ts
+interface BadgeVariantMap {
+  blue: true;
+  cyan: true;
+  error: true;
+  green: true;
+  info: true;
+  neutral: true;
+  orange: true;
+  pink: true;
+  purple: true;
+  red: true;
+  success: true;
+  teal: true;
+  warning: true;
+  yellow: true;
+}
+type BadgeVariant = Extract<keyof BadgeVariantMap, string>;
+interface BadgeProps {
+  /**
+   * The visual style of the badge.
+   *
+   * @default 'neutral'
+   */
+  variant?: BadgeVariant;
+  /**
+   * Badge text. A string or number is also set as the title so a clipped
+   * label stays reachable. The default slot overrides this when both are set.
+   */
+  label?: string | number;
+}
+//#endregion
+export { BadgeVariant as n, BadgeVariantMap as r, BadgeProps as t };

package/dist/{types-DZoEm_DG.d.ts → types-pnljWjEE.d.ts}

@@ -35,7 +35,7 @@ type IconColor = Extract<keyof IconColorMap, string>;
  * names: the artwork is a library implementation detail, and a `icon` prop or
  * slot takes a CSS icon class or the application's own component instead.
  */
-type IconName = 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'check' | 'moreHorizontal' | 'copy' | 'calendar' | 'clock' | 'upload' | 'arrowUp' | 'arrowDown' | 'close' | 'funnel' | 'image';
+type IconName = 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'check' | 'moreHorizontal' | 'copy' | 'calendar' | 'clock' | 'upload' | 'arrowUp' | 'arrowDown' | 'close' | 'funnel' | 'image' | 'search' | 'stop' | 'microphone' | 'warning' | 'error';
 /**
  * A built-in name, or any other string.
  *
@@ -44,15 +44,32 @@ type IconName = 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'check' | 'more
  */
 type ExtendedIconName = IconName | (string & {});
 interface IconProps {
+  /**
+   * Iconify icon to draw, as `collection:icon`.
+   *
+   * `carbon:settings` reads the `settings` icon from the Carbon collection.
+   * `carbon-settings` is the same icon when that collection is registered.
+   * The component does not ship the artwork: install `@iconify-json/carbon`
+   * (or another collection) and register it with the `astryxIcons` Vite
+   * plugin, or call `addIcon` / `addCollection`.
+   *
+   * With no `size`, the icon is `1em` square and uses `currentColor`, so it
+   * follows the surrounding text and the sized slots on Button, IconButton,
+   * and fields.
+   */
+  name?: string;
   /**
    * The icon to render. Three forms are accepted:
    *
    * - a string, treated as a CSS icon class you provide — for example an
-   *   UnoCSS icon such as `'i-carbon-search'`, or your own class;
+   *   UnoCSS icon such as `'i-carbon-search'`, or your own class. The class
+   *   paints the inside of the sized box, so a utility that sets
+   *   `width`/`height: 100%` fills the icon instead of replacing its size;
    * - a name from the library's own chrome, which only the components use;
    * - a component, rendered as it is.
    *
-   * Omit it when the default slot provides the artwork instead.
+   * Omit it when `name` or the default slot provides the artwork instead.
+   * `name` wins when both are set.
    */
   icon?: ExtendedIconName | Component;
   /**
@@ -68,9 +85,9 @@ interface IconProps {
   /**
    * The size of the icon.
    *
-   * An explicit value wins. When omitted, Icon uses the nearest default
-   * supplied by an owning astryx-vue component for its icon slot, then falls
-   * back to `md`.
+   * An explicit value wins. When omitted, a `name` icon stays `1em` so it
+   * scales with the text around it. Any other icon uses the nearest default
+   * supplied by an owning astryx-vue component, then falls back to `md`.
    */
   size?: IconSize;
   /**

package/dist/{useResizable-CeESZS1v.d.ts → useResizable-CUoNPmUw.d.ts}

@@ -1,4 +1,4 @@
-import { n as PixelWidth } from "./types-JktRxujg.js";
+import { n as PixelWidth } from "./types-Cp4liug-.js";
 import { Ref } from "vue";
 //#region src/composables/useResizable.d.ts
 type ResizableDirection = 'horizontal' | 'vertical';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -88,6 +88,10 @@
       "types": "./dist/Icon/index.d.ts",
       "import": "./dist/Icon/index.js"
     },
+    "./icons": {
+      "types": "./dist/Icon/plugin.d.ts",
+      "import": "./dist/Icon/plugin.js"
+    },
     "./Layout": {
       "types": "./dist/Layout/index.d.ts",
       "import": "./dist/Layout/index.js"
@@ -104,6 +108,10 @@
       "types": "./dist/Outline/index.d.ts",
       "import": "./dist/Outline/index.js"
     },
+    "./PowerSearch": {
+      "types": "./dist/PowerSearch/index.d.ts",
+      "import": "./dist/PowerSearch/index.js"
+    },
     "./RadioList": {
       "types": "./dist/RadioList/index.d.ts",
       "import": "./dist/RadioList/index.js"
@@ -461,6 +469,7 @@
     "micromark-extension-gfm": "3.0.0"
   },
   "devDependencies": {
+    "@types/node": "26.6.4",
     "@vue/compiler-sfc": "3.5.43",
     "tsdown": "0.23.0",
     "typescript": "npm:@typescript/typescript6@6.0.2",

package/styles/avatar.css

@@ -9,6 +9,20 @@
     vertical-align: middle;
   }
 
+  .astryx-avatar--interactive {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .astryx-avatar--interactive:focus-visible {
+    outline: 2px solid var(--astryx-color-border-focus, #0074e2);
+    outline-offset: 2px;
+  }
+
   .astryx-avatar--circle {
     border-radius: var(--astryx-radius-full, 9999px);
   }

package/styles/badge.css

@@ -17,6 +17,14 @@
     line-height: var(--astryx-text-supporting-leading, 1.6667);
     vertical-align: middle;
     white-space: nowrap;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .astryx-badge__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .astryx-badge[data-variant='neutral'] {

package/styles/breadcrumbs.css

@@ -68,9 +68,14 @@
     text-decoration: none;
   }
 
-  .astryx-breadcrumb-item__icon {
+  .astryx-breadcrumb-item__icon,
+  .astryx-breadcrumb-item__chevron {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
   }
+
+  .astryx-breadcrumb-item__chevron {
+    margin-inline-start: var(--astryx-spacing-0-5, 2px);
+  }
 }

package/styles/button.css

@@ -181,6 +181,19 @@
     font-size: 20px;
   }
 
+  /* The end slot has no fixed box of its own. A named icon still matches the leading slot. */
+  .astryx-button__end > .astryx-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+  }
+
+  .astryx-button[data-size='lg'] .astryx-button__end > .astryx-icon {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+  }
+
   .astryx-button__icon > *,
   .astryx-button__end > * {
     display: block;

package/styles/calendar.css

@@ -114,6 +114,22 @@
     box-shadow: inset 0 0 0 1px var(--astryx-color-border-emphasized, #d4d4d4);
   }
 
+  .astryx-calendar[data-months='2'] {
+    display: flex;
+    gap: var(--astryx-spacing-4, 16px);
+  }
+
+  .astryx-calendar[data-months='2'] .astryx-calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .astryx-calendar-cell.is-in-range {
+    background: color-mix(in srgb, light-dark(#1b1b1b, #f1f1f1) 12%, transparent);
+    border-radius: 0;
+  }
+
   .astryx-calendar-cell.is-selected {
     background: light-dark(#1b1b1b, #f1f1f1);
     color: light-dark(#ffffff, #111111);

package/styles/card.css

@@ -33,6 +33,8 @@
     --layout-padding-own-outer-y: initial;
     --layout-padding-outer-x: var(--_card-padding-inline-start);
     --layout-padding-outer-y: var(--_card-padding-block-start);
+    --layout-padding-inner-x: var(--_card-padding-inline-start);
+    --layout-padding-inner-y: var(--_card-padding-block-start);
   }
 
   .astryx-card[data-scrollable='true'] {