@aplus-frontend/ui 7.0.0-beta.0 → 7.0.0-beta.1

package/es/src/ap-grid/style/index.mjs

@@ -0,0 +1,218 @@
+import { genSettingTriggerBtnStyle as r } from "../../ap-table/style/index.mjs";
+import { multiRows as o, resetScrollbar as p } from "../../style/index.mjs";
+import { genComponentStyleHook as d } from "../../utils/cssinjs/index.mjs";
+import { aplusApGridIconFont as c } from "./font.mjs";
+const g = (e) => {
+  const { componentCls: i, namespace: t } = e, l = `${i}-vxe-wrapper`, a = `${i}-pagination-wrapper`, n = `.${t}-scroll-bar`;
+  return [
+    c,
+    {
+      [i]: {
+        ...p(e),
+        ".vxe-table--render-default.size--medium .vxe-body--column.is--padding div.vxe-cell": {
+          minHeight: "unset !important",
+          padding: "9px 12px",
+          fontSize: e.fontSize,
+          lineHeight: e.lineHeight
+        },
+        ".vxe-table--render-default.size--mini .vxe-body--column.is--padding div.vxe-cell": {
+          minHeight: "unset !important",
+          padding: "6px 9px",
+          lineHeight: e.lineHeight
+        },
+        ".vxe-table--render-default.size--medium .vxe-header--column.is--padding div.vxe-cell": {
+          fontSize: e.fontSize,
+          lineHeight: "16px",
+          padding: "0px 12px"
+        },
+        ".vxe-table--render-default.size--mini .vxe-header--column.is--padding div.vxe-cell": {
+          lineHeight: "16px",
+          padding: "0 9px"
+        },
+        "&-adaptive": {
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          [l]: {
+            minHeight: 0,
+            flex: 1
+          }
+        },
+        [a]: {
+          "ul.ant-pagination": {
+            marginBlock: e.space
+          }
+        },
+        "&-sticky": {
+          [a]: {
+            backgroundColor: "#fff",
+            zIndex: 10,
+            position: "sticky",
+            bottom: 0
+          },
+          [`&:has(${n})`]: {
+            [a]: {
+              "ul.ant-pagination": {
+                marginBlockStart: 0,
+                paddingBlockStart: "4px"
+              }
+            },
+            ".vxe-table--scroll-x-wrapper": {
+              opacity: 0
+            },
+            ".vxe-table .vxe-table--scroll-x-virtual": {
+              height: "0px !important"
+            }
+          },
+          [`${i}__table-wrapper-card`]: {
+            paddingBlockEnd: 0
+          }
+        },
+        "&-wrapper": {
+          padding: e.space,
+          paddingBlockEnd: e.spaceLG,
+          backgroundColor: "#fff",
+          // 如果渲染了分页器，则取消容器的底部边距，防止双重边距
+          "&:has(ul.ant-pagination)": {
+            paddingBottom: 0
+          },
+          [`&${i}-sticky`]: {
+            paddingBlockEnd: 0
+          }
+        },
+        [`${i}__search-wrapper`]: {
+          padding: e.space,
+          paddingBlockEnd: 0,
+          backgroundColor: "#fff",
+          borderRadius: e.borderRadius,
+          marginBlockEnd: "10px"
+        },
+        [`${i}__table-wrapper`]: {
+          flex: 1,
+          minHeight: 0,
+          maxHeight: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column"
+        },
+        [`${i}__table-wrapper-card`]: {
+          padding: e.space,
+          paddingBlockEnd: e.spaceLG,
+          borderRadius: e.borderRadius,
+          backgroundColor: "#fff",
+          "&:has(ul.ant-pagination)": {
+            paddingBottom: 0
+          }
+        },
+        [`${i}-pagination`]: {
+          marginBlock: e.spaceLG,
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          rowGap: "8px",
+          ".ant-pagination-total-text": {
+            flex: 1,
+            height: "unset",
+            lineHeight: e.lineHeight,
+            display: "flex",
+            alignItems: "center"
+          }
+        },
+        ".vxe-loading.vxe-table--loading": {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          top: 0,
+          left: 0,
+          zIndex: 99,
+          userSelect: "none",
+          ".vxe-loading--wrapper": {
+            width: "100%",
+            height: "100%"
+          }
+        },
+        [`${i}__table-loading-wrapper`]: {
+          height: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "var(--vxe-ui-loading-background-color)"
+        },
+        [`${i}-pagination-count-text`]: {
+          color: e.textColor2
+        },
+        [`${i}-pagination--total-right`]: {
+          paddingInlineStart: "12px"
+        },
+        [`${i}-pagination-total-wrapper`]: {
+          color: e.textColor1
+        },
+        // ApGrid中表格表头的样式
+        [`${i}-table-header`]: {
+          "&__title": {
+            ...o(e),
+            fontWeight: "bold",
+            textAlign: "right",
+            "&--single": {
+              flex: "unset"
+            }
+          }
+        },
+        ...r(e),
+        // 实现表头不换行排列
+        "th.vxe-header--column .vxe-cell--wrapper": {
+          display: "flex",
+          flexDirection: "row",
+          flexWrap: "nowrap",
+          alignItems: "center",
+          minWidth: "unset",
+          ".vxe-cell--title": {
+            flexShrink: 1,
+            flexGrow: 0
+          }
+        },
+        // 浮动表头和浮动页脚为对齐问题
+        ".fixed-left--wrapper, .fixed-right--wrapper": {
+          ".vxe-table--header": {
+            height: "100%"
+          },
+          ".vxe-table--footer": {
+            height: "100%"
+          }
+        },
+        // 树形表格图标
+        "i.vxe-table-icon-caret-right": {
+          "&::before": {
+            content: '"\\f292"'
+          }
+        },
+        "i.vxe-table-icon-caret-right.rotate90": {
+          transform: "none",
+          "&::before": {
+            content: '"\\f293"'
+          }
+        },
+        "i[class*=vxe-table-icon-]": {
+          fontFamily: "aplusuiiconfont !important;"
+        },
+        ".vxe-cell--checkbox.is--disabled > .vxe-checkbox--icon": {
+          backgroundColor: e.tableHeaderBg,
+          borderRadius: "4px"
+        },
+        ".vxe-cell--checkbox span.vxe-checkbox--icon": {
+          verticalAlign: "text-wrap"
+        },
+        "div.vxe-cell--tree-btn > i": {
+          fontSize: e.fontSizeSM,
+          color: e.textColor2
+        }
+      }
+    }
+  ];
+}, m = d("ApGrid", (e) => [
+  g(e)
+]);
+export {
+  m as default,
+  g as genApGridStyle
+};

