@ac-design/design-system 1.0.3 → 2.0.0

package/dist/lib/composables/useApiPagination.js

@@ -0,0 +1,58 @@
+import { computed as e, getCurrentScope as t, ref as n, toValue as r, watch as i } from "vue";
+//#region src/lib/composables/useApiPagination.ts
+function a(e) {
+	return e == null ? void 0 : Number(e);
+}
+function o(o = {}) {
+	let s = typeof o == "number" ? { pageSize: o } : o, c = n(1), l = n(s.pageSize ?? 10), u = n({ 1: "" }), d = e(() => u.value[c.value] ?? ""), f = e(() => Object.keys(u.value).map(Number).sort((e, t) => e - t)), p = e(() => u.value[c.value + 1] !== void 0), m = e(() => c.value > 1), h = e(() => ({
+		total: a(r(s.total)),
+		hasNext: p.value,
+		hasPrev: m.value,
+		knownPages: f.value,
+		itemsOnPage: a(r(s.itemsOnPage))
+	}));
+	function g(e, t = c.value) {
+		if (e == null) return;
+		let n = { ...u.value };
+		if (e) n[t + 1] = e;
+		else for (let e of Object.keys(n).map(Number)) e > t && delete n[e];
+		u.value = n;
+	}
+	function _(e) {
+		return u.value[e] !== void 0 && (c.value = e, !0);
+	}
+	function v() {
+		_(c.value + 1);
+	}
+	function y() {
+		_(c.value - 1);
+	}
+	function b() {
+		u.value = { 1: "" }, c.value = 1;
+	}
+	i(c, (e, t) => {
+		u.value[e] === void 0 && (c.value = t);
+	}, { flush: "sync" }), i(l, b, { flush: "sync" });
+	let x = s.nextToken;
+	if (x !== void 0) {
+		let e = () => i(() => r(x), (e) => g(e), { immediate: !0 }), n = t();
+		n ? Promise.resolve().then(() => n.active && n.run(e)) : e();
+	}
+	return {
+		page: c,
+		pageSize: l,
+		pageToken: d,
+		tokens: u,
+		knownPages: f,
+		hasNext: p,
+		hasPrev: m,
+		next: v,
+		prev: y,
+		goTo: _,
+		reset: b,
+		setNextToken: g,
+		paginationProps: h
+	};
+}
+//#endregion
+export { o as useApiPagination };

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

@@ -0,0 +1,44 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+export interface UseBulkSelectionOptions<T, K = unknown> {
+    /** How to identify a row: a property name, the same as AcTable's `row-key`, or a function. Default `"id"`. Cloud-ui rows use `"uuid"`. */
+    key?: string | ((row: T) => K);
+    /** Decides per row whether it can be picked, e.g. not platform-managed and not already deleting. Pair it with AcTable's `row-disabled`. */
+    selectable?: (row: T) => boolean;
+    /** Drops picked keys whose rows leave `rows` or stop being selectable (deleted, filtered out, gone after a refetch). Default `true`. Turn it off when `rows` is one page of a server list and the selection spans pages; call `prune` yourself then. */
+    autoPrune?: boolean;
+}
+export interface BulkSelection<T, K = unknown> {
+    /** Keys of the picked rows. Bind to AcTable with `v-model:selected`. */
+    selected: Ref<K[]>;
+    /** The picked rows that are in `rows`, for the confirm dialog and the batch request. */
+    selectedRows: ComputedRef<T[]>;
+    /** The rows that pass `selectable`. */
+    selectableRows: ComputedRef<T[]>;
+    /** Number of picked rows, for AcBulkActionBar's `count`. */
+    count: ComputedRef<number>;
+    hasSelection: ComputedRef<boolean>;
+    /** Every selectable row is picked. Drives a select-all checkbox. */
+    allSelected: ComputedRef<boolean>;
+    /** Some, but not all, selectable rows are picked. Drives the checkbox's `indeterminate`. */
+    someSelected: ComputedRef<boolean>;
+    isSelected: (key: K) => boolean;
+    /** Picks or unpicks one row by key. Keys of rows that aren't selectable are ignored. */
+    toggle: (key: K) => void;
+    /** Picks every selectable row, or clears when they're all picked already. */
+    toggleAll: () => void;
+    selectAll: () => void;
+    /** Empties the selection, e.g. on AcBulkActionBar's `clear` or after the batch request succeeds. */
+    clear: () => void;
+    /** Drops picked keys that aren't among `rows` (default: the current selectable rows). */
+    prune: (rows?: T[]) => void;
+}
+/**
+ * Tracks which rows are picked for a bulk action, for AcTable's `v-model:selected`, AcCheckBox and AcBulkActionBar.
+ *
+ * Pass the whole list (every page, when paging in the browser) so picks survive a page change.
+ * Keys whose rows disappear are dropped automatically, so a stale key never reaches a batch request.
+ *
+ * @param rows The list the selection is made from, as an array, ref or getter.
+ * @param options `key`, `selectable` and `autoPrune`.
+ */
+export declare function useBulkSelection<T extends object, K = unknown>(rows: MaybeRefOrGetter<T[]>, options?: UseBulkSelectionOptions<T, K>): BulkSelection<T, K>;

