@ac-design/design-system 0.0.0-stage → 1.0.0

package/dist/lib/composables/useToast.d.ts

@@ -0,0 +1,68 @@
+export type ToastTone = "neutral" | "success" | "error" | "warning" | "info";
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ToastOptions {
+    /** A second line under the title. */
+    description?: string;
+    /** Milliseconds before it closes on its own. 0 keeps it until dismissed. Default 5000. */
+    duration?: number;
+    /** One button in the toast, e.g. `{ label: "Undo", onClick }`. Clicking it also closes the toast. */
+    action?: ToastAction;
+    /** Shows the close button. Default true. */
+    dismissible?: boolean;
+    /** Reuse an id to update a toast in place, e.g. "Backing up…" → "Backup complete". */
+    id?: string;
+}
+export interface Toast extends Required<Pick<ToastOptions, "duration" | "dismissible">> {
+    id: string;
+    tone: ToastTone;
+    title: string;
+    description?: string;
+    action?: ToastAction;
+    /** Bumped on every update so the toaster restarts the timer. */
+    version: number;
+}
+declare function dismiss(id: string): void;
+declare function clear(): void;
+/**
+ * Raise toasts from anywhere. Mount `<AcToaster />` once in the app root to show them.
+ * Each call returns the toast's id for `dismiss(id)` or for updating it with `{ id }`.
+ */
+export declare function useToast(): {
+    /** Every toast currently queued, oldest first. Read-only; used by AcToaster. */
+    toasts: Readonly<import("vue").Ref<readonly {
+        readonly id: string;
+        readonly tone: ToastTone;
+        readonly title: string;
+        readonly description?: string | undefined;
+        readonly action?: {
+            readonly label: string;
+            readonly onClick: () => void;
+        } | undefined;
+        readonly version: number;
+        readonly dismissible: boolean;
+        readonly duration: number;
+    }[], readonly {
+        readonly id: string;
+        readonly tone: ToastTone;
+        readonly title: string;
+        readonly description?: string | undefined;
+        readonly action?: {
+            readonly label: string;
+            readonly onClick: () => void;
+        } | undefined;
+        readonly version: number;
+        readonly dismissible: boolean;
+        readonly duration: number;
+    }[]>>;
+    toast: (title: string, options?: ToastOptions) => string;
+    success: (title: string, options?: ToastOptions) => string;
+    error: (title: string, options?: ToastOptions) => string;
+    warning: (title: string, options?: ToastOptions) => string;
+    info: (title: string, options?: ToastOptions) => string;
+    dismiss: typeof dismiss;
+    clear: typeof clear;
+};
+export {};

package/dist/lib/composables/useToast.js

@@ -0,0 +1,36 @@
+import { readonly as e, ref as t } from "vue";
+//#region src/lib/composables/useToast.ts
+var n = 5e3, r = t([]), i = 0;
+function a(e, t, a = {}) {
+	let o = a.id ?? `toast-${++i}`, s = r.value.find((e) => e.id === o), c = {
+		id: o,
+		tone: e,
+		title: t,
+		description: a.description,
+		action: a.action,
+		duration: a.duration ?? n,
+		dismissible: a.dismissible ?? !0,
+		version: (s?.version ?? 0) + 1
+	};
+	return r.value = s ? r.value.map((e) => e.id === o ? c : e) : [...r.value, c], o;
+}
+function o(e) {
+	r.value = r.value.filter((t) => t.id !== e);
+}
+function s() {
+	r.value = [];
+}
+function c() {
+	return {
+		toasts: e(r),
+		toast: (e, t) => a("neutral", e, t),
+		success: (e, t) => a("success", e, t),
+		error: (e, t) => a("error", e, t),
+		warning: (e, t) => a("warning", e, t),
+		info: (e, t) => a("info", e, t),
+		dismiss: o,
+		clear: s
+	};
+}
+//#endregion
+export { c as useToast };

package/dist/lib/editor/index.d.ts

