@ac-design/design-system 2.3.0 → 2.4.1

package/dist/lib/components/AcSidePanel.vue.d.ts

@@ -42,10 +42,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     title: string;
     description: string;
     size: "small" | "normal" | "large" | "full";
+    side: "right" | "left";
     closable: boolean;
     closeOnOutsideClick: boolean;
     hideFooter: boolean;
-    side: "right" | "left";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/lib/components/AcSidePanel.vue_vue_type_script_setup_true_lang.js

@@ -61,8 +61,8 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				let e = window.innerWidth - document.documentElement.clientWidth;
 				t.style.overflow = "hidden";
 				let n = getComputedStyle(document.documentElement).scrollbarGutter.includes("stable");
-				e > 0 && !n && (t.style.paddingRight = `${e}px`);
-			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
+				e > 0 && !n && (t.style.paddingRight = `${e}px`), n && t.getBoundingClientRect().height >= window.innerHeight && (document.documentElement.style.backgroundColor = `color-mix(in srgb, ${getComputedStyle(t).backgroundColor} 50%, black)`);
+			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "", document.documentElement.style.backgroundColor = "");
 		}
 		return y(F, async (e, t) => {
 			if (e) {

package/dist/lib/components/AcSlider.vue.d.ts

@@ -58,11 +58,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     disabled: boolean;
     max: number;
     min: number;
+    tooltip: "auto" | "always" | "never";
     hint: string;
     step: number;
-    tooltip: "auto" | "always" | "never";
-    range: boolean;
     errorMsg: string;
+    range: boolean;
     unit: string;
     marks: (number | SliderMark)[];
     formatValue: (value: number) => string;

package/dist/lib/components/AcSwitch.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,17 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, normalizeClass as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, unref as f, useAttrs as p, useId as m, useModel as h } from "vue";
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, normalizeClass as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, useAttrs as f, useId as p, useModel as m } from "vue";
 //#region src/lib/components/AcSwitch.vue?vue&type=script&setup=true&lang.ts
-var g = { class: "flex items-center gap-2" }, _ = ["for"], v = [
+var h = { class: "flex items-center gap-2" }, g = ["for"], _ = [
 	"id",
 	"name",
 	"aria-checked",
 	"aria-busy",
 	"aria-disabled",
 	"disabled"
-], y = {
+], v = {
 	key: 0,
 	class: "mt-1 text-base text-danger-strong",
 	role: "alert"
-}, b = /*@__PURE__*/ i({
+}, y = /*@__PURE__*/ i({
 	inheritAttrs: !1,
 	__name: "AcSwitch",
 	props: /*@__PURE__*/ a({
@@ -35,45 +35,45 @@ var g = { class: "flex items-center gap-2" }, _ = ["for"], v = [
 	}),
 	emits: ["update:modelValue"],
 	setup(i, { expose: a }) {
-		let b = i, x = h(i, "modelValue"), S = m(), C = p(), w = e(() => ({
-			class: C.class,
-			style: C.style
-		})), T = e(() => {
-			let { class: e, style: t, ...n } = C;
+		let y = i, b = m(i, "modelValue"), x = p(), S = f(), C = e(() => ({
+			class: S.class,
+			style: S.style
+		})), w = e(() => {
+			let { class: e, style: t, ...n } = S;
 			return n;
-		}), E = l(null);
+		}), T = l(null), E = e(() => S.id ?? x);
 		function D() {
-			b.disabled || b.loading || (x.value = !x.value);
+			y.disabled || y.loading || (b.value = !b.value);
 		}
-		return a({ focus: () => E.value?.focus() }), (e, a) => (c(), n("div", o(w.value, {
+		return a({ focus: () => T.value?.focus() }), (e, a) => (c(), n("div", o(C.value, {
 			"data-ac-ds": "",
 			"data-testid": "ac-switch"
-		}), [r("div", g, [
+		}), [r("div", h, [
 			u(e.$slots, "left"),
 			i.label ? (c(), n("label", {
 				key: 0,
-				for: f(S),
+				for: E.value,
 				class: s(["cursor-pointer text-base font-medium text-heading", i.disabled && "cursor-not-allowed opacity-50"])
-			}, d(i.label), 11, _)) : t("", !0),
+			}, d(i.label), 11, g)) : t("", !0),
 			u(e.$slots, "middle"),
 			r("button", o({
-				id: f(S),
+				id: E.value,
 				ref_key: "button",
-				ref: E
-			}, T.value, {
+				ref: T
+			}, w.value, {
 				type: "button",
 				role: "switch",
 				name: i.name,
-				"aria-checked": x.value,
+				"aria-checked": b.value,
 				"aria-busy": i.loading || void 0,
 				"aria-disabled": i.loading && !i.disabled || void 0,
 				disabled: i.disabled,
-				class: ["relative h-6 w-11 shrink-0 rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none motion-reduce:transition-none", [x.value ? "bg-primary" : "bg-slate-80", i.disabled ? "cursor-not-allowed opacity-50" : i.loading ? "cursor-wait animate-pulse motion-reduce:animate-none" : "cursor-pointer"]],
+				class: ["relative h-6 w-11 shrink-0 rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none motion-reduce:transition-none", [b.value ? "bg-primary" : "bg-slate-80", i.disabled ? "cursor-not-allowed opacity-50" : i.loading ? "cursor-wait animate-pulse motion-reduce:animate-none" : "cursor-pointer"]],
 				onClick: D
-			}), [r("span", { class: s(["pointer-events-none absolute top-0.5 left-0.5 size-5 rounded-full border bg-white transition-transform duration-200 ease-out motion-reduce:transition-none", x.value ? "translate-x-5 border-white" : "translate-x-0 border-slate-70"]) }, null, 2)], 16, v),
+			}), [r("span", { class: s(["pointer-events-none absolute top-0.5 left-0.5 size-5 rounded-full border bg-white transition-transform duration-200 ease-out motion-reduce:transition-none", b.value ? "translate-x-5 border-white" : "translate-x-0 border-slate-70"]) }, null, 2)], 16, _),
 			u(e.$slots, "right")
-		]), i.errorMsg ? (c(), n("p", y, d(i.errorMsg), 1)) : t("", !0)], 16));
+		]), i.errorMsg ? (c(), n("p", v, d(i.errorMsg), 1)) : t("", !0)], 16));
 	}
 });
 //#endregion
