@astryx-vue/core 0.2.2 → 0.2.4

package/dist/searchResultMessage-CCnq-_ce.js

@@ -0,0 +1,94 @@
+import { n as useButtonTooltip } from "./Button-DrqeomlE.js";
+import { t as _sfc_main$1 } from "./ButtonTooltip-nWWrth8j.js";
+import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
+import { t as _sfc_main$2 } from "./Icon-bteSId7T.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, unref, useId, useTemplateRef, withModifiers } from "vue";
+//#region src/Field/StatusGlyph.vue
+const _hoisted_1 = ["data-status", "aria-label"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "StatusGlyph",
+	props: {
+		type: {},
+		message: {},
+		tooltip: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const messages = useAstryxMessages();
+		const button = useTemplateRef("button");
+		const anchor = computed(() => button.value);
+		const tooltipId = `astryx-status-tooltip-${useId()}`;
+		const showsTooltip = computed(() => props.tooltip === true && Boolean(props.message));
+		const tooltip = useButtonTooltip(showsTooltip);
+		const label = computed(() => {
+			if (props.type === "warning") return messages.value.input.statusWarning;
+			if (props.type === "success") return messages.value.input.statusSuccess;
+			return messages.value.input.statusError;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [showsTooltip.value ? (openBlock(), createElementBlock("button", {
+				key: 0,
+				ref_key: "button",
+				ref: button,
+				type: "button",
+				class: "astryx-field-status-glyph",
+				"data-status": __props.type,
+				"aria-label": label.value,
+				"aria-describedby": tooltipId,
+				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+				onFocus: _cache[1] || (_cache[1] = (...args) => unref(tooltip).onTooltipPointerEnter && unref(tooltip).onTooltipPointerEnter(...args)),
+				onBlur: _cache[2] || (_cache[2] = (...args) => unref(tooltip).hideImmediately && unref(tooltip).hideImmediately(...args)),
+				onPointerenter: _cache[3] || (_cache[3] = (...args) => unref(tooltip).onPointerEnter && unref(tooltip).onPointerEnter(...args)),
+				onPointerleave: _cache[4] || (_cache[4] = (...args) => unref(tooltip).onPointerLeave && unref(tooltip).onPointerLeave(...args))
+			}, [createVNode(_sfc_main$2, {
+				icon: __props.type,
+				size: "sm"
+			}, null, 8, ["icon"])], 40, _hoisted_1)) : (openBlock(), createBlock(_sfc_main$2, {
+				key: 1,
+				class: "astryx-field-status-glyph",
+				icon: __props.type,
+				size: "sm",
+				"data-status": __props.type
+			}, null, 8, ["icon", "data-status"])), showsTooltip.value ? (openBlock(), createBlock(_sfc_main$1, {
+				key: 2,
+				id: tooltipId,
+				anchor: anchor.value,
+				open: unref(tooltip).isOpen.value,
+				text: __props.message ?? "",
+				onPointerEnter: unref(tooltip).onTooltipPointerEnter,
+				onPointerLeave: unref(tooltip).onPointerLeave
+			}, null, 8, [
+				"anchor",
+				"open",
+				"text",
+				"onPointerEnter",
+				"onPointerLeave"
+			])) : createCommentVNode("v-if", true)], 64);
+		};
+	}
+});
+//#endregion
+//#region src/Field/statusPlacement.ts
+/**
+* Ghost selectors detach an attached status message so the toolbar stays one line.
+* Tooltip and an explicit detached placement stay as given.
+*/
+function fieldStatusPlacement(variant, statusVariant) {
+	return variant === "ghost" && statusVariant === "attached" ? "detached" : statusVariant;
+}
+//#endregion
+//#region src/Selector/searchResultMessage.ts
+/**
+* 面板打开时要说的那句话。
+* 加载中什么都不说，因为选项还没到，不能断言「没有选项」或「没有结果」。
+* 创建行本身算一条结果，所以这时不报空。
+*/
+function searchResultMessage(input) {
+	if (!input.isOpen || input.isLoading) return "";
+	const searching = input.query.trim() !== "";
+	if (input.matchCount === 0 && !input.hasCreateRow) return searching ? input.emptySearchText : input.emptyText;
+	if (!searching) return "";
+	return input.resultCount(input.matchCount + (input.hasCreateRow ? 1 : 0));
+}
+//#endregion
+export { fieldStatusPlacement as n, _sfc_main as r, searchResultMessage as t };

package/dist/semantic-CKH9XVqa.d.ts