@@ -0,0 +1,4 @@
+export { default as AcCodeEditor } from "../components/AcCodeEditor.vue";
+export { default as AcFileEditor } from "../components/AcFileEditor.vue";
+export type { EditorFile } from "../components/AcFileEditor.vue";
+export type { EditorLanguage, EditorProblem } from "./validate";

package/dist/lib/editor/index.js

@@ -0,0 +1,3 @@
+import e from "../components/AcCodeEditor.js";
+import t from "../components/AcFileEditor.js";
+export { e as AcCodeEditor, t as AcFileEditor };

package/dist/lib/editor/theme.d.ts

@@ -0,0 +1,3 @@
+export declare const editorTheme: import("@codemirror/state").Extension;
+export declare const editorHighlight: import("@codemirror/state").Extension;
+export declare const editorPhrases: import("@codemirror/state").Extension;

package/dist/lib/editor/theme.js

@@ -0,0 +1,309 @@
+import { HighlightStyle as e, syntaxHighlighting as t } from "@codemirror/language";
+import { EditorState as n } from "@codemirror/state";
+import { EditorView as r } from "@codemirror/view";
+import { tags as i } from "@lezer/highlight";
+//#region src/lib/editor/theme.ts
+var a = r.theme({
+	"&": {
+		color: "var(--color-body)",
+		backgroundColor: "var(--color-surface)",
+		fontSize: "12px",
+		height: "100%"
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": {
+		fontFamily: "var(--font-mono)",
+		lineHeight: "20px",
+		overflow: "auto",
+		scrollbarWidth: "thin",
+		scrollbarColor: "var(--color-slate-70) transparent"
+	},
+	".cm-content": {
+		padding: "8px 0",
+		caretColor: "var(--color-heading)"
+	},
+	".cm-line": { padding: "0 16px 0 8px" },
+	".cm-cursor, .cm-dropCursor": {
+		borderLeftColor: "var(--color-heading)",
+		borderLeftWidth: "1.5px"
+	},
+	".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection": { backgroundColor: "hsl(var(--primary-hue) 70% 50% / 0.2)" },
+	".cm-activeLine": { backgroundColor: "color-mix(in oklab, var(--color-slate-50) 7%, transparent)" },
+	".cm-placeholder": { color: "var(--color-muted)" },
+	".cm-gutters": {
+		backgroundColor: "var(--color-surface-muted)",
+		color: "var(--color-muted)",
+		borderRight: "1px solid var(--color-border-light)"
+	},
+	".cm-lineNumbers .cm-gutterElement": {
+		minWidth: "36px",
+		padding: "0 8px 0 12px"
+	},
+	".cm-activeLineGutter": {
+		backgroundColor: "transparent",
+		color: "var(--color-heading)"
+	},
+	".cm-foldGutter .cm-gutterElement": {
+		width: "14px",
+		color: "var(--color-muted)",
+		cursor: "pointer"
+	},
+	".cm-foldGutter .cm-gutterElement:hover": { color: "var(--color-heading)" },
+	".cm-foldPlaceholder": {
+		backgroundColor: "var(--color-surface-sunken)",
+		border: "none",
+		borderRadius: "4px",
+		color: "var(--color-muted)",
+		padding: "0 4px",
+		margin: "0 2px"
+	},
+	".cm-matchingBracket, &.cm-focused .cm-matchingBracket": {
+		backgroundColor: "var(--color-primary-90)",
+		color: "inherit",
+		outline: "none"
+	},
+	".cm-nonmatchingBracket": {
+		backgroundColor: "var(--color-red-90)",
+		color: "inherit"
+	},
+	".cm-selectionMatch": { backgroundColor: "var(--color-blue-90)" },
+	".cm-searchMatch": {
+		backgroundColor: "var(--color-yellow-90)",
+		outline: "1px solid var(--color-yellow-70)",
+		borderRadius: "2px"
+	},
+	".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "var(--color-yellow-80)" },
+	".cm-panels": {
+		backgroundColor: "var(--color-surface-muted)",
+		color: "var(--color-body)"
+	},
+	".cm-panels.cm-panels-top": { borderBottom: "1px solid var(--color-border-light)" },
+	".cm-panels.cm-panels-bottom": { borderTop: "1px solid var(--color-border-light)" },
+	".cm-panel.cm-search": {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "6px",
+		padding: "8px 36px 8px 12px",
+		fontFamily: "var(--font-sans)",
+		fontSize: "12px"
+	},
+	".cm-panel.cm-search br": { display: "none" },
+	".cm-panel.cm-search label": {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "4px",
+		color: "var(--color-label)",
+		fontSize: "12px"
+	},
+	".cm-panel.cm-search input[type=checkbox]": {
+		accentColor: "var(--color-primary)",
+		margin: "0"
+	},
+	".cm-panel.cm-search [name=close]": {
+		position: "absolute",
+		top: "8px",
+		right: "10px",
+		width: "24px",
+		height: "24px",
+		borderRadius: "4px",
+		color: "var(--color-muted)",
+		fontSize: "16px",
+		cursor: "pointer"
+	},
+	".cm-panel.cm-search [name=close]:hover": {
+		backgroundColor: "var(--color-surface-sunken)",
+		color: "var(--color-heading)"
+	},
+	".cm-textfield": {
+		height: "28px",
+		margin: "0",
+		padding: "0 8px",
+		border: "1px solid var(--color-border)",
+		borderRadius: "6px",
+		backgroundColor: "var(--color-surface)",
+		color: "var(--color-heading)",
+		fontFamily: "var(--font-mono)",
+		fontSize: "12px"
+	},
+	".cm-textfield:focus": {
+		outline: "none",
+		borderColor: "var(--color-primary)",
+		boxShadow: "0 0 0 3px var(--color-ring)"
+	},
+	".cm-button": {
+		height: "28px",
+		margin: "0",
+		padding: "0 10px",
+		border: "1px solid var(--color-border)",
+		borderRadius: "6px",
+		backgroundColor: "var(--color-surface)",
+		backgroundImage: "none",
+		color: "var(--color-heading)",
+		fontSize: "12px",
+		fontWeight: "500",
+		cursor: "pointer"
+	},
+	".cm-button:hover": { borderColor: "var(--color-border-dark)" },
+	".cm-button:active": {
+		backgroundImage: "none",
+		backgroundColor: "var(--color-surface-sunken)"
+	},
+	".cm-button:focus-visible, .cm-panel.cm-search [name=close]:focus-visible": {
+		outline: "none",
+		boxShadow: "0 0 0 3px var(--color-ring)"
+	},
+	".cm-lintRange-error": {
+		backgroundImage: "none",
+		textDecoration: "underline wavy var(--color-red-50)",
+		textDecorationSkipInk: "none",
+		textUnderlineOffset: "3px"
+	},
+	".cm-lintRange-warning": {
+		backgroundImage: "none",
+		textDecoration: "underline wavy var(--color-yellow-50)",
+		textDecorationSkipInk: "none",
+		textUnderlineOffset: "3px"
+	},
+	".cm-lintPoint:after": { borderBottomColor: "var(--color-red-50)" },
+	".cm-tooltip": {
+		backgroundColor: "var(--color-surface)",
+		color: "var(--color-body)",
+		border: "1px solid var(--color-border)",
+		borderRadius: "6px",
+		boxShadow: "var(--shadow-md)",
+		overflow: "hidden"
+	},
+	".cm-tooltip-lint": { padding: "0" },
+	".cm-diagnostic": {
+		padding: "6px 10px",
+		fontFamily: "var(--font-sans)",
+		fontSize: "12px",
+		lineHeight: "16px",
+		borderLeftWidth: "3px"
+	},
+	".cm-diagnostic-error": { borderLeftColor: "var(--color-red-50)" },
+	".cm-diagnostic-warning": { borderLeftColor: "var(--color-yellow-50)" },
+	".cm-diagnosticSource": { display: "none" },
+	".cm-panel.cm-panel-lint ul [aria-selected]": {
+		backgroundColor: "var(--color-surface-sunken)",
+		color: "var(--color-heading)"
+	},
+	".cm-panel.cm-panel-lint ul:focus [aria-selected]": {
+		backgroundColor: "var(--color-primary-90)",
+		color: "var(--color-heading)"
+	},
+	".cm-insertedLine, &.cm-merge-b .cm-changedLine, .cm-inlineChangedLine": { backgroundColor: "var(--color-green-97)" },
+	".cm-deletedChunk, &.cm-merge-a .cm-changedLine": { backgroundColor: "var(--color-red-97)" },
+	".cm-deletedChunk": { paddingLeft: "8px" },
+	"&.cm-merge-b .cm-changedText, .cm-insertedLine .cm-changedText": {
+		backgroundColor: "var(--color-green-90)",
+		backgroundImage: "none"
+	},
+	".cm-deletedChunk .cm-deletedText, &.cm-merge-a .cm-changedText": {
+		backgroundColor: "var(--color-red-90)",
+		backgroundImage: "none"
+	},
+	".cm-deletedChunk del, .cm-deletedLine del": { textDecoration: "none" },
+	".cm-changedLineGutter, &.cm-merge-b .cm-changedLineGutter": { backgroundColor: "var(--color-green-50)" },
+	".cm-deletedLineGutter, &.cm-merge-a .cm-changedLineGutter": { backgroundColor: "var(--color-red-50)" },
+	".cm-collapsedLines": {
+		backgroundColor: "var(--color-surface-muted)",
+		backgroundImage: "none",
+		color: "var(--color-muted)",
+		fontFamily: "var(--font-sans)",
+		fontSize: "12px",
+		padding: "4px 12px",
+		borderBlock: "1px solid var(--color-border-light)"
+	},
+	".cm-collapsedLines:hover": {
+		backgroundColor: "var(--color-surface-sunken)",
+		color: "var(--color-heading)"
+	}
+}), o = t(e.define([
+	{
+		tag: [i.propertyName, i.definition(i.propertyName)],
+		color: "var(--color-blue-40)"
+	},
+	{
+		tag: [i.string, i.special(i.string)],
+		color: "var(--color-green-30)"
+	},
+	{
+		tag: [i.content, i.attributeValue],
+		color: "var(--color-heading)"
+	},
+	{
+		tag: [
+			i.number,
+			i.bool,
+			i.null,
+			i.atom
+		],
+		color: "var(--color-purple-50)"
+	},
+	{
+		tag: [
+			i.keyword,
+			i.controlKeyword,
+			i.operatorKeyword,
+			i.modifier
+		],
+		color: "var(--color-purple-40)"
+	},
+	{
+		tag: [i.variableName, i.special(i.variableName)],
+		color: "var(--color-yellow-30)"
+	},
+	{
+		tag: [
+			i.labelName,
+			i.typeName,
+			i.meta,
+			i.processingInstruction
+		],
+		color: "var(--color-red-40)"
+	},
+	{
+		tag: [
+			i.comment,
+			i.lineComment,
+			i.blockComment
+		],
+		color: "var(--color-slate-60)",
+		fontStyle: "italic"
+	},
+	{
+		tag: [
+			i.punctuation,
+			i.separator,
+			i.bracket,
+			i.squareBracket,
+			i.brace,
+			i.operator
+		],
+		color: "var(--color-slate-50)"
+	},
+	{
+		tag: i.invalid,
+		color: "var(--color-red-40)"
+	}
+])), s = n.phrases.of({
+	next: "Next",
+	previous: "Previous",
+	all: "All",
+	"match case": "Match case",
+	regexp: "Regex",
+	"by word": "Whole word",
+	replace: "Replace",
+	"replace all": "Replace all",
+	close: "Close",
+	"current match": "Current match",
+	"on line": "on line",
+	"Folded lines": "Folded lines",
+	"Unfolded lines": "Unfolded lines",
+	"Fold line": "Fold line",
+	"Unfold line": "Unfold line"
+});
+//#endregion
+export { o as editorHighlight, s as editorPhrases, a as editorTheme };