-export { b as default };
+export { y as default };

package/dist/lib/components/AcTable.vue.d.ts

@@ -15,6 +15,17 @@ export interface Column {
     wrap?: boolean;
     /** Pads the header and cells 8px a side instead of 24px, e.g. for a column of icon buttons. */
     compact?: boolean;
+    /** How the table compares values when it sorts this column: `string` (case-insensitive text, as cloud-ui's BasicTable), `number` or `date`. `null` and missing values go last either way. Leave it out for natural text order. */
+    sortType?: "string" | "number" | "date";
+    /** Row field holding the cell's link, e.g. `"link"`: the value shows as a primary link (a `RouterLink` when the app has vue-router). */
+    link?: string;
+    /** With `link`, the target used when the row's link field is empty, e.g. `"#"` to keep such names looking and acting as links. Without it they show as plain styled text. */
+    linkFallback?: string;
+}
+/** One client-side filter: rows stay when the `key` value contains `searchText`, ignoring case. */
+export interface TableSearch {
+    key: string;
+    searchText: string;
 }
 export interface Props<R> {
     /** Column definitions: `{ key, label, sortable?, align?, width?, type?, descriptor?, class?, wrap?, compact? }`. `type` or `descriptor` shows values with AcCellValue. */
@@ -53,13 +64,27 @@ export interface Props<R> {
     expandedBare?: boolean;
     /** Turns a server cell's link template into a URL, e.g. to fill `${username}` and `${clustername}` from the current route. */
     resolveLink?: (link: string) => string;
+    /** Filters rows in the table: a row stays when every entry's `searchText` appears in its `key` value, ignoring case. Rows whose value is `null` or missing drop out, even for an empty `searchText`. */
+    search?: TableSearch[];
+    /** Splits rows into pages of this size, with a pager under the table once there's more than one page. Bind the page with `v-model:page`. Sorting and `search` work across every page. */
+    pageSize?: number;
+    /** Pads body cells 12px above and below and lets their text wrap, so rows holding buttons or badges stand 52px tall, as cloud-ui's BasicTable. */
+    relaxed?: boolean;
+    /** Cuts plain cell text longer than this many characters to that length plus "...", and shows the full value in a tooltip. */
+    truncate?: number;
+    /** Text for a plain cell whose value is `null` or `""`, e.g. `"-"`. A missing (`undefined`) value stays blank. */
+    placeholder?: string;
+    /** Which values get the `placeholder`: `empty` (`null` or `""`) or `falsy` (also `0` and `false`, as cloud-ui's BasicTable). A missing (`undefined`) value stays blank either way, and `link` columns never show it. */
+    placeholderFor?: "empty" | "falsy";
 }
-declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <Row extends Record<string, unknown>, Key = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<Row> & {
         /** `rowKey` values of the chosen rows. Bind with `v-model:selected`. Rows that leave `rows` (another page, a search) stay chosen. */
-        selected?: unknown[];
+        selected?: Key[];
         /** `rowKey` values of the rows that are open. Bind with `v-model:expanded`. */
         expanded?: unknown[];
+        /** The current page with `page-size`, starting at 1. Bind with `v-model:page`. A search or sort goes back to page 1. */
+        page?: number;
         /** The sorted column and direction, or `null`. Bind with `v-model:sortBy` to set it from outside, e.g. to keep it across pages or in the URL. */
         sortBy?: {
             key: string;
@@ -67,8 +92,9 @@ declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: N
         } | null;
     }) & {
         onSort?: ((key: string, mode: "desc" | "asc") => any) | undefined;
+        "onUpdate:page"?: ((value: number) => any) | undefined;
         "onRow-click"?: ((row: Row) => any) | undefined;
-        "onUpdate:selected"?: ((value: unknown[]) => any) | undefined;
+        "onUpdate:selected"?: ((value: Key[]) => any) | undefined;
         "onUpdate:expanded"?: ((value: unknown[]) => any) | undefined;
         "onUpdate:sortBy"?: ((value: {
             key: string;
@@ -87,14 +113,21 @@ declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: N
         [key: `header-${string}`]: (props: {
             column: Column;
         }) => unknown;
+        [key: `before-${string}`]: (props: {
+            row: Row;
+        }) => unknown;
         /** Detail area under an open row, for tables with `expandable`: `#expanded="{ row }"`. */
         expanded?: (props: {
             row: Row;
         }) => unknown;
         /** Content shown when `rows` is empty. */
         empty?: () => unknown;
+        /** Row actions, e.g. edit and delete buttons: `#actions="{ row }"`. Adds a narrow last column, 80px wide (120px from 1024px). */
+        actions?: (props: {
+            row: Row;
+        }) => unknown;
     };
-    emit: (((evt: "sort", key: string, mode: "desc" | "asc") => void) & ((evt: "row-click", row: Row) => void)) & (((event: "update:selected", value: unknown[]) => void) & ((event: "update:expanded", value: unknown[]) => void) & ((event: "update:sortBy", value: {
+    emit: (((evt: "sort", key: string, mode: "desc" | "asc") => void) & ((evt: "row-click", row: Row) => void)) & (((event: "update:page", value: number) => void) & ((event: "update:selected", value: Key[]) => void) & ((event: "update:expanded", value: unknown[]) => void) & ((event: "update:sortBy", value: {
         key: string;
         mode: "asc" | "desc";
     } | null) => void));