@@ -0,0 +1,54 @@
+//#region src/Icon/semantic.d.ts
+/**
+ * Semantic name to Iconify id.
+ *
+ * The names describe the job (close, search, check). The id is the drawing.
+ * Lucide matches the upstream themes. A theme replaces any of these, or adds
+ * its own keys, through `defineTheme({ icons })`.
+ *
+ * The drawing is used only after that collection is registered. Until then
+ * the built-in glyph stays, so a missing collection does not blank the icon.
+ */
+declare const defaultSemanticIcons: {
+  readonly close: "lucide:x";
+  readonly chevronDown: "lucide:chevron-down";
+  readonly chevronLeft: "lucide:chevron-left";
+  readonly chevronRight: "lucide:chevron-right";
+  readonly chevronsLeft: "lucide:chevrons-left";
+  readonly chevronsRight: "lucide:chevrons-right";
+  readonly check: "lucide:check";
+  readonly success: "lucide:circle-check";
+  readonly error: "lucide:circle-x";
+  readonly warning: "lucide:triangle-alert";
+  readonly info: "lucide:info";
+  readonly calendar: "lucide:calendar";
+  readonly clock: "lucide:clock";
+  readonly externalLink: "lucide:external-link";
+  readonly menu: "lucide:menu";
+  readonly moreHorizontal: "lucide:ellipsis";
+  readonly search: "lucide:search";
+  readonly upload: "lucide:upload";
+  readonly arrowUp: "lucide:arrow-up";
+  readonly arrowDown: "lucide:arrow-down";
+  readonly arrowsUpDown: "lucide:arrow-up-down";
+  readonly funnel: "lucide:funnel";
+  readonly eyeSlash: "lucide:eye-off";
+  readonly viewColumns: "lucide:columns-3";
+  readonly copy: "lucide:copy";
+  readonly checkDouble: "lucide:check-check";
+  readonly wrench: "lucide:wrench";
+  readonly stop: "lucide:square";
+  readonly microphone: "lucide:mic";
+  readonly image: "lucide:image";
+};
+type SemanticIconMap = Readonly<Record<string, string>>;
+/**
+ * The Iconify id for a semantic name.
+ *
+ * Theme entries win, including keys the package does not ship. An unknown
+ * name with no theme entry returns undefined, so a CSS class can still pass
+ * through `icon`.
+ */
+declare function resolveSemanticIcon(name: string | undefined, icons?: SemanticIconMap): string | undefined;
+//#endregion
+export { defaultSemanticIcons as n, resolveSemanticIcon as r, SemanticIconMap as t };

package/dist/syntaxTheme-CwVEcVDk.d.ts

@@ -0,0 +1,57 @@
+//#region src/Code/syntaxTheme.d.ts
+declare const SYNTAX_TOKEN_KEYS: readonly ["keyword", "string", "comment", "number", "function", "type", "variable", "operator", "constant", "tag", "attribute", "property", "punctuation", "background"];
+type SyntaxTokenKey = (typeof SYNTAX_TOKEN_KEYS)[number];
+/**
+ * Diff row slots. Optional on a syntax theme. The names continue
+ * `--astryx-code-syntax-*`: `added` is `--astryx-code-syntax-added`.
+ * A theme that omits them keeps the page theme's row tints, and takes its
+ * own punctuation color for the markers and no extra header paint.
+ */
+declare const DIFF_SYNTAX_TOKEN_KEYS: readonly ["added", "removed", "diff-header", "added-marker", "removed-marker"];
+type SyntaxDiffTokenKey = (typeof DIFF_SYNTAX_TOKEN_KEYS)[number];
+interface SyntaxThemeTokens {
+  'keyword': string;
+  'string': string;
+  'comment': string;
+  'number': string;
+  'function': string;
+  'type': string;
+  'variable': string;
+  'operator': string;
+  'constant': string;
+  'tag': string;
+  'attribute': string;
+  'property': string;
+  'punctuation': string;
+  'background': string;
+  /** Whole-row tint behind an added line. */
+  'added'?: string;
+  /** Whole-row tint behind a removed line. */
+  'removed'?: string;
+  /** Whole-row paint behind a hunk or file header. */
+  'diff-header'?: string;
+  /** Line number and `+` glyph on an added row. */
+  'added-marker'?: string;
+  /** Line number and `-` glyph on a removed row. */
+  'removed-marker'?: string;
+}
+/** A string is used as written. A tuple is the light stop, then the dark stop. */
+type SyntaxTokenValue = string | readonly [string, string];
+interface SyntaxThemeDefinition {
+  name: string;
+  tokens: SyntaxThemeTokens;
+}
+interface SyntaxThemeInput {
+  name: string;
+  tokens: { [K in SyntaxTokenKey]: SyntaxTokenValue; } & { [K in SyntaxDiffTokenKey]?: SyntaxTokenValue; };
+}
+/**
+ * Create a syntax theme. The 14 color tokens are required.
+ * Diff row slots are optional and use the same `--astryx-code-syntax-*` names.
+ * `[light, dark]` tuples are stored as `light-dark()`.
+ */
+declare function defineSyntaxTheme(theme: SyntaxThemeInput): SyntaxThemeDefinition;
+/** GitHub Dark (GitHub Primer team), MIT. */
+declare const githubDark: SyntaxThemeDefinition;
+//#endregion
+export { SyntaxThemeInput as a, SyntaxTokenValue as c, SyntaxThemeDefinition as i, defineSyntaxTheme as l, SYNTAX_TOKEN_KEYS as n, SyntaxThemeTokens as o, SyntaxDiffTokenKey as r, SyntaxTokenKey as s, DIFF_SYNTAX_TOKEN_KEYS as t, githubDark as u };