package/dist/lib/editor/validate.d.ts

@@ -0,0 +1,19 @@
+import type { Diagnostic } from "@codemirror/lint";
+import type { Text } from "@codemirror/state";
+export type EditorLanguage = "yaml" | "json" | "shell" | "text";
+export interface EditorProblem {
+    /** 1-based line of the problem. */
+    line: number;
+    /** 1-based column. */
+    column: number;
+    message: string;
+    severity: "error" | "warning";
+    /** `syntax` for text that doesn't parse, `schema` for valid text that breaks the JSON Schema. */
+    source: "syntax" | "schema";
+    /** Document offsets, for jumping to the problem. */
+    from: number;
+    to: number;
+}
+/** Syntax problems, then JSON Schema problems for every document that parses. */
+export declare function checkDocument(text: string, language: EditorLanguage, schema?: object): Promise<Diagnostic[]>;
+export declare function toProblems(diagnostics: readonly Diagnostic[], doc: Text): EditorProblem[];

package/dist/lib/editor/validate.js

@@ -0,0 +1,127 @@
+import { isMap as e, isScalar as t, isSeq as n, parseAllDocuments as r } from "yaml";
+//#region src/lib/editor/validate.ts
+var i, a = /* @__PURE__ */ new WeakMap();
+async function o(e) {
+	if (a.has(e)) return a.get(e);
+	i ??= import("ajv").then(({ default: e }) => new e({
+		allErrors: !0,
+		strict: !1
+	}));
+	let t = null;
+	try {
+		t = (await i).compile(e);
+	} catch (e) {
+		console.warn("AcCodeEditor: the schema doesn't compile, so only syntax is checked.", e);
+	}
+	return a.set(e, t), t;
+}
+function s(e) {
+	try {
+		return JSON.parse(e), null;
+	} catch (t) {
+		let n = t instanceof Error ? t.message : String(t), r = n.match(/at position (\d+)/), i = n.match(/line (\d+) column (\d+)/), a = e.length;
+		return r ? a = Number(r[1]) : i && (a = e.split("\n").slice(0, Number(i[1]) - 1).reduce((e, t) => e + t.length + 1, 0) + Number(i[2]) - 1), a = Math.min(a, e.length), {
+			from: a,
+			to: Math.min(a + 1, e.length),
+			severity: "error",
+			message: n.replace(/^JSON\.parse: /, "")
+		};
+	}
+}
+function c(e) {
+	let t = e?.range;
+	return t ? [t[0], t[1]] : void 0;
+}
+function l(r, i, a) {
+	let o = r.contents, s = c(o);
+	for (let r of i) if (e(o)) {
+		let e = o.items.find((e) => String(t(e.key) ? e.key.value : e.key) === r);
+		if (!e) break;
+		s = c(e.key) ?? s, o = e.value;
+	} else if (n(o)) {
+		let e = o.items[Number(r)];
+		if (e === void 0) break;
+		s = c(e) ?? s, o = e;
+	} else break;
+	return !a && t(o) ? c(o) ?? s : s;
+}
+var u = (e) => e.replace(/~1/g, "/").replace(/~0/g, "~");
+function d(e) {
+	let t = e.instancePath.split("/").slice(1).map(u), n = t.length ? `${t.join(".")}: ` : "", r = e.params;
+	switch (e.keyword) {
+		case "required": return {
+			path: t,
+			preferKey: !0,
+			message: `${n}missing required field "${r.missingProperty}"`
+		};
+		case "additionalProperties": return {
+			path: [...t, String(r.additionalProperty)],
+			preferKey: !0,
+			message: `${n}unknown field "${r.additionalProperty}"`
+		};
+		case "enum": return {
+			path: t,
+			preferKey: !1,
+			message: `${n}must be one of ${r.allowedValues.map((e) => JSON.stringify(e)).join(", ")}`
+		};
+		default: return {
+			path: t,
+			preferKey: !1,
+			message: `${n}${e.message ?? "is invalid"}`
+		};
+	}
+}
+async function f(e, t, n) {
+	if (t !== "yaml" && t !== "json" || !e.trim()) return [];
+	let i = [];
+	if (t === "json") {
+		let t = s(e);
+		if (t) return [t];
+	}
+	let a = r(e, { prettyErrors: !1 });
+	for (let e of a) {
+		let t = e.errors[0];
+		t && i.push({
+			from: t.pos[0],
+			to: Math.max(t.pos[1], t.pos[0] + 1),
+			severity: "error",
+			message: t.message.split("\n")[0]
+		});
+		for (let t of e.warnings) i.push({
+			from: t.pos[0],
+			to: Math.max(t.pos[1], t.pos[0] + 1),
+			severity: "warning",
+			message: t.message.split("\n")[0]
+		});
+	}
+	if (!n || i.some((e) => e.severity === "error")) return i;
+	let c = await o(n);
+	if (!c) return i;
+	for (let e of a) if (e.contents !== null && !c(e.toJS())) for (let t of c.errors ?? []) {
+		let { path: n, preferKey: r, message: a } = d(t), [o, s] = l(e, n, r) ?? [0, 0];
+		i.push({
+			from: o,
+			to: Math.max(s, o + 1),
+			severity: "error",
+			message: a,
+			source: "schema"
+		});
+	}
+	return i;
+}
+function p(e, t) {
+	return e.map((e) => {
+		let n = Math.min(e.from, t.length), r = t.lineAt(n);
+		return {
+			line: r.number,
+			column: n - r.from + 1,
+			message: e.message,
+			severity: e.severity === "warning" ? "warning" : "error",
+			source: e.source === "schema" ? "schema" : "syntax",
+			from: n,
+			to: Math.min(e.to, t.length)
+		};
+	});
+}
+//#endregion
+export { f as checkDocument, p as toProblems };

