@aplus-frontend/ui 0.1.24 → 0.1.26

package/es/src/business/ap-ladder/ApLadder.vue2.mjs

@@ -0,0 +1,176 @@
+import { defineComponent as q, useSlots as H, ref as R, computed as h, unref as l, onMounted as J, openBlock as t, createElementBlock as r, normalizeClass as u, createBlock as $, normalizeProps as w, mergeProps as E, createSlots as M, withCtx as b, Fragment as y, createElementVNode as p, normalizeStyle as m, toDisplayString as i, renderSlot as N, createCommentVNode as f, renderList as z, createTextVNode as K } from "vue";
+import { Tooltip as O } from "ant-design-vue";
+import "../../config-provider/index.mjs";
+import { locales as Q } from "./interface.mjs";
+import "./style.css";
+import { useNamespace as U } from "../../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as X } from "../../config-provider/hooks/use-global-config.mjs";
+const Y = { key: 1 }, Z = { key: 0 }, x = { key: 1 }, ee = { key: 0 }, oe = ["onClick"], te = { key: 0 }, re = { key: 1 }, le = { key: 0 }, se = { key: 1 }, me = /* @__PURE__ */ q({
+  name: "ApLadder",
+  __name: "ApLadder",
+  props: {
+    major: { default: "" },
+    minor: { default: "" },
+    majorColor: { default: "" },
+    minorColor: { default: "" },
+    layout: { default: "vertical" },
+    tooltip: { type: Boolean, default: !0 },
+    labelValues: { default: () => [] },
+    tooltipProps: { default: () => ({
+      title: void 0,
+      align: {},
+      arrowPointAtCenter: !1,
+      arrow: !0,
+      autoAdjustOverflow: !0,
+      color: "",
+      destroyTooltipOnHide: !1,
+      getPopupContainer: () => document.body,
+      mouseEnterDelay: 0.1,
+      mouseLeaveDelay: 0.1,
+      overlayClassName: "",
+      overlayStyle: {},
+      overlayInnerStyle: {},
+      placement: "top",
+      trigger: "hover"
+    }) }
+  },
+  setup(A) {
+    const v = H(), s = A, { b: B, e: n, m: L } = U("ap-ladder"), F = X("uiMode", "aplus"), _ = `ap-ladder-${Math.floor(Math.random() * 1e7)}`, W = n("ellipsis"), k = R(!1), D = h(() => s.labelValues.length === 0), T = h(() => s.labelValues.length > 0), g = h(() => s.majorColor ? {
+      color: `${s.majorColor}`
+    } : {}), S = h(() => s.minorColor ? {
+      color: `${s.minorColor}`
+    } : {}), C = (o) => o == null || typeof o == "string" && o.trim() === "", c = (o, a = {}) => {
+      const e = {
+        rawValue: a.rawValue,
+        precision: a.precision === void 0 ? 2 : a.precision,
+        thousand: a.thousand,
+        thousandSeparator: a.thousandSeparator || ",",
+        currency: a.currency,
+        percent: a.percent
+      };
+      return C(o) ? "--" : e.rawValue ? o : typeof o == "number" ? e.percent ? `${o.toFixed(e.precision)}%` : e.currency ? o.toLocaleString(Q[e.currency], {
+        style: "currency",
+        currency: e.currency
+      }) : e.thousand ? o.toFixed(e.precision).replace(
+        /(\d)(?=(\d{3})+(?!\d))/g,
+        `$1${e.thousandSeparator}`
+      ) : o.toFixed(e.precision) : o;
+    }, G = () => {
+      const o = document.getElementById(_);
+      if (!o)
+        return;
+      const a = o.querySelectorAll(`.${W}`);
+      new ResizeObserver((d) => {
+        d.forEach((j) => {
+          j.target === o && (k.value = !1, a.forEach((P) => {
+            P.clientWidth < P.scrollWidth && (k.value = !0);
+          }));
+        });
+      }).observe(o), k.value = !1, a.forEach((d) => {
+        d.clientWidth < d.scrollWidth && (k.value = !0);
+      });
+    }, V = h(() => v.title ? !0 : s.tooltip && l(k)), I = (o) => {
+      o && window.open(o, "_blank");
+    };
+    return J(() => {
+      G();
+    }), (o, a) => (t(), r("div", {
+      id: _,
+      class: u([l(B)(), `${l(L)(l(F))}`])
+    }, [
+      D.value ? (t(), $(l(O), w(E({ key: 0 }, { ...s.tooltipProps })), M({
+        default: b(() => [
+          !C(o.major) || !C(o.minor) ? (t(), r(y, { key: 0 }, [
+            s.layout === "vertical" ? (t(), r(y, { key: 0 }, [
+              p("div", {
+                class: u([l(n)("major"), l(n)("ellipsis")]),
+                style: m(g.value)
+              }, i(c(o.major)), 7),
+              p("div", {
+                class: u([l(n)("minor"), l(n)("ellipsis")]),
+                style: m(S.value)
+              }, i(c(o.minor)), 7)
+            ], 64)) : (t(), r("div", {
+              key: 1,
+              class: u(l(n)("ellipsis"))
+            }, [
+              p("span", {
+                class: u([l(n)("major")]),
+                style: m(g.value)
+              }, i(c(o.major)), 7),
+              p("span", {
+                class: u([l(n)("minor")]),
+                style: m(S.value)
+              }, i(c(o.minor)), 7)
+            ], 2))
+          ], 64)) : (t(), r("div", Y, i("--")))
+        ]),
+        _: 2
+      }, [
+        V.value ? {
+          name: "title",
+          fn: b(() => [
+            v.title ? N(o.$slots, "title", { key: 0 }) : (t(), r(y, { key: 1 }, [
+              s.tooltipProps.title ? (t(), r("div", Z, i(s.tooltipProps.title), 1)) : (t(), r("div", x, [
+                p("div", null, i(c(o.major)), 1),
+                p("div", null, i(c(o.minor)), 1)
+              ]))
+            ], 64))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040)) : f("", !0),
+      T.value ? (t(), $(l(O), w(E({ key: 1 }, { ...s.tooltipProps })), M({
+        default: b(() => [
+          (t(!0), r(y, null, z(s.labelValues, (e, d) => (t(), r("div", {
+            key: d,
+            class: u([l(n)("ellipsis")])
+          }, [
+            p("span", {
+              class: u(l(n)("label")),
+              style: m(e.labelColor ? { color: e.labelColor } : void 0)
+            }, [
+              K(i(e.label), 1),
+              e.label ? (t(), r("span", ee, "：")) : f("", !0)
+            ], 6),
+            C(e.link) ? (t(), r("span", {
+              key: 1,
+              class: u(l(n)("value")),
+              style: m(e.valueColor ? { color: e.valueColor } : void 0)
+            }, i(c(e.value, { ...e })), 7)) : (t(), r("span", {
+              key: 0,
+              class: u(l(n)("link")),
+              style: m(e.linkColor ? { color: e.linkColor } : void 0),
+              onClick: (j) => I(e.link)
+            }, i(c(e.value, { ...e })), 15, oe)),
+            e.unit ? (t(), r("span", {
+              key: 2,
+              class: u(l(n)("unit")),
+              style: m(e.unitColor ? { color: e.unitColor } : void 0)
+            }, i(e.unit), 7)) : f("", !0)
+          ], 2))), 128))
+        ]),
+        _: 2
+      }, [
+        V.value ? {
+          name: "title",
+          fn: b(() => [
+            v.title ? N(o.$slots, "title", { key: 0 }) : (t(), r(y, { key: 1 }, [
+              s.tooltipProps.title ? (t(), r("div", te, i(s.tooltipProps.title), 1)) : (t(), r("div", re, [
+                (t(!0), r(y, null, z(s.labelValues, (e, d) => (t(), r("div", { key: d }, [
+                  e.label ? (t(), r("span", le, i(e.label), 1)) : f("", !0),
+                  e.label ? (t(), r("span", se, "：")) : f("", !0),
+                  p("span", null, i(c(e.value, { ...e })), 1)
+                ]))), 128))
+              ]))
+            ], 64))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040)) : f("", !0)
+    ], 2));
+  }
+});
+export {
+  me as default
+};

package/es/src/business/ap-ladder/interface.d.ts

@@ -0,0 +1,134 @@
+import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
+import { VNode } from 'vue';
+/**
+ * Tooltip 需要的属性
+ */
+export type TooltipNeedProps = Required<Pick<TooltipProps, 'title' | 'align' | 'arrowPointAtCenter' | 'arrow' | 'autoAdjustOverflow' | 'color' | 'destroyTooltipOnHide' | 'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay' | 'overlayClassName' | 'overlayStyle' | 'overlayInnerStyle' | 'placement' | 'trigger'>>;
+/**
+ * 健值对
+ */
+export interface ApLadderLabelValue {
+    /**
+     * 健名称
+     */
+    label: string;
+    /**
+     * 值
+     */
+    value: string | number | undefined | null;
+    /**
+     * 是否采用原始值
+     */
+    rawValue?: boolean;
+    /**
+     * 精度 默认2位小数
+     */
+    precision?: number;
+    /**
+     * 千分位展示
+     */
+    thousand?: boolean;
+    /**
+     * 千分位分隔符
+     */
+    thousandSeparator?: string;
+    /**
+     * 货币单位
+     */
+    currency?: CurrencyCode;
+    /**
+     * 百分比展示
+     */
+    percent?: boolean;
+    /**
+     * 自定义单位
+     */
+    unit?: string;
+    /**
+     * 自定义单位颜色
+     */
+    unitColor?: string;
+    /**
+     * 自定义健颜色
+     */
+    labelColor?: string;
+    /**
+     * 自定义值颜色
+     */
+    valueColor?: string;
+    /**
+     * 跳转第三方链接
+     */
+    link?: string;
+    /**
+     * 自定义链接颜色
+     */
+    linkColor?: string;
+}
+/**
+ * ApLadder Props 属性类型声明
+ */
+export interface ApLadderProps {
+    /**
+     * 重要信息
+     * @description 如 操作人名称、供应商名称...
+     */
+    major: string;
+    /**
+     * 次要信息
+     * @description 如 操作人邮箱、供应商编码...
+     */
+    minor: string;
+    /**
+     * 自定义重要信息颜色
+     */
+    majorColor: string;
+    /**
+     * 自定义次要信息颜色
+     */
+    minorColor: string;
+    /**
+     * 布局方式
+     * - `vertical` 垂直布局
+     * - `horizontal` 水平布局
+     * @default `vertical`
+     */
+    layout: 'vertical' | 'horizontal';
+    /**
+     * 是否展示气泡
+     * @description 默认展示
+     */
+    tooltip: boolean;
+    /**
+     * 健值对 - 数组展示
+     */
+    labelValues: Array<ApLadderLabelValue>;
+    /**
+     * 扩展 Tooltip
+     */
+    tooltipProps: TooltipNeedProps;
+}
+/**
+ * ApLadder Slots 类型声明
+ */
+export interface ApLadderSlots {
+    title?: VNode;
+}
+/**
+ * 国际货币代码-映射-语言
+ */
+export interface CurrencyCodeInLocale {
+    [string: string]: Intl.LocalesArgument;
+}
+/**
+ * 国际货币代码
+ * - `CNY` 人民币
+ * - `USD` 美元
+ * - `EUR` 欧元
+ * - `GBP` 英镑
+ */
+export type CurrencyCode = 'CNY' | 'USD' | 'EUR' | 'GBP';
+/**
+ * 国际货币代码-映射-语言
+ */
+export declare const locales: CurrencyCodeInLocale;

package/es/src/business/ap-ladder/interface.mjs

@@ -0,0 +1,10 @@
+const e = {
+  USD: "en-US",
+  CNY: "zh-CN",
+  EUR: "de-DE",
+  GBP: "en-GB"
+  // 请自行添加更多的国际货币代码-映射-语言
+};
+export {
+  e as locales
+};

package/es/src/business/ap-ladder/style.css

@@ -0,0 +1,56 @@
+.aplus-ap-ladder {
+  position: relative;
+  width: inherit;
+  font-size: 14px;
+  /** 自动溢出省略 */
+  /** Aplus端样式  */
+  /** Admin端样式  */
+}
+.aplus-ap-ladder__ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.aplus-ap-ladder__major {
+  line-height: 22px;
+  color: #182948;
+}
+.aplus-ap-ladder__minor {
+  line-height: 22px;
+  color: #8896B0;
+}
+.aplus-ap-ladder__label {
+  color: #8896B0;
+  word-break: break-all;
+}
+.aplus-ap-ladder__value {
+  color: #182948;
+  word-break: break-all;
+}
+.aplus-ap-ladder__unit {
+  margin-left: 5px;
+  color: #182948;
+}
+.aplus-ap-ladder__link {
+  cursor: pointer;
+  color: #0070ff;
+}
+.aplus-ap-ladder--admin .aplus-ap-ladder__major {
+  color: #333333;
+}
+.aplus-ap-ladder--admin .aplus-ap-ladder__minor {
+  color: #999999;
+}
+.aplus-ap-ladder--admin .aplus-ap-ladder__label {
+  color: #999999;
+}
+.aplus-ap-ladder--admin .aplus-ap-ladder__value {
+  color: #333333;
+}
+.aplus-ap-ladder--admin .aplus-ap-ladder__unit {
+  color: #333333;
+}
+.aplus-ap-ladder--admin .aplus-ap-ladder__link {
+  color: #34b77c;
+}

package/es/src/business/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './usePageListApTable';
+export * from './useTableRefresh';

package/es/src/business/hooks/index.mjs

@@ -1,4 +1,6 @@
 import { usePageListApTable as o } from "./usePageListApTable.mjs";
+import { useTableRefresh as a } from "./useTableRefresh.mjs";
 export {
-  o as usePageListApTable
+  o as usePageListApTable,
+  a as useTableRefresh
 };

package/es/src/business/hooks/usePageListApTable.d.ts

@@ -1,4 +1,5 @@
 import { ApTableProps } from '../../';
+import { UseTableRefreshOption } from './useTableRefresh';
 import { Recordable } from '../../type';
 export interface UsePageListApTable extends ApTableProps {
     /** 是否显示默认的行选择配置
@@ -9,6 +10,16 @@ export interface UsePageListApTable extends ApTableProps {
     transformSearchFormValues?: (values: any) => any;
     /** ApTable数据接口 */
     api?(record: any): Promise<any>;
+    /** 发起请求的时候情况行选中
+     * @default true
+     */
+    clearSelectionOnRequest?: boolean;
+    /** 用于覆盖默认的class */
+    class?: string;
+    /**
+     * 表格刷新相关
+     */
+    tableRefresh?: boolean | Omit<UseTableRefreshOption, 'apTableRef'>;
 }
 /**
  * 集成了列表页面的ApTable的默认配置
@@ -20,10 +31,21 @@ export declare function usePageListApTable(props?: UsePageListApTable): [ApTable
     reset: () => void;
     getSearchFormValues: () => any;
     getApTableInstance: () => {
-        reset: () => void;
         submit: () => void;
-        dataSource: any;
+        reset: () => void;
         setSearchFormValues: (fields: Partial< Recordable>) => void;
         getSearchFormValues: () => Partial< Recordable>;
-    } | null;
+        dataSource: any;
+        rowSelection?: {
+            select: (item: any) => void;
+            selectedRows: any[];
+            unSelect: (item: any) => void;
+            isSelected: (item: any) => boolean;
+            selectAll: () => void;
+            unSelectAll: () => void;
+            clearAll: () => void;
+            toggleSelect: (item: any) => void;
+        } | undefined;
+    } | null | undefined;
+    clearSelection: () => void;
 }];

package/es/src/business/hooks/usePageListApTable.mjs

@@ -1,17 +1,27 @@
-import "../../index.mjs";
-import { merge as p } from "lodash-unified";
-import { ref as m } from "vue";
-import { useGlobalConfig as d } from "../../config-provider/hooks/use-global-config.mjs";
-function A(l) {
-  const t = m(null), n = d("uiMode", "aplus");
-  console.log("mode", n.value);
-  const {
+import { merge as m } from "lodash-unified";
+import { ref as b } from "vue";
+import { useTableRefresh as d } from "./useTableRefresh.mjs";
+function h(a) {
+  return a === !0 ? {} : a === !1 ? {
+    refreshBefore: () => !1
+  } : a;
+}
+function F(a) {
+  const r = b(null), {
     isShowRowSelection: c = !0,
+    clearSelectionOnRequest: u = !0,
     transformSearchFormValues: o,
-    api: a,
-    ...u
-  } = l || {};
-  return [p(
+    api: s,
+    tableRefresh: i = !1,
+    ...f
+  } = a || {}, n = () => {
+    var e, t;
+    (t = (e = r.value) == null ? void 0 : e.rowSelection) == null || t.clearAll();
+  };
+  return d({
+    ...h(i),
+    apTableRef: r
+  }), [m(
     {
       // scroll，tableLayout，columnResizable设置表格可拖动
       scroll: { x: "100%", y: "100%" },
@@ -19,17 +29,17 @@ function A(l) {
       columnResizable: !0,
       // 表格header吸顶效果
       class: "ap-table--sticky",
-      request: a ? async (e) => {
-        const r = o ? o(e) : e;
+      request: s ? async (e) => {
+        const t = o ? o(e) : e;
         try {
-          if (!a) throw new Error("api is not defined");
-          const { records: s, total: i } = await a(r);
-          return {
-            data: s,
-            total: i
+          if (!s) throw new Error("api is not defined");
+          const { records: l, total: p } = await s(t);
+          return u && n(), {
+            data: l,
+            total: p
           };
-        } catch (s) {
-          return console.error(s), {
+        } catch (l) {
+          return console.error(l), {
             data: [],
             total: 0
           };
@@ -41,27 +51,28 @@ function A(l) {
         columnWidth: 50
       } : void 0,
       ref(e) {
-        t.value = e;
+        r.value = e;
       }
     },
-    u
+    f
   ), {
     reload: () => {
       var e;
-      (e = t.value) == null || e.submit();
+      (e = r.value) == null || e.submit();
     },
     reset: () => {
       var e;
-      (e = t.value) == null || e.reset();
+      (e = r.value) == null || e.reset();
     },
     getSearchFormValues: () => {
-      var r;
-      const e = ((r = t.value) == null ? void 0 : r.getSearchFormValues()) || {};
+      var t;
+      const e = ((t = r.value) == null ? void 0 : t.getSearchFormValues()) || {};
       return o ? o(e) : e;
     },
-    getApTableInstance: () => t.value
+    getApTableInstance: () => r.value,
+    clearSelection: n
   }];
 }
 export {
-  A as usePageListApTable
+  F as usePageListApTable
 };

package/es/src/business/hooks/useTableRefresh.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+import { ApTableExpose } from '../../';
+export interface UseTableRefreshOption {
+    /**
+     * apTable实例
+     */
+    apTableRef?: Ref<ApTableExpose | undefined | null>;
+    /**
+     * 刷新类型，reset：重置，submit：提交
+     */
+    refreskType?: 'reset' | 'submit';
+    /**
+     * 刷新前执行，返回false则不执行
+     */
+    refreshBefore?: () => boolean;
+}
+export declare function useTableRefresh(option?: UseTableRefreshOption): void;

package/es/src/business/hooks/useTableRefresh.mjs

@@ -0,0 +1,16 @@
+import { onMounted as c, nextTick as l, onActivated as T } from "vue";
+function m(e) {
+  const a = (["reset", "submit", void 0].includes(e == null ? void 0 : e.refreskType) ? e == null ? void 0 : e.refreskType : "submit") ?? "submit", r = (e == null ? void 0 : e.refreshBefore) ?? (() => !0);
+  let s = !0;
+  c(() => {
+    l(() => {
+      s = !1;
+    });
+  }), T(() => {
+    var u, f;
+    s || r != null && r() && ((f = (u = e == null ? void 0 : e.apTableRef) == null ? void 0 : u.value) == null || f[a]());
+  });
+}
+export {
+  m as useTableRefresh
+};