package/dist/lib/composables/useBulkSelection.js

@@ -0,0 +1,41 @@
+import { computed as e, ref as t, toValue as n, watch as r } from "vue";
+//#region src/lib/composables/useBulkSelection.ts
+function i(i, a = {}) {
+	let { key: o = "id", selectable: s = () => !0, autoPrune: c = !0 } = a, l = typeof o == "function" ? o : (e) => e[o], u = t([]), d = e(() => n(i).filter(s)), f = e(() => d.value.map(l)), p = e(() => new Set(u.value)), m = e(() => d.value.filter((e) => p.value.has(l(e)))), h = e(() => u.value.length), g = e(() => u.value.length > 0), _ = e(() => f.value.length > 0 && f.value.every((e) => p.value.has(e))), v = e(() => g.value && !_.value);
+	function y(e) {
+		return p.value.has(e);
+	}
+	function b(e) {
+		y(e) ? u.value = u.value.filter((t) => t !== e) : f.value.includes(e) && (u.value = [...u.value, e]);
+	}
+	function x() {
+		u.value = [...f.value];
+	}
+	function S() {
+		u.value = [];
+	}
+	function C() {
+		_.value ? S() : x();
+	}
+	function w(e) {
+		let t = new Set(e ? e.map(l) : f.value), n = u.value.filter((e) => t.has(e));
+		n.length !== u.value.length && (u.value = n);
+	}
+	return c && r(f, () => w()), {
+		selected: u,
+		selectedRows: m,
+		selectableRows: d,
+		count: h,
+		hasSelection: g,
+		allSelected: _,
+		someSelected: v,
+		isSelected: y,
+		toggle: b,
+		toggleAll: C,
+		selectAll: x,
+		clear: S,
+		prune: w
+	};
+}
+//#endregion
+export { i as useBulkSelection };

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