package/dist/lib/index.d.ts

@@ -0,0 +1,29 @@
+export * from "./components";
+export { useColorMode } from "./composables/useColorMode";
+export { useFontScale, FONT_SCALES } from "./composables/useFontScale";
+export type { FontScale } from "./composables/useFontScale";
+export type { ColorMode } from "./composables/useColorMode";
+export { useToast } from "./composables/useToast";
+export { useBrandColor, hexToHsl, hslToHex, contrastOnWhite, readableLightness, MIN_CONTRAST, HexToHSL, HSLToHex, getThemeHSL, setThemeHSL, } from "./composables/useBrandColor";
+export type { BrandHsl, LegacyHsl, SetBrandColorOptions } from "./composables/useBrandColor";
+export type { Toast, ToastAction, ToastOptions, ToastTone } from "./composables/useToast";
+export type { AppSwitcherApp } from "./components/AcAppSwitcher.vue";
+export type { BreadcrumbItem } from "./components/AcBreadcrumb.vue";
+export type { AcTableCell, AcTableCol, AcTableRow, CellType, ResourceCell, ResourceColumn, ResourceRow, ResourceTable, } from "./components/AcCellValue.vue";
+export type { SwitchCluster } from "./components/AcClusterSwitcher.vue";
+export type { DatePickerPreset } from "./components/AcDatePicker.vue";
+export type { FileRejection } from "./components/AcFileUpload.vue";
+export type { FormArrayColumn } from "./components/AcFormArray.vue";
+export type { InfoItem } from "./components/AcInfoTable.vue";
+export type { NotificationItem } from "./components/AcNotificationMenu.vue";
+export type { ResourceDetail, ResourceTag } from "./components/AcResourceCard.vue";
+export type { SearchFilterOption } from "./components/AcSearchBar.vue";
+export type { SegmentedOption } from "./components/AcSegmentedControl.vue";
+export type { SideTabItem } from "./components/AcSideTabs.vue";
+export type { SliderMark } from "./components/AcSlider.vue";
+export type { StatusBarItem, StatusBarStatus } from "./components/AcStatusBar.vue";
+export type { Step, SubStep } from "./components/AcSteps.vue";
+export type { Column } from "./components/AcTable.vue";
+export type { TabItem } from "./components/AcTabs.vue";
+export type { UsageBreakdownRow } from "./components/AcUsageCard.vue";
+export type { UserMenuItem } from "./components/AcUserMenu.vue";