@aplus-frontend/ui 0.6.0-beta.14 → 0.6.0-beta.16

package/es/index.mjs

@@ -137,7 +137,7 @@ import { useThrottleRef as Ep } from "./src/hooks/useThrottleRef.mjs";
 import { useFullScreen as Rp } from "./src/hooks/useFullScreen.mjs";
 import { useResize as Mp } from "./src/hooks/useResize.mjs";
 const a = console.log;
-a(`APlus-UI version ${p}.`);
+a(`APlus-UI version ${p}`);
 const l = {
   install: (r) => {
     for (const t in o) {

package/es/src/ap-descriptions/ap-descriptions.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as B, createElementBlock as i, openBlock as r, normalizeStyle as E, normalizeClass as d, unref as l, createVNode as _, mergeProps as w, withCtx as b, Fragment as p, renderList as M, createBlock as c, createCommentVNode as j, h as u, renderSlot as z, resolveDynamicComponent as A } from "vue";
+import { defineComponent as B, createElementBlock as i, openBlock as r, normalizeStyle as E, normalizeClass as d, unref as l, createVNode as _, mergeProps as w, withCtx as b, Fragment as p, renderList as A, createBlock as c, createCommentVNode as M, h as u, renderSlot as j, resolveDynamicComponent as z } from "vue";
 import { Descriptions as F, DescriptionsItem as m } from "@aplus-frontend/antdv";
 import { mixinsAttachmentExtraProps as G, transformValue as L, isEmptyWithType as R } from "./helper.mjs";
 import { get as S } from "lodash-unified";
@@ -8,6 +8,7 @@ import { useGlobalConfig as f } from "../config-provider/hooks/use-global-config
 import { useNamespace as $ } from "../config-provider/hooks/use-namespace.mjs";
 import I from "./help-message/index.vue2.mjs";
 const O = { key: 0 }, Z = /* @__PURE__ */ B({
+  name: "ApDescriptions",
   __name: "ap-descriptions",
   props: {
     descriptionsProps: {},
@@ -17,7 +18,7 @@ const O = { key: 0 }, Z = /* @__PURE__ */ B({
     className: {}
   },
   setup(g) {
-    const n = g, v = f("uiMode", "admin"), C = f("apDescriptions"), k = f("downloadCenterTriggerConfig"), { m: P, b: N, be: D } = $("ap-descriptions"), T = (e = {}) => {
+    const n = g, v = f("uiMode", "admin"), C = f("apDescriptions"), k = f("downloadCenterTriggerConfig"), { m: P, b: D, be: N } = $("ap-descriptions"), T = (e = {}) => {
       var s;
       let o = "";
       return ((s = n.descriptionsProps) == null ? void 0 : s.layout) === "vertical" && (o = "start"), {
@@ -53,14 +54,14 @@ const O = { key: 0 }, Z = /* @__PURE__ */ B({
     return (e, o) => {
       var s;
       return r(), i("div", {
-        class: d([e.className, l(N)(), l(P)(l(v))]),
+        class: d([e.className, l(D)(), l(P)(l(v))]),
         style: E(e.style)
       }, [
         _(l(F), w(e.descriptionsProps, {
           "label-style": T({ ...((s = e.descriptionsProps) == null ? void 0 : s.labelStyle) || {} })
         }), {
           default: b(() => [
-            (r(!0), i(p, null, M(e.schemas, (t, a) => (r(), i(p, {
+            (r(!0), i(p, null, A(e.schemas, (t, a) => (r(), i(p, {
               key: t.field || "empty" + a
             }, [
               t.valueType === "empty" ? (r(), c(l(m), {
@@ -70,7 +71,7 @@ const O = { key: 0 }, Z = /* @__PURE__ */ B({
                 span: t.span
               }, null, 8, ["content-style", "label-style", "span"])) : x(t) ? (r(), c(l(m), {
                 key: 1,
-                class: d(V(t) ? l(D)("item", "ellipsis") : ""),
+                class: d(V(t) ? l(N)("item", "ellipsis") : ""),
                 label: t.label ? u(p, [
                   u(I, {
                     helpMessage: t.helpMessage,
@@ -83,12 +84,12 @@ const O = { key: 0 }, Z = /* @__PURE__ */ B({
               }, {
                 default: b(() => [
                   l(R)(l(S)(e.dataSource, t.field), t) ? (r(), i("span", O, "--")) : (r(), i(p, { key: 1 }, [
-                    t.contentSlotName ? z(e.$slots, t.contentSlotName, {
+                    t.contentSlotName ? j(e.$slots, t.contentSlotName, {
                       key: 0,
                       index: a,
                       item: y(t),
                       record: e.dataSource
-                    }) : (r(), c(A(
+                    }) : (r(), c(z(
                       u(p, [
                         t.prefix,
                         y(t),
@@ -98,7 +99,7 @@ const O = { key: 0 }, Z = /* @__PURE__ */ B({
                   ], 64))
                 ]),
                 _: 2
-              }, 1032, ["class", "label", "span", "content-style", "label-style"])) : j("", !0)
+              }, 1032, ["class", "label", "span", "content-style", "label-style"])) : M("", !0)
             ], 64))), 128))
           ]),
           _: 3

package/es/src/ap-form/interface.d.ts

@@ -162,6 +162,10 @@ export type ApFormSearchFormProps = ApFormProps & {
      * 是否可排序
      */
     sortable?: boolean;
+    /**
+     * 尺寸监听目标元素（用于响应式）
+     */
+    resizeTarget?: HTMLElement | null;
 };
 export type ApFormSearchFormPopoverFilterProps = {
     config: Array<{

package/es/src/ap-form/search-form/hooks/use-count-per-row.mjs

@@ -1,17 +1,37 @@
-import { computed as c } from "vue";
-import { useBreakpoints as u } from "@vueuse/core";
-const t = [1, 2, 3, 4, 6, 8, 12, 24], P = (o) => {
-  const e = u({ sm: 0, md: 1280, lg: 1728 }).active();
-  return c(() => {
-    if (e.value === "lg") {
-      const n = t.findIndex(
-        (r) => r === o.countPerRow
-      );
-      return t[n + 1] || o.countPerRow;
-    }
-    return o.countPerRow;
+import { ref as a, watchEffect as w, computed as s, unref as i } from "vue";
+import { useResizeObserver as P } from "@vueuse/core";
+import { isUndefined as R } from "lodash-unified";
+const c = [1, 2, 3, 4, 6, 8, 12, 24], g = { xs: 0, sm: 768, md: 1280, lg: 1728 }, z = Object.entries(g).sort(
+  (e, n) => n[1] - e[1]
+), T = (e) => {
+  const n = a(0);
+  w(
+    (t) => {
+      if (!(R(e.resizeTarget) ? document.documentElement : e.resizeTarget))
+        return;
+      const { stop: o } = P(e.resizeTarget, (f) => {
+        const m = f[0], { width: d } = m.contentRect;
+        n.value = d;
+      });
+      t(() => {
+        o();
+      });
+    },
+    { flush: "post" }
+  );
+  const u = s(() => {
+    for (const [t, r] of z)
+      if (i(n) > r)
+        return t;
+    return "md";
+  });
+  return s(() => {
+    const t = c.findIndex(
+      (o) => o === e.countPerRow
+    ), r = i(u);
+    return r === "lg" ? c[t + 1] || e.countPerRow : r === "xs" && c[t - 1] || e.countPerRow;
   });
 };
 export {
-  P as useCountPerRow
+  T as useCountPerRow
 };

package/es/src/ap-form/search-form/index.vue.mjs

@@ -5,14 +5,14 @@ import "../item/index.vue2.mjs";
 import { genRealChildren as W } from "../item-group/helper.mjs";
 import "../../config-provider/index.mjs";
 import { isArray as ue, isBoolean as ce, omit as pe } from "lodash-unified";
-import { isDef as D } from "../../utils/index.mjs";
-import { execFunc as q, diffFormItem as de } from "./utils.mjs";
+import { isDef as z } from "../../utils/index.mjs";
+import { execFunc as D, diffFormItem as de } from "./utils.mjs";
 import "./components/popover-filter.vue.mjs";
 import { useCountPerRow as fe } from "./hooks/use-count-per-row.mjs";
 import "./components/popover-sorter/index.vue.mjs";
 import { useNamespace as me } from "../../config-provider/hooks/use-namespace.mjs";
 import { useLocale as he } from "../../config-provider/hooks/use-locale.mjs";
-import z from "../item/index.vue.mjs";
+import q from "../item/index.vue.mjs";
 import xe from "./components/popover-filter.vue2.mjs";
 import ye from "./components/popover-sorter/index.vue2.mjs";
 import ge from "../ap-form.vue2.mjs";
@@ -108,7 +108,8 @@ const s = 24, Ue = /* @__PURE__ */ ae({
     sortable: {
       type: Boolean,
       default: !0
-    }
+    },
+    resizeTarget: {}
   },
   setup(f, {
     expose: H
@@ -119,20 +120,20 @@ const s = 24, Ue = /* @__PURE__ */ ae({
     } = me("ap-form-search-form"), {
       t: k
     } = he(), G = fe(o), y = L();
-    function I() {
+    function T() {
       var a;
       const e = (a = y.value) == null ? void 0 : a.getFieldsValueTransformed(!0);
-      q(o.onSubmit, e);
+      D(o.onSubmit, e);
     }
     function J() {
       var e, a;
-      o.customReset || (a = (e = y.value) == null ? void 0 : e.resetFields) == null || a.call(e), q(o.onReset);
+      o.customReset || (a = (e = y.value) == null ? void 0 : e.resetFields) == null || a.call(e), D(o.onReset);
     }
-    const K = (e) => D(e) ? (ue(e) ? e : [e]).join("") : Date.now();
-    let T = [];
+    const K = (e) => z(e) ? (ue(e) ? e : [e]).join("") : Date.now();
+    let I = [];
     const u = U(W(i.default())), b = L(!1), c = U((P = i.extra) == null ? void 0 : P.call(i)), E = _(() => Math.floor(s / n(G)));
     V(() => i.default(), (e) => {
-      T = u.value, u.value = de(T, W(e)), b.value = !1;
+      I = u.value, u.value = de(I, W(e)), b.value = !1;
     }), V(() => {
       var e;
       return (e = i.extra) == null ? void 0 : e.call(i);
@@ -145,7 +146,7 @@ const s = 24, Ue = /* @__PURE__ */ ae({
       const Y = s * o.maxRows - h * (n(c) && !o.extraInAction ? 2 : 1);
       e.forEach((F, te) => {
         const p = F.props;
-        if (ce(p.hidden) ? !!p.hidden : D(p.hidden))
+        if (ce(p.hidden) ? !!p.hidden : z(p.hidden))
           a.push(F);
         else {
           let C = p.span || h;
@@ -175,7 +176,7 @@ const s = 24, Ue = /* @__PURE__ */ ae({
         span: n(E),
         key: "actionWrapper"
       }, {
-        default: () => [t(z, null, {
+        default: () => [t(q, null, {
           default: () => [t(N, {
             wrap: "wrap",
             justify: l.value.lastRowOnlyIncludeActionAndExtra && !(n(c) && o.extraInAction) ? "flex-end" : "space-between"
@@ -187,7 +188,7 @@ const s = 24, Ue = /* @__PURE__ */ ae({
               default: () => [t("div", {
                 class: m("column-setting-trigger-wrapper")
               }, [l.value.collapseNodes.length ? t(xe, {
-                onSubmit: I,
+                onSubmit: T,
                 config: l.value.collapseNodes,
                 submitLoading: o.submitLoading
               }, null) : null, o.sortable && u.value.length ? t(ye, {
@@ -196,7 +197,7 @@ const s = 24, Ue = /* @__PURE__ */ ae({
                 sorted: b.value
               }, null) : null]), t(M, {
                 type: "primary",
-                onClick: I,
+                onClick: T,
                 loading: o.submitLoading,
                 htmlType: "submit",
                 class: m("action-btn")
@@ -216,7 +217,7 @@ const s = 24, Ue = /* @__PURE__ */ ae({
         span: l.value.extraSpan,
         key: "extraNode"
       }, {
-        default: () => [t(z, null, {
+        default: () => [t(q, null, {
           default: () => [t(N, {
             justify: l.value.extraSpan === s || l.value.lastRowOnlyIncludeActionAndExtra ? "start" : "flex-end"
           }, ve(e = n(c)) ? e : {

package/es/src/ap-grid/hooks/use-row-selection.d.ts

@@ -0,0 +1,100 @@
+import { TableRowSelection } from '@aplus-frontend/antdv/lib/table/interface';
+import { ComputedRef, Ref } from 'vue';
+import { ApTableProps, ApTableRowSelection } from '../../ap-table';
+import { Recordable } from '../../type';
+export interface RowSelectionReturnType<RecordType = any> {
+    rowSelection: ComputedRef<TableRowSelection<RecordType>>;
+    selectedRows: Ref<Partial<RecordType>[]>;
+    /**
+     * 选中某行
+     * @param item
+     * @returns
+     */
+    select: (item: RecordType) => void;
+    /**
+     * 取消选中某行
+     * @param item
+     * @returns
+     */
+    unSelect: (item: RecordType) => void;
+    /**
+     * 某行是否被选中
+     * @param item
+     * @returns
+     */
+    isSelected: (item: RecordType) => boolean;
+    /**
+     * 选中当前所有数据
+     * @returns
+     */
+    selectAll: () => void;
+    /**
+     * 取消选中当前所有数据
+     * @returns
+     */
+    unSelectAll: () => void;
+    /**
+     * 清空所有选中
+     * @returns
+     */
+    clearAll: () => void;
+    /**
+     * 切换某行的选中状态
+     * @param item
+     * @returns
+     */
+    toggleSelect: (item: RecordType) => void;
+    /**
+     * 多项选中
+     * @param items
+     * @returns
+     */
+    selectMulti: (items: RecordType[]) => void;
+    /**
+     * 多项反选
+     * @param items
+     * @returns
+     */
+    unSelectMulti: (items: RecordType[]) => void;
+    /**
+     * VxeTable 表格checkbox-change事件
+     * @param item
+     * @param select
+     * @param partRowData
+     * @returns
+     */
+    selectChange: (item: RecordType, select: boolean, partRowData: RecordType[]) => void;
+    /**
+     * VxeTable 表格checkbox-all事件
+     * @param item
+     * @param select
+     * @param partRowData
+     * @returns
+     */
+    selectAllChange: (select: boolean, partRowData: RecordType[]) => void;
+    /**
+     * VxeTable 表格checkbox-range-change事件
+     * @param selected
+     * @param partRowData
+     * @returns
+     */
+    selectRangeChange: (selected: RecordType[], partRowData: RecordType[]) => void;
+    /**
+     * 通过key勾选多条数据
+     * @param keys
+     * @returns
+     */
+    selectMultiByKeys: (keys: (string | number)[]) => void;
+}
+type RowSelectionParams<T> = Omit<ApTableRowSelection<T>, 'mode'> & {
+    /**
+     * 数据源（如果是后端分页，则表示当页数据，否则是全量数据）
+     */
+    dataSource: Ref<T[]>;
+    /**
+     * 同Table的rowkey
+     */
+    rowKey: ApTableProps['rowKey'];
+};
+declare const useTableRowSelection: <RecordType = Recordable>(props: RowSelectionParams<RecordType>) => RowSelectionReturnType<RecordType>;
+export default useTableRowSelection;

package/es/src/ap-grid/hooks/use-row-selection.mjs

@@ -0,0 +1,122 @@
+import { ref as k, computed as v, unref as a } from "vue";
+import { isFunction as i, cloneDeep as M } from "lodash-unified";
+function m(u, c) {
+  return !(c != null && c.length) || i(u) ? [] : c.map((f) => ({ [u]: f }));
+}
+const T = (u) => {
+  u.defaultSelectedRowKeys;
+  const c = k(
+    m(u.rowKey, u.defaultSelectedRowKeys)
+  );
+  function f(e, t) {
+    c.value = t;
+  }
+  const l = (e) => i(u.rowKey) ? u.rowKey(e) : e[u.rowKey], s = v(() => {
+    const e = /* @__PURE__ */ new Map();
+    return a(c).forEach((t) => {
+      e.set(l(t), t);
+    }), e;
+  });
+  function g(e) {
+    return a(s).has(l(e));
+  }
+  function h(e) {
+    const t = a(s);
+    t.set(l(e), e), c.value = [...t.values()];
+  }
+  function x(e) {
+    const t = a(s);
+    for (const n of e)
+      t.set(l(n), n);
+    c.value = [...t.values()];
+  }
+  function w(e) {
+    if (i(u.rowKey))
+      return;
+    const t = a(s);
+    for (const n of e) {
+      const o = a(u.dataSource).find(
+        (d) => l(d) === n
+      ), S = { [u.rowKey]: n };
+      t.set(String(n), o || S);
+    }
+    c.value = [...t.values()];
+  }
+  function y(e) {
+    const t = a(s);
+    t.delete(l(e)), c.value = [...t.values()];
+  }
+  function E(e) {
+    const t = a(s);
+    for (const n of e)
+      t.delete(l(n));
+    c.value = [...t.values()];
+  }
+  function r(e, t) {
+    const n = e;
+    for (const o of t)
+      n.set(l(o), o);
+    return n;
+  }
+  function K(e, t, n) {
+    const o = a(s);
+    t ? o.set(l(e), e) : o.delete(l(e)), r(o, n), c.value = [...o.values()];
+  }
+  function A(e, t) {
+    const n = M(a(s));
+    e ? a(u.dataSource).forEach((o) => {
+      n.set(l(o), o);
+    }) : a(u.dataSource).forEach((o) => {
+      n.delete(l(o));
+    }), r(n, t), c.value = [...n.values()];
+  }
+  function C(e, t) {
+    const n = M(a(s));
+    a(u.dataSource).forEach((o) => {
+      e.find((d) => l(d) === l(o)) ? n.set(l(o), o) : n.delete(l(o));
+    }), r(n, t), c.value = [...n.values()];
+  }
+  function R() {
+    const e = a(s);
+    a(u.dataSource).forEach((t) => {
+      e.set(l(t), t);
+    }), c.value = [...e.values()];
+  }
+  function D(e) {
+    const t = a(s), n = l(e);
+    t.has(n) ? t.delete(n) : t.set(n, e), c.value = [...t.values()];
+  }
+  function I() {
+    const e = a(s);
+    a(u.dataSource).forEach((t) => {
+      e.delete(l(t));
+    }), c.value = [...e.values()];
+  }
+  function b() {
+    c.value = [];
+  }
+  return {
+    select: h,
+    unSelect: y,
+    isSelected: g,
+    selectAll: R,
+    unSelectAll: I,
+    clearAll: b,
+    toggleSelect: D,
+    selectedRows: c,
+    selectMulti: x,
+    unSelectMulti: E,
+    rowSelection: v(() => ({
+      ...u,
+      onChange: f,
+      selectedRowKeys: a(c).map((e) => l(e))
+    })),
+    selectChange: K,
+    selectAllChange: A,
+    selectRangeChange: C,
+    selectMultiByKeys: w
+  };
+};
+export {
+  T as default
+};