@@ -0,0 +1,65 @@
+import type { MaybeRefOrGetter } from "vue";
+/** Field names of a form, with dots for nested objects: `name`, `spec.replicas`. */
+export type FieldPath<T> = T extends object ? {
+    [K in keyof T & string]: NonNullable<T[K]> extends readonly unknown[] | Date | ((...args: never[]) => unknown) ? K : NonNullable<T[K]> extends object ? K | `${K}.${FieldPath<NonNullable<T[K]>>}` : K;
+}[keyof T & string] : never;
+/** A rule that needs no setting. `k8sName` is a Kubernetes name (RFC 1123 label); `alphanumericDash` only checks the characters. */
+export type SimpleRuleName = "required" | "email" | "url" | "k8sName" | "alphanumericDash" | "integer" | "nonEmptyList";
+/** Checks a value and returns a message when it's wrong. Return nothing (or `""`) when it's fine. */
+export type RuleFn<T = Record<string, unknown>> = (value: unknown, values: T) => string | false | null | undefined | void;
+/**
+ * One check on a field. Write it as:
+ * - a name: `"required"`, `"email"`, `"url"`, `"k8sName"`, `"alphanumericDash"`, `"integer"`, `"nonEmptyList"`;
+ * - cloud-ui's shorthand: `"minLength|3"`, `"maxLength|63"`, `"min|1"`, `"max|9"`, `"pattern|^v\\d+$|Start with v"`;
+ * - an object, to set the message: `{ required: true, message: "Choose a database." }`, `{ minLength: 8 }`, `{ pattern: /^v\d+$/, message: "…" }`;
+ * - a function `(value, values) => message | undefined`, e.g. to compare two fields.
+ */
+export type Rule<T = Record<string, unknown>> = SimpleRuleName | `minLength|${number}` | `maxLength|${number}` | `min|${number}` | `max|${number}` | `pattern|${string}` | ({
+    [K in SimpleRuleName]: {
+        [P in K]: true;
+    } & {
+        message?: string;
+    };
+}[SimpleRuleName]) | {
+    minLength: number;
+    message?: string;
+} | {
+    maxLength: number;
+    message?: string;
+} | {
+    min: number;
+    message?: string;
+} | {
+    max: number;
+    message?: string;
+} | {
+    pattern: RegExp | string;
+    message?: string;
+} | RuleFn<T>;
+/** Rules per field, checked in order; the first failing rule's message is shown. */
+export type FormRules<T> = {
+    [K in FieldPath<T>]?: Rule<T>[];
+};
+export interface FormValidationOptions {
+    /**
+     * Re-checks a field as it changes once it has been checked: a fixed error clears straight away,
+     * and a field that was fine waits for the next `validateField` (on blur) before showing a new one. Default `true`.
+     */
+    live?: boolean;
+}
+/**
+ * Validates a form object field by field and keeps one message per field in `errors`,
+ * ready for `:error-msg="errors.name"` on AcInput, AcSelect, AcTextarea and the other fields.
+ *
+ * Empty values pass every rule except `required` and `nonEmptyList`, so optional fields can still have a format.
+ */
+export declare function useFormValidation<T extends object>(values: MaybeRefOrGetter<T>, rules: MaybeRefOrGetter<FormRules<T>>, options?: FormValidationOptions): {
+    errors: { [K in FieldPath<T>]?: string | undefined; };
+    touched: { [K_1 in FieldPath<T>]?: boolean | undefined; };
+    errorCount: import("vue").ComputedRef<number>;
+    validate: () => boolean;
+    validateField: (field: FieldPath<T>) => string;
+    reset: (...only: FieldPath<T>[]) => void;
+    /** cloud-ui's name for `validate`. */
+    validateForm: () => boolean;
+};

package/dist/lib/composables/useFormValidation.js

@@ -0,0 +1,148 @@
+import { computed as e, reactive as t, toValue as n, watch as r } from "vue";
+//#region src/lib/composables/useFormValidation.ts
+var i = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, a = /^[a-z0-9-]+$/, o = {
+	required: (e) => Array.isArray(e) ? "Add at least one item." : e === !1 ? "Check this box to continue." : e == null ? "Choose an option." : "Enter a value.",
+	email: () => "Enter an email address like name@example.com.",
+	url: () => "Enter a full URL that starts with https:// or http://.",
+	alphanumericDash: () => "Use lowercase letters, numbers and hyphens.",
+	integer: () => "Enter a whole number.",
+	nonEmptyList: () => "Add at least one item.",
+	number: () => "Enter a number.",
+	minLength: (e) => `Enter at least ${e} characters.`,
+	maxLength: (e) => `Use ${e} characters or fewer.`,
+	min: (e) => `Enter ${e} or more.`,
+	max: (e) => `Enter ${e} or less.`,
+	pattern: () => "Check the format of this value."
+};
+function s(e) {
+	return e == null || e === !1 ? !0 : typeof e == "string" ? e.trim() === "" : typeof e == "number" ? Number.isNaN(e) : Array.isArray(e) ? e.length === 0 : !1;
+}
+function c(e) {
+	return typeof e == "number" ? e : typeof e == "string" && e.trim() !== "" ? Number(e) : NaN;
+}
+function l(e) {
+	try {
+		let t = new URL(e);
+		return (t.protocol === "https:" || t.protocol === "http:") && !!t.hostname;
+	} catch {
+		return !1;
+	}
+}
+function u(e) {
+	return a.test(e) ? !/^[a-z0-9]/.test(e) || !/[a-z0-9]$/.test(e) ? "Start and end with a lowercase letter or number." : e.length > 63 ? o.maxLength(63) : "" : o.alphanumericDash();
+}
+function d(e) {
+	return typeof e == "string" ? new RegExp(e) : e;
+}
+function f(e) {
+	if (typeof e == "function") return {
+		required: !1,
+		check: (t, n) => e(t, n) || ""
+	};
+	if (typeof e == "string") {
+		let [t, ...n] = e.split("|");
+		return f(t === "pattern" ? {
+			pattern: n[0] ?? "",
+			message: n.slice(1).join("|") || void 0
+		} : t === "minLength" || t === "maxLength" || t === "min" || t === "max" ? { [t]: Number(n[0]) } : { [t]: !0 });
+	}
+	let t = e.message, n = (e) => t || e;
+	if ("required" in e) return {
+		required: !0,
+		check: (e) => s(e) ? n(o.required(e)) : ""
+	};
+	if ("nonEmptyList" in e) return {
+		required: !0,
+		check: (e) => Array.isArray(e) && !e.length ? n(o.nonEmptyList()) : ""
+	};
+	if ("email" in e) return {
+		required: !1,
+		check: (e) => i.test(String(e).trim()) ? "" : n(o.email())
+	};
+	if ("url" in e) return {
+		required: !1,
+		check: (e) => l(String(e).trim()) ? "" : n(o.url())
+	};
+	if ("alphanumericDash" in e) return {
+		required: !1,
+		check: (e) => a.test(String(e)) ? "" : n(o.alphanumericDash())
+	};
+	if ("k8sName" in e) return {
+		required: !1,
+		check: (e) => u(String(e)) ? n(u(String(e))) : ""
+	};
+	if ("integer" in e) return {
+		required: !1,
+		check: (e) => Number.isInteger(c(e)) ? "" : n(o.integer())
+	};
+	if ("minLength" in e) return {
+		required: !1,
+		check: (t) => String(t).length < e.minLength ? n(o.minLength(e.minLength)) : ""
+	};
+	if ("maxLength" in e) return {
+		required: !1,
+		check: (t) => String(t).length > e.maxLength ? n(o.maxLength(e.maxLength)) : ""
+	};
+	if ("min" in e || "max" in e) return {
+		required: !1,
+		check: (t) => {
+			let r = c(t);
+			return Number.isNaN(r) ? n(o.number()) : "min" in e && r < e.min ? n(o.min(e.min)) : "max" in e && r > e.max ? n(o.max(e.max)) : "";
+		}
+	};
+	if ("pattern" in e) {
+		let t = d(e.pattern);
+		return {
+			required: !1,
+			check: (e) => t.test(String(e)) ? "" : n(o.pattern())
+		};
+	}
+	return {
+		required: !1,
+		check: () => ""
+	};
+}
+function p(e, t) {
+	return t.split(".").reduce((e, t) => typeof e == "object" && e ? e[t] : void 0, e);
+}
+function m(i, a, o = {}) {
+	let c = t({}), l = t({}), u = e(() => Object.keys(n(a))), d = e(() => Object.values(c).filter(Boolean).length);
+	function m(e) {
+		let t = n(a)[e] ?? [], r = n(i), o = p(r, e), c = s(o);
+		for (let e of t) {
+			let { required: t, check: n } = f(e);
+			if (c && !t && typeof e != "function") continue;
+			let i = n(o, r);
+			if (i) return i;
+		}
+		return "";
+	}
+	function h(e) {
+		let t = m(e);
+		return c[e] = t, l[e] = !0, t;
+	}
+	function g() {
+		return u.value.map(h).every((e) => !e);
+	}
+	function _(...e) {
+		let t = e.length ? e : Object.keys(c);
+		for (let e of t) delete c[e], delete l[e];
+	}
+	return o.live !== !1 && r(() => u.value.map((e) => l[e] ? p(n(i), e) : void 0), () => {
+		for (let e of u.value) {
+			if (!l[e]) continue;
+			let t = m(e);
+			(!t || c[e]) && (c[e] = t);
+		}
+	}, { deep: !0 }), {
+		errors: c,
+		touched: l,
+		errorCount: d,
+		validate: g,
+		validateField: h,
+		reset: _,
+		validateForm: g
+	};
+}
+//#endregion
+export { m as useFormValidation };

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