package/es/src/ap-grid/utils/col.mjs

@@ -94,7 +94,7 @@ const G = ({
   })]) : l;
   let f = i ? z(r, a, p) : p;
   if (r.customRender) {
-    const N = r._path || [], w = D(t.record, t.rowIndex, t.params.rowKey);
+    const N = r._path || [], w = D(t.record, t.rowIndex, t.params?.rowKey);
     f = r.customRender({
       value: e,
       ...t,

package/es/src/ap-list/index.vue.mjs

@@ -1,13 +1,14 @@
-import { defineComponent as Y, ref as Z, toRef as _, unref as e, computed as p, watch as x, createElementBlock as s, openBlock as o, normalizeStyle as h, normalizeClass as i, renderSlot as u, createElementVNode as ee, createCommentVNode as P, createVNode as g, Fragment as z, createBlock as C, withCtx as b, renderList as te, mergeProps as ae } from "vue";
-import { Empty as F, Spin as ne, Pagination as re } from "@aplus-frontend/antdv";
-import { useTablePaging as oe } from "../ap-table/hooks/use-table-paging-ng.mjs";
+import { defineComponent as Z, ref as _, toRef as x, unref as e, computed as p, watch as ee, createElementBlock as s, openBlock as o, normalizeStyle as h, normalizeClass as i, renderSlot as u, createElementVNode as te, createCommentVNode as P, createVNode as g, Fragment as z, createBlock as C, withCtx as b, renderList as ae, mergeProps as ne } from "vue";
+import { Empty as F, Spin as re, Pagination as oe } from "@aplus-frontend/antdv";
+import { useTablePaging as ie } from "../ap-table/hooks/use-table-paging-ng.mjs";
 import "../config-provider/index.mjs";
-import { isUndefined as V, isNumber as ie, omit as le } from "lodash-unified";
-import { useOfflineList as se } from "./hooks/use-offline-list.mjs";
+import { isUndefined as V, isNumber as le, omit as se } from "lodash-unified";
+import { useOfflineList as ue } from "./hooks/use-offline-list.mjs";
 import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
-import { RecycleScroller as ue, DynamicScroller as ce, DynamicScrollerItem as me } from "vue-virtual-scroller";
-import { useNamespace as de } from "../config-provider/hooks/use-namespace.mjs";
-const Ie = /* @__PURE__ */ Y({
+import { RecycleScroller as me, DynamicScroller as ce, DynamicScrollerItem as de } from "vue-virtual-scroller";
+import fe from "./style/index.mjs";
+import { useNamespace as pe } from "../config-provider/hooks/use-namespace.mjs";
+const De = /* @__PURE__ */ Z({
   name: "ApList",
   __name: "index",
   props: {
@@ -29,18 +30,18 @@ const Ie = /* @__PURE__ */ Y({
     adaptive: { type: Boolean, default: !1 }
   },
   setup(E, { expose: L }) {
-    const O = F.PRESENTED_IMAGE_SIMPLE, a = E, { b: d, e: y, bm: R, m: N } = de("ap-list"), k = Z(), {
+    const O = F.PRESENTED_IMAGE_SIMPLE, a = E, { b: d, e: y, bm: R, m: N } = pe("ap-list"), T = fe("ap-list"), k = _(), {
       formRef: S,
       submit: I,
       reset: w,
-      handleTableChange: T,
+      handleTableChange: $,
       data: v,
-      refresh: $,
-      refreshByDelete: A,
+      refresh: A,
+      refreshByDelete: j,
       tableProps: B,
-      getPaging: j,
-      setPaging: q
-    } = oe({
+      getPaging: q,
+      setPaging: K
+    } = ie({
       async request(t) {
         const n = await a.request?.(t);
         return {
@@ -48,79 +49,79 @@ const Ie = /* @__PURE__ */ Y({
           total: n?.total || 0
         };
       },
-      params: _(a, "params"),
+      params: x(a, "params"),
       defaultData: a.defaultData,
       manual: a.manual,
       pagination: a.pagination,
       formatParams: a.beforeSearchSubmit
-    }), K = { form: S }, {
+    }), M = { form: S }, {
       pagination: D,
-      dataSource: M,
-      onChange: W
-    } = se(a);
-    function G(t, n) {
+      dataSource: W,
+      onChange: G
+    } = ue(a);
+    function U(t, n) {
       if (e(f)) {
-        W(t, n);
+        G(t, n);
         return;
       }
-      T(
+      $(
         { current: t, pageSize: n },
         {},
         {},
         { currentDataSource: [], action: "paginate" }
       );
     }
-    const c = p(() => e(f) ? e(M) : e(v).records), m = p(() => V(a.loading) ? e(v).loading : a.loading), U = p(() => a.pagination === !1 || a.virtual ? !1 : a.pagination?.hideOnSinglePage !== !0 ? !0 : e(f) ? (a.dataSource?.length || 0) > e(D).pageSize : e(v).total > e(B).pagination.pageSize), f = p(() => !V(a.dataSource));
-    x(
-      () => e(m),
+    const m = p(() => e(f) ? e(W) : e(v).records), c = p(() => V(a.loading) ? e(v).loading : a.loading), H = p(() => a.pagination === !1 || a.virtual ? !1 : a.pagination?.hideOnSinglePage !== !0 ? !0 : e(f) ? (a.dataSource?.length || 0) > e(D).pageSize : e(v).total > e(B).pagination.pageSize), f = p(() => !V(a.dataSource));
+    ee(
+      () => e(c),
       (t) => {
         a.onLoadingChange?.(t);
       }
     );
-    function H(t) {
+    function J(t) {
       k.value?.querySelector(t || ":first-child")?.scrollIntoView({ behavior: "smooth", block: "center" });
     }
-    function J(t = !1) {
+    function Q(t = !1) {
       const n = S.value?.apForm;
       return (t ? n?.getFieldsValueTransformed : n?.getFieldsValue)?.() || {};
     }
-    function Q(t) {
+    function X(t) {
       S.value?.apForm?.setFieldsValue?.(t);
     }
     return L({
       submit: () => I(),
       reset: () => w(),
-      refresh: () => $(),
-      refreshByDelete: (t) => A(t),
-      scrollToFirstRow: H,
-      getSearchFormValuesIfSetted: J,
-      setPaging: q,
-      getPaging: j,
-      setSearchFormValuesIfSetted: Q
+      refresh: () => A(),
+      refreshByDelete: (t) => j(t),
+      scrollToFirstRow: J,
+      getSearchFormValuesIfSetted: Q,
+      setPaging: K,
+      getPaging: q,
+      setSearchFormValuesIfSetted: X
     }), (t, n) => (o(), s("div", {
-      class: i([e(d)(), { [e(N)("adaptive")]: t.adaptive }]),
+      class: i([e(d)(), { [e(N)("adaptive")]: t.adaptive }, e(T)]),
       style: h(t.containerStyle)
     }, [
       u(t.$slots, "header", {
-        formIns: K,
+        formIns: M,
         submit: e(I),
         reset: e(w)
       }),
-      ee("div", {
+      te("div", {
         class: i([
           e(d)("content-container"),
-          { [e(R)("content-container", "spinning")]: m.value }
+          { [e(R)("content-container", "spinning")]: c.value }
         ])
       }, [
-        m.value ? (o(), s("div", {
+        c.value ? (o(), s("div", {
           key: 0,
           class: i(e(y)("spin-wrapper"))
         }, [
-          g(e(ne), { spinning: m.value }, null, 8, ["spinning"])
+          g(e(re), { spinning: c.value }, null, 8, ["spinning"])
         ], 2)) : P("", !0),
-        c.value.length === 0 ? u(t.$slots, "empty", {
+        m.value.length === 0 ? u(t.$slots, "empty", {
           key: 1,
-          loading: m.value
+          loading: c.value
         }, () => [
           g(e(F), { image: e(O) }, null, 8, ["image"])
         ]) : (o(), s("div", {
@@ -131,10 +132,10 @@ const Ie = /* @__PURE__ */ Y({
           class: i(e(y)("content"))
         }, [
           t.virtual ? (o(), s(z, { key: 0 }, [
-            e(ie)(t.virtual) ? (o(), C(e(ue), {
+            e(le)(t.virtual) ? (o(), C(e(me), {
               key: 0,
               class: i(e(d)("scroll-wrapper")),
-              items: c.value,
+              items: m.value,
               "item-size": t.virtual,
               "key-field": a.rowKey || "id"
             }, {
@@ -147,14 +148,14 @@ const Ie = /* @__PURE__ */ Y({
               _: 3
             }, 8, ["class", "items", "item-size", "key-field"])) : (o(), C(e(ce), {
               key: 1,
-              items: c.value,
+              items: m.value,
               "min-item-size": t.virtual.minItemSize,
               class: i(e(d)("scroll-wrapper"))
             }, {
-              default: b(({ item: r, index: l, active: X }) => [
-                g(e(me), {
+              default: b(({ item: r, index: l, active: Y }) => [
+                g(e(de), {
                   item: r,
-                  active: X,
+                  active: Y,
                   "data-index": l,
                   "size-dependencies": t.virtual.sizeDependencies?.(r)
                 }, {
@@ -171,28 +172,28 @@ const Ie = /* @__PURE__ */ Y({
             }, 8, ["items", "min-item-size", "class"]))
           ], 64)) : u(t.$slots, "renderContent", {
             key: 1,
-            dataSource: c.value
+            dataSource: m.value
           }, () => [
-            (o(!0), s(z, null, te(c.value, (r, l) => u(t.$slots, "renderItem", {
+            (o(!0), s(z, null, ae(m.value, (r, l) => u(t.$slots, "renderItem", {
               item: r,
               index: l
             })), 256))
           ])
         ], 6))
       ], 2),
-      U.value ? (o(), s("div", {
+      H.value ? (o(), s("div", {
         key: 0,
         class: i(e(y)("footer")),
         style: h(t.footerWarpperStyle)
       }, [
-        g(e(re), ae(
-          f.value ? e(D) : e(le)(e(B).pagination, ["showTotal"]),
-          { onChange: G }
+        g(e(oe), ne(
+          f.value ? e(D) : e(se)(e(B).pagination, ["showTotal"]),
+          { onChange: U }
         ), null, 16)
       ], 6)) : P("", !0)
     ], 6));
   }
 });
 export {
-  Ie as default
+  De as default
 };

package/es/src/ap-list/style/index.d.ts

@@ -0,0 +1,8 @@
+import { GenStyleFunc } from '../../design-token/interface';
+import { Ref } from 'vue';
+export type ApListToken = {
+    apListSpinnigOpacity: number;
+};
+export declare const genApListStyle: GenStyleFunc<ApListToken>;
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/ap-list/style/index.mjs

@@ -0,0 +1,67 @@
+import { genComponentStyleHook as n } from "../../utils/cssinjs/index.mjs";
+const i = (e) => {
+  const { componentCls: t } = e;
+  return {
+    [t]: {
+      [`${t}-content-container`]: {
+        position: "relative",
+        "&--spinning": {
+          opacity: e.apListSpinnigOpacity,
+          userSelect: "none",
+          pointerEvents: "none"
+        }
+      },
+      [`${t}__footer`]: {
+        marginTop: e.space,
+        display: "flex",
+        justifyContent: "flex-end"
+      },
+      [`${t}__spin-wrapper`]: {
+        position: "absolute",
+        width: "100%",
+        top: 0,
+        bottom: 0,
+        borderRadius: "4px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: 1
+      },
+      [`${t}-scroll-wrapper`]: {
+        height: "100%"
+      },
+      "&--adaptive": {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        [`${t}-content-container`]: {
+          flexGrow: 1,
+          flexShrink: 1,
+          overflow: "hidden",
+          "&:has(.ant-empty)": {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          [`${t}__content`]: {
+            height: "100%",
+            overflow: "auto"
+          }
+        }
+      }
+    }
+  };
+}, p = n(
+  "ApList",
+  (e) => [i(e)],
+  {
+    apListSpinnigOpacity: 0.5
+  },
+  {
+    skipUnit: ["apListSpinnigOpacity"]
+  }
+);
+export {
+  p as default,
+  i as genApListStyle
+};