package/dist/{syntaxTheme-ClpWALZX.js → syntaxTheme-R7xnu5x5.js}

@@ -15,12 +15,26 @@ const SYNTAX_TOKEN_KEYS = [
 	"punctuation",
 	"background"
 ];
+/**
+* Diff row slots. Optional on a syntax theme. The names continue
+* `--astryx-code-syntax-*`: `added` is `--astryx-code-syntax-added`.
+* A theme that omits them keeps the page theme's row tints, and takes its
+* own punctuation color for the markers and no extra header paint.
+*/
+const DIFF_SYNTAX_TOKEN_KEYS = [
+	"added",
+	"removed",
+	"diff-header",
+	"added-marker",
+	"removed-marker"
+];
 function resolveSyntaxToken(value) {
 	if (typeof value === "string") return value;
 	return `light-dark(${value[0]}, ${value[1]})`;
 }
 /**
-* Create a syntax theme. All 14 tokens are required.
+* Create a syntax theme. The 14 color tokens are required.
+* Diff row slots are optional and use the same `--astryx-code-syntax-*` names.
 * `[light, dark]` tuples are stored as `light-dark()`.
 */
 function defineSyntaxTheme(theme) {
@@ -31,6 +45,10 @@ function defineSyntaxTheme(theme) {
 		const value = theme.tokens[key];
 		if (value != null) tokens[key] = resolveSyntaxToken(value);
 	}
+	for (const key of DIFF_SYNTAX_TOKEN_KEYS) {
+		const value = theme.tokens[key];
+		if (value != null) tokens[key] = resolveSyntaxToken(value);
+	}
 	return {
 		name: theme.name,
 		tokens
@@ -66,10 +84,13 @@ function syntaxThemeStyle(theme) {
 	const blue = value & 255;
 	if ((red * 299 + green * 587 + blue * 114) / 1e3 < 140) style["--astryx-code-block-border"] = "rgb(255 255 255 / 12%)";
 	for (const [key, color] of Object.entries(theme.tokens)) {
-		if (key === "background") continue;
+		if (key === "background" || color == null) continue;
 		style[`--astryx-code-syntax-${key}`] = color;
 	}
+	if (theme.tokens["added-marker"] == null) style["--astryx-code-syntax-added-marker"] = "var(--astryx-code-syntax-punctuation)";
+	if (theme.tokens["removed-marker"] == null) style["--astryx-code-syntax-removed-marker"] = "var(--astryx-code-syntax-punctuation)";
+	if (theme.tokens["diff-header"] == null) style["--astryx-code-syntax-diff-header"] = "transparent";
 	return style;
 }
 //#endregion
-export { syntaxThemeStyle as i, defineSyntaxTheme as n, githubDark as r, SYNTAX_TOKEN_KEYS as t };
+export { syntaxThemeStyle as a, githubDark as i, SYNTAX_TOKEN_KEYS as n, defineSyntaxTheme as r, DIFF_SYNTAX_TOKEN_KEYS as t };

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

@@ -28,14 +28,14 @@ interface IconColorMap {
 }
 type IconColor = Extract<keyof IconColorMap, string>;
 /**
- * The semantic names of the artwork astryx-vue keeps for its own chrome.
+ * Semantic names shared by the components.
  *
- * A name describes what the icon is for, not one particular drawing, so a theme
- * can replace the artwork with one declaration. Applications never pass these
- * 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.
+ * A name is the job, not one drawing. `defineTheme({ icons })` points the name
+ * at an Iconify id, and every component that asks for that name follows.
+ * `name` on Icon is still a direct Iconify id. `icon` accepts one of these
+ * names, a CSS class, or a component.
  */
-type IconName = 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'check' | 'moreHorizontal' | 'copy' | 'calendar' | 'clock' | 'upload' | 'arrowUp' | 'arrowDown' | 'close' | 'funnel' | 'image' | 'search' | 'stop' | 'microphone' | 'warning' | 'error';
+type IconName = 'close' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronsLeft' | 'chevronsRight' | 'check' | 'success' | 'error' | 'warning' | 'info' | 'calendar' | 'clock' | 'externalLink' | 'menu' | 'moreHorizontal' | 'search' | 'upload' | 'arrowUp' | 'arrowDown' | 'arrowsUpDown' | 'funnel' | 'eyeSlash' | 'viewColumns' | 'copy' | 'checkDouble' | 'wrench' | 'stop' | 'microphone' | 'image';
 /**
  * A built-in name, or any other string.
  *
@@ -61,11 +61,12 @@ interface IconProps {
   /**
    * 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. 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 semantic name such as `search` or `close`. The nearest theme decides
+   *   which Iconify icon that name draws. Until that icon is registered, the
+   *   built-in glyph is used;
+   * - a CSS icon class you provide, such as an UnoCSS 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 component, rendered as it is.
    *
    * Omit it when `name` or the default slot provides the artwork instead.

package/dist/{types-Bt-lSgYX.d.ts → types-D9nP_X-c.d.ts}

@@ -7,6 +7,8 @@ type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
 type TextWordBreak = 'normal' | 'break-word' | 'break-all';
 type TextDisplay = 'block' | 'inline';
 type TextAs = 'span' | 'p' | 'div' | 'label';
+type TextJustify = 'start' | 'center' | 'end';
+type TextTruncateTooltip = boolean | 'above' | 'below' | 'start' | 'end';
 interface TextProps {
   /**
    * Semantic text type. Determines size, weight, and line-height.
@@ -54,12 +56,23 @@ interface TextProps {
    * @default 'span'
    */
   as?: TextAs;
+  /**
+   * Text alignment. `start` and `end` follow the writing direction.
+   * @default 'start'
+   */
+  justify?: TextJustify;
   /**
    * Maximum lines before truncation. 0 means no truncation.
    * A positive value forces block layout so the ellipsis has a width.
    * @default 0
    */
   maxLines?: number;
+  /**
+   * 截断之后要不要把全文放进提示。`true` 出现在上方，方位字符串指定位置，`false` 关掉。
+   * 没被截断时不会弹出。
+   * @default true
+   */
+  hasTruncateTooltip?: TextTruncateTooltip;
 }
 //#endregion
-export { TextSize as a, TextWordBreak as c, TextProps as i, TextWrap as l, TextColor as n, TextType as o, TextDisplay as r, TextWeight as s, TextAs as t };
+export { TextProps as a, TextType as c, TextWrap as d, TextJustify as i, TextWeight as l, TextColor as n, TextSize as o, TextDisplay as r, TextTruncateTooltip as s, TextAs as t, TextWordBreak as u };

package/dist/{types-CAZY4Xua.d.ts → types-DGYHIu4I.d.ts}

@@ -1,5 +1,24 @@
 import { Component, MaybeRefOrGetter, VNodeChild } from "vue";
 //#region src/List/types.d.ts
+/** 滑动露出的一侧。`leading` 是往行内末尾拖，`trailing` 是往行内开头拖。 */
+type ItemSwipeSide = 'leading' | 'trailing';
+/** `reveal` 松手后停开；`commit` 越过阈值就滑出并触发最外侧，一侧只适合一个操作。 */
+type ItemSwipeBehavior = 'reveal' | 'commit';
+/** 横滑露出的一个操作。数组里越靠后越靠外。 */
+interface ItemSwipeAction {
+  id?: string;
+  label: string;
+  icon?: Component;
+  onActivate: () => void;
+  isDisabled?: boolean;
+  variant?: 'neutral' | 'accent' | 'destructive';
+  /** 触发后行停在滑出的位置，不再弹回。行本身不会被删掉。 */
+  hasRemoval?: boolean;
+}
+interface ItemSwipeActions {
+  leading?: ItemSwipeAction[];
+  trailing?: ItemSwipeAction[];
+}
 /**
  * Spacing density for list rows.
  *
@@ -124,6 +143,16 @@ interface ListItemProps {
    * @default false
    */
   isSelected?: boolean;
+  /**
+   * 触摸横滑露出的操作。鼠标不会开始这次拖动。
+   * 每个操作还要在行自己的内容里能点到，否则键盘和鼠标够不着。
+   */
+  swipeActions?: ItemSwipeActions;
+  /**
+   * 松手之后怎么收场。
+   * @default 'reveal'
+   */
+  swipeBehavior?: ItemSwipeBehavior;
 }
 interface ListItemSlots {
   /** Leading content before the label: an icon, an avatar, a checkbox. */
@@ -178,4 +207,4 @@ interface ItemSlots extends ListItemSlots {
   marker?: () => VNodeChild;
 }
 //#endregion
-export { ItemLayout as a, ItemTarget as c, ListEdgeCompensation as d, ListItemProps as f, ListSlots as g, ListProps as h, ItemLabel as i, ItemText as l, ListMarkerStyle as m, ItemDensity as n, ItemProps as o, ListItemSlots as p, ItemElement as r, ItemSlots as s, ItemAlign as t, ListDensity as u };
+export { ListItemSlots as _, ItemLayout as a, ListSlots as b, ItemSwipeAction as c, ItemSwipeSide as d, ItemTarget as f, ListItemProps as g, ListEdgeCompensation as h, ItemLabel as i, ItemSwipeActions as l, ListDensity as m, ItemDensity as n, ItemProps as o, ItemText as p, ItemElement as r, ItemSlots as s, ItemAlign as t, ItemSwipeBehavior as u, ListMarkerStyle as v, ListProps as y };

package/dist/types-D_J66aPN.d.ts

@@ -0,0 +1,85 @@
+import { l as TextWeight, o as TextSize } from "./types-D9nP_X-c.js";
+import { Component } from "vue";
+//#region src/Link/types.d.ts
+type LinkColor = 'primary' | 'secondary' | 'accent' | 'inherit';
+type LinkSize = TextSize;
+type LinkWeight = TextWeight;
+/** Custom root used instead of `<a>` when `href` is set. Pass `RouterLink` or another component that accepts `href` and `to`. */
+type LinkRoot = string | Component;
+interface LinkProps {
+  /**
+   * Custom root used instead of `<a>` when `href` is set and the link is enabled.
+   * The component receives `href` and `to`. Disabled links stay a plain anchor.
+   */
+  as?: LinkRoot;
+  /**
+   * Accessible name. Set this when the visible content is not the name,
+   * for example an icon-only link. It replaces the link text for assistive technology.
+   */
+  label?: string;
+  /**
+   * Link destination URL.
+   */
+  href?: string;
+  /**
+   * Whether the link opens in a new tab and shows an external indicator.
+   * @default false
+   */
+  isExternalLink?: boolean;
+  /**
+   * Screen-reader text after an external link. Defaults to the current locale.
+   */
+  newTabLabel?: string;
+  /**
+   * Whether the link always shows an underline.
+   * @default false
+   */
+  hasUnderline?: boolean;
+  /**
+   * Text color.
+   * @default 'accent'
+   */
+  color?: LinkColor;
+  /**
+   * Whether the link is disabled.
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * HTML target attribute.
+   */
+  target?: string;
+  /**
+   * HTML rel attribute.
+   */
+  rel?: string;
+  /**
+   * Causes the browser to download the linked URL.
+   */
+  download?: string | boolean;
+  /**
+   * Tooltip text shown on hover and keyboard focus.
+   */
+  tooltip?: string;
+  /**
+   * Whether the link stands alone, rather than sitting inside body text.
+   * Applies body font size and line height.
+   * @default false
+   */
+  isStandalone?: boolean;
+  /**
+   * Font size. Uses the same steps as Text.
+   */
+  size?: LinkSize;
+  /**
+   * Font weight. `normal` is the same as `regular`.
+   */
+  weight?: LinkWeight;
+  /**
+   * Maximum lines before the label truncates. `0` does not truncate.
+   * @default 0
+   */
+  maxLines?: number;
+}
+//#endregion
+export { LinkWeight as a, LinkSize as i, LinkProps as n, LinkRoot as r, LinkColor as t };