@@ -0,0 +1,49 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref, WatchSource } from "vue";
+export interface UseTablePaginationOptions {
+    /** Page to start on, from 1. Default 1. */
+    page?: number;
+    /** Goes back to page 1 when this changes, e.g. a search query, a filter or the table's `sortBy`. */
+    resetOn?: WatchSource | WatchSource[];
+}
+export interface TablePagination<T> {
+    /** The current page, from 1. Bind to AcPagination with `v-model:page`. */
+    page: Ref<number>;
+    /** Rows per page. Bind to AcPagination with `v-model:page-size`. */
+    pageSize: Ref<number>;
+    /** The rows on the current page; pass them to AcTable's `rows`. */
+    pageRows: ComputedRef<T[]>;
+    /** Number of rows across all pages. */
+    total: ComputedRef<number>;
+    /** Number of pages, at least 1. */
+    pageCount: ComputedRef<number>;
+    /** The current page's slice of the list, 0-based and end-exclusive. */
+    range: ComputedRef<{
+        start: number;
+        end: number;
+    }>;
+    hasNext: ComputedRef<boolean>;
+    hasPrev: ComputedRef<boolean>;
+    next: () => void;
+    prev: () => void;
+    /** Moves to `page`, clamped to the first and last page. */
+    goTo: (page: number) => void;
+    /** Goes back to page 1. */
+    reset: () => void;
+    /** AcPagination props that aren't models: `v-bind="paginationProps"`. */
+    paginationProps: ComputedRef<{
+        total: number;
+    }>;
+}
+/**
+ * Pages a list in the browser, for AcTable plus AcPagination.
+ *
+ * Pass the whole list (already filtered and sorted) and bind the result:
+ * `<AcTable :rows="pageRows" />` and
+ * `<AcPagination v-model:page="page" v-model:page-size="pageSize" v-bind="paginationProps" />`.
+ * When the list shrinks below the current page (rows deleted, a refetch), the page moves back to the last one.
+ * Pass `resetOn` to go back to page 1 when a search or filter changes.
+ *
+ * @param rows The full list, as an array, ref or getter.
+ * @param pageSize Rows per page. Pass a writable ref to share it; a number or getter starts an internal ref. Default 10.
+ */
+export declare function useTablePagination<T>(rows: MaybeRefOrGetter<T[]>, pageSize?: MaybeRefOrGetter<number>, options?: UseTablePaginationOptions): TablePagination<T>;

package/dist/lib/composables/useTablePagination.js

@@ -0,0 +1,41 @@
+import { computed as e, isReadonly as t, isRef as n, ref as r, toValue as i, watch as a } from "vue";
+//#region src/lib/composables/useTablePagination.ts
+function o(o, s = 10, c = {}) {
+	let l = r(c.page ?? 1), u = n(s) && !t(s), d = u ? s : r(i(s));
+	!u && typeof s != "number" && a(() => i(s), (e) => d.value = e);
+	let f = e(() => i(o).length), p = e(() => Math.max(1, d.value)), m = e(() => Math.max(1, Math.ceil(f.value / p.value))), h = e(() => Math.min(Math.max(1, l.value), m.value)), g = e(() => ({
+		start: Math.min((h.value - 1) * p.value, f.value),
+		end: Math.min(h.value * p.value, f.value)
+	})), _ = e(() => i(o).slice(g.value.start, g.value.end)), v = e(() => h.value < m.value), y = e(() => h.value > 1), b = e(() => ({ total: f.value }));
+	function x(e) {
+		l.value = Math.min(Math.max(1, Math.trunc(e)), m.value);
+	}
+	function S() {
+		x(h.value + 1);
+	}
+	function C() {
+		x(h.value - 1);
+	}
+	function w() {
+		l.value = 1;
+	}
+	return a(m, (e) => {
+		l.value > e && (l.value = e);
+	}), c.resetOn && a(c.resetOn, w), {
+		page: l,
+		pageSize: d,
+		pageRows: _,
+		total: f,
+		pageCount: m,
+		range: g,
+		hasNext: v,
+		hasPrev: y,
+		next: S,
+		prev: C,
+		goTo: x,
+		reset: w,
+		paginationProps: b
+	};
+}
+//#endregion
+export { o as useTablePagination };