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

package/es/src/business/ap-label/ApLabel.mjs

@@ -1,32 +1,33 @@
-import { defineComponent as s, useSlots as r, computed as m, createVNode as e, mergeProps as d } from "vue";
-import { Tooltip as f, Badge as p } from "@aplus-frontend/antdv";
-import { IconApAdLineAnnotation as A, IconApAdFillWarn as y, IconApAdLineWarn as v, IconApAdFillExecution as g, IconApAdFillSuccessful as T } from "@aplus-frontend/icon";
+import { defineComponent as r, useSlots as m, computed as d, createVNode as e, mergeProps as p } from "vue";
+import { Tooltip as f, Badge as A } from "@aplus-frontend/antdv";
+import { IconApAdLineAnnotation as y, IconApAdFillWarn as v, IconApAdLineWarn as b, IconApAdFillExecution as g, IconApAdFillSuccessful as T } from "@aplus-frontend/icon";
 import "../../config-provider/index.mjs";
-import { ApLabelProps as b } from "./constans.mjs";
+import { ApLabelProps as I } from "./constans.mjs";
 import { omit as L } from "lodash-unified";
-import { useNamespace as I } from "../../config-provider/hooks/use-namespace.mjs";
-const B = /* @__PURE__ */ s({
+import S from "./style/index.mjs";
+import { useNamespace as h } from "../../config-provider/hooks/use-namespace.mjs";
+const W = /* @__PURE__ */ r({
   name: "ApLabel",
-  props: b(),
+  props: I(),
   setup(l) {
     const {
-      b: c,
+      b: a,
       e: i
-    } = I("ap-label"), o = r(), n = m(() => ({
+    } = h("ap-label"), c = S("ap-label"), o = m(), n = d(() => ({
       color: l.iconColor,
       "font-size": l.iconSize + "px",
       "margin-left": "4px",
       cursor: "pointer"
-    })), a = (u, t) => u ? e(f, {
+    })), s = (u, t) => u ? e(f, {
       title: u,
       placement: t.placement || "top",
       color: t.toolTipBgColor
     }, {
-      default: () => [t.iconType === "question" && e(A, {
+      default: () => [t.iconType === "question" && e(y, {
         style: n.value
-      }, null), t.iconType === "warning" && e(y, {
+      }, null), t.iconType === "warning" && e(v, {
         style: n.value
-      }, null), t.iconType === "line-warning" && e(v, {
+      }, null), t.iconType === "line-warning" && e(b, {
         style: n.value
       }, null), t.iconType === "ellipsis" && e(g, {
         style: n.value
@@ -35,16 +36,16 @@ const B = /* @__PURE__ */ s({
       }, null)]
     }) : null;
     return () => e("div", null, [l.show ? e("div", {
-      class: [c()]
+      class: [a(), c.value]
     }, [e("div", {
       class: [i("content")]
-    }, [e(p, d(L(l, ["helpMessage", "placement", "iconColor"]), {
+    }, [e(A, p(L(l, ["helpMessage", "placement", "iconColor"]), {
       status: l.status ? l.status : "default"
-    }), null), o.default ? o.default() : a(l.helpMessage, l)]), o.custom ? e("div", {
+    }), null), o.default ? o.default() : s(l.helpMessage, l)]), o.custom ? e("div", {
       class: [i("custom")]
     }, [o.custom()]) : null]) : null]);
   }
 });
 export {
-  B as default
+  W as default
 };

package/es/src/business/ap-label/style/index.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/business/ap-label/style/index.mjs

@@ -0,0 +1,49 @@
+import { genComponentStyleHook as t } from "../../../utils/cssinjs/index.mjs";
+const r = (o) => {
+  const { componentCls: e } = o;
+  return {
+    [e]: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "start",
+      fontSize: "14px",
+      [`${e}__content`]: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        ".aplus-frontend-icon": {
+          display: "flex",
+          alignItems: "center"
+        }
+      },
+      [`${e}__custom`]: {
+        marginBlockStart: "2px",
+        width: "100%",
+        ".ant-tag": {
+          height: "24px",
+          lineHeight: "24px"
+        },
+        ".ant-tag-green": {
+          color: "#34b77c",
+          borderColor: "#34b77c",
+          background: "rgba(52, 183, 124, 0.06)"
+        },
+        ".ant-tag-red": {
+          color: "#FF4D4F",
+          borderColor: "#FF4D4F",
+          backgroundColor: "rgba(255, 77, 79, 0.06)"
+        },
+        ".ant-tag-blue": {
+          color: "#1890ff",
+          borderColor: "#1890ff",
+          backgroundColor: "rgba(24, 144, 255, 0.06)"
+        }
+      }
+    }
+  };
+}, l = t("ApLabel", (o) => [
+  r(o)
+]);
+export {
+  l as default
+};

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

@@ -1,39 +1,40 @@
-import { defineComponent as s, computed as i, createVNode as o } from "vue";
+import { defineComponent as p, computed as o, createVNode as t } from "vue";
 import "../../config-provider/index.mjs";
-import p from "./components/SimpleMode.mjs";
-import k from "./components/ValueGroupMode.mjs";
-import { ApLadderProps as b } from "./constans.mjs";
-import { useNamespace as g } from "../../config-provider/hooks/use-namespace.mjs";
+import k from "./components/SimpleMode.mjs";
+import b from "./components/ValueGroupMode.mjs";
+import { ApLadderProps as g } from "./constans.mjs";
+import h from "./style/index.mjs";
+import { useNamespace as v } from "../../config-provider/hooks/use-namespace.mjs";
 import { useGlobalConfig as A } from "../../config-provider/hooks/use-global-config.mjs";
-const G = /* @__PURE__ */ s({
+const w = /* @__PURE__ */ p({
   name: "ApLadder",
-  props: b(),
+  props: g(),
   setup(e, {
     slots: n
   }) {
     const {
       b: a,
       m: d
-    } = g("ap-ladder"), u = A("uiMode", "aplus"), r = i(() => e.labelValues === void 0 || e.labelValues.length === 0), m = i(() => e.labelValues.length > 0), c = i(() => e.labelAlign), f = (l) => {
+    } = v("ap-ladder"), u = h("ap-ladder"), r = A("uiMode", "aplus"), m = o(() => e.labelValues === void 0 || e.labelValues.length === 0), c = o(() => e.labelValues.length > 0), f = o(() => e.labelAlign), s = (l) => {
       l.link && window.open(l.link, "_blank"), typeof l.handleClickLink == "function" && l.handleClickLink();
-    }, t = () => n.title?.() || null;
-    return () => o("div", {
-      class: [a(), `${d(u.value)}`]
-    }, [r.value ? o(p, {
+    }, i = () => n.title?.() || null;
+    return () => t("div", {
+      class: [a(), `${d(r.value)}`, u.value]
+    }, [m.value ? t(k, {
       major: e.major,
       minor: e.minor,
       layout: e.layout
     }, {
-      title: n.title ? t : void 0
-    }) : m.value ? o(k, {
+      title: n.title ? i : void 0
+    }) : c.value ? t(b, {
       labelValues: e.labelValues || [],
-      labelAlign: c.value,
-      onHandleClick: f
+      labelAlign: f.value,
+      onHandleClick: s
     }, {
-      title: n.title ? t : void 0
+      title: n.title ? i : void 0
     }) : null]);
   }
 });
 export {
-  G as default
+  w as default
 };

package/es/src/business/ap-ladder/style/index.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/business/ap-ladder/style/index.mjs

@@ -0,0 +1,167 @@
+import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
+const i = (l) => {
+  const { componentCls: e } = l;
+  return {
+    [e]: {
+      position: "relative",
+      width: "inherit",
+      fontSize: l.fontSize,
+      lineHeight: l.lineHeight,
+      [`${e}__value-group-item`]: {
+        display: "flex",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        minWidth: 0
+      },
+      [`${e}__value-group-value-end`]: {
+        justifyContent: "flex-end"
+      },
+      [`${e}__value-group-label`]: {
+        display: "inline-block",
+        color: "#8896B0",
+        wordBreak: "break-all",
+        position: "relative",
+        justifyContent: "center"
+      },
+      [`${e}__value-group-label-semicolon`]: {
+        display: "inline-block",
+        padding: "0 3px"
+      },
+      [`${e}__value-group-value`]: {
+        color: "#182948",
+        wordBreak: "break-all",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
+      [`${e}__value-group-link`]: {
+        cursor: "pointer",
+        color: l.colorPrimary,
+        textDecoration: "none"
+      },
+      [`${e}__value-group-label-left`]: {
+        textAlign: "left"
+      },
+      [`${e}__value-group-label-right`]: {
+        textAlign: "right"
+      },
+      [`${e}__label-align-space-between`]: {
+        justifyContent: "space-between"
+      },
+      [`${e}-base`]: {
+        display: "flex"
+      },
+      [`${e}--vertical`]: {
+        flexDirection: "column",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        "> *": {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          minWidth: 0
+        }
+      },
+      [`${e}--horizontal`]: {
+        flexDirection: "row",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        "> *": {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          minWidth: 0
+        }
+      },
+      [`${e}__tooltip-item`]: {
+        display: "flex"
+      },
+      [`${e}__tooltip-label`]: {
+        whiteSpace: "nowrap",
+        wordBreak: "break-all"
+      },
+      [`${e}__tooltip-value`]: {
+        wordBreak: "break-all",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
+      [`${e}__cross-bar`]: {
+        display: "flex",
+        alignItems: "center"
+      },
+      [`${e}__ellipsis`]: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        wordBreak: "break-all"
+      },
+      [`${e}__help-message`]: {
+        display: "flex",
+        alignItems: "center",
+        marginInlineStart: "4px"
+      },
+      [`${e}__major`]: {
+        lineHeight: l.lineHeight,
+        color: "#182948"
+      },
+      [`${e}__minor`]: {
+        lineHeight: l.lineHeight,
+        color: "#8896B0"
+      },
+      [`${e}__label`]: {
+        display: "inline-block",
+        color: "#8896B0",
+        wordBreak: "break-all"
+      },
+      [`${e}__value`]: {
+        display: "#182948",
+        wordBreak: "break-all"
+      },
+      [`${e}__unit`]: {
+        color: "#182948"
+      },
+      [`${e}__link, ${e}__link a`]: {
+        cursor: "pointer",
+        color: l.colorPrimary,
+        textDecoration: "none"
+      },
+      "&--admin": {
+        [e]: {
+          "&__value-group-label": {
+            color: "#999"
+          },
+          "&__value-group-value": {
+            color: "#333"
+          },
+          "&__major": {
+            color: "#333"
+          },
+          "&__minor": {
+            color: "#999"
+          },
+          "&__label": {
+            color: "#999"
+          },
+          "&__value": {
+            color: "#333"
+          },
+          "&__unit": {
+            color: "#333"
+          },
+          "&__link": {
+            color: "#34b77c"
+          }
+        }
+      }
+    }
+  };
+}, a = o("ApLadder", (l) => [
+  i(l)
+]);
+export {
+  a as default
+};

package/es/src/business/ap-product-info/ApProductInfo.mjs

@@ -1,29 +1,30 @@
-import { defineComponent as f, h as t, createVNode as e, createTextVNode as v } from "vue";
+import { defineComponent as v, h as t, createVNode as e, createTextVNode as y } from "vue";
 import { ApProductInfoProps as g } from "./constans.mjs";
 import "../../config-provider/index.mjs";
-import { ApImage as y } from "../ap-image/index.mjs";
+import { ApImage as h } from "../ap-image/index.mjs";
 import { ApCopy as i } from "../ap-copy/index.mjs";
-import { Space as h, Tooltip as m } from "@aplus-frontend/antdv";
-import { IconApAdFillWarn as b } from "@aplus-frontend/icon";
-import { useNamespace as k } from "../../config-provider/hooks/use-namespace.mjs";
-import { useGlobalConfig as C } from "../../config-provider/hooks/use-global-config.mjs";
-const T = /* @__PURE__ */ f({
+import { Space as m, Tooltip as b } from "@aplus-frontend/antdv";
+import { IconApAdFillWarn as k } from "@aplus-frontend/icon";
+import C from "./style/index.mjs";
+import { useNamespace as A } from "../../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as w } from "../../config-provider/hooks/use-global-config.mjs";
+const B = /* @__PURE__ */ v({
   name: "ApProductInfo",
   props: g(),
   setup(r) {
     const {
-      b: s,
+      b: n,
       e: o,
       m: a
-    } = k("ap-product-info"), c = (l) => typeof l.value == "function" ? l.value() : l.helpMessage ? t(h.Compact, {}, [t(i, {
+    } = A("ap-product-info"), c = C("ap-product-info"), p = (l) => typeof l.value == "function" ? l.value() : l.helpMessage ? t(m.Compact, {}, [t(i, {
       text: l.value,
       link: l.link,
       textStyle: l.link ? "link" : "minor"
-    }), t(m, {
+    }), t(b, {
       placement: "top",
       color: l.toolTipBgColor,
       title: typeof l.helpMessage == "string" ? l.helpMessage : t(l.helpMessage)
-    }, () => t(b, {
+    }, () => t(k, {
       color: "#FFA940",
       style: {
         cursor: "pointer"
@@ -33,12 +34,12 @@ const T = /* @__PURE__ */ f({
       textStyle: l.link ? "link" : "minor",
       link: l.link,
       disableCopy: r.disableCopy
-    }, l.value), p = C("uiMode");
+    }, l.value), u = w("uiMode");
     return () => e("div", {
-      class: [s(), `${a(p.value)}`]
+      class: [n(), `${a(u.value)}`, c.value]
     }, [e("div", {
       class: o("img")
-    }, [e(y, {
+    }, [e(h, {
       src: r.imgSrc,
       width: 44,
       height: 44,
@@ -51,19 +52,19 @@ const T = /* @__PURE__ */ f({
       default: () => [r.title]
     }), e("div", {
       class: o("row-container")
-    }, [r.values.map((l, u) => {
-      const n = l.col === 2, d = l.col !== 2 && u % 2 === 0;
+    }, [r.values.map((l, d) => {
+      const s = l.col === 2, f = l.col !== 2 && d % 2 === 0;
       return e("div", {
         key: JSON.stringify(l),
-        class: [o("row-item"), a(n ? "full" : "half")]
+        class: [o("row-item"), a(s ? "full" : "half")]
       }, [e("div", {
         class: [o("item")]
       }, [l.label && e("div", {
         class: o("label")
-      }, [l.label, e("span", null, [v(":")])]), e("div", {
-        class: [o("value"), !n && a("overflow")],
+      }, [l.label, e("span", null, [y(":")])]), e("div", {
+        class: [o("value"), !s && a("overflow")],
         title: typeof l.value != "function" ? String(l.value || "") : ""
-      }, [c(l)])]), d && e("div", {
+      }, [p(l)])]), f && e("div", {
         class: o("divider"),
         style: {
           right: 0
@@ -75,5 +76,5 @@ const T = /* @__PURE__ */ f({
   }
 });
 export {
-  T as default
+  B as default
 };

package/es/src/business/ap-product-info/style/index.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/business/ap-product-info/style/index.mjs

@@ -0,0 +1,91 @@
+import { genComponentStyleHook as l } from "../../../utils/cssinjs/index.mjs";
+const i = (o) => {
+  const { componentCls: e } = o;
+  return {
+    [e]: {
+      display: "flex",
+      [`${e}__img`]: {
+        width: "44px",
+        height: "44px",
+        marginInlineEnd: "8px",
+        flexShrink: 0
+      },
+      [`${e}__content`]: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      [`${e}__row-container `]: {
+        display: "flex",
+        flexWrap: "wrap"
+      },
+      [`${e}__row-item`]: {
+        position: "relative",
+        display: "flex"
+      },
+      [`${e}__divider`]: {
+        width: "1px",
+        position: "relative",
+        height: "12px",
+        top: "50%",
+        margin: "-6px 16px 0px 0px",
+        zIndex: 1
+      },
+      [`${e}__divider-vertical`]: {
+        width: "1px",
+        height: "100%",
+        backgroundColor: "#E9EDF3",
+        position: "absolute",
+        transform: "translateX(-50%)"
+      },
+      [`${e}__item`]: {
+        display: "flex",
+        alignItems: "baseline"
+      },
+      [`${e}--full`]: {
+        width: "100%"
+      },
+      [`${e}__label`]: {
+        color: "#8896b0",
+        flexShrink: 0,
+        span: {
+          display: "inline-block",
+          padding: "0 2px"
+        }
+      },
+      [`${e}__value`]: {
+        maxWidth: "300px",
+        color: o.textColor3,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
+      [`${e}--link`]: {
+        color: "#0070ff",
+        cursor: "pointer"
+      },
+      "&--admin": {
+        [`${e}`]: {
+          "&__title": {
+            color: "#333"
+          },
+          "&__label": {
+            color: "#999"
+          },
+          "&__value": {
+            color: "#999"
+          },
+          "&--link": {
+            color: "rgb(0, 112, 255)"
+          }
+        }
+      }
+    }
+  };
+}, n = l("ApProductInfo", (o) => [
+  i(o)
+]);
+export {
+  n as default
+};

package/es/src/business/ap-radio-group/ap-radio-group.vue2.mjs

@@ -1,10 +1,11 @@
-import { defineComponent as y, ref as C, isVNode as k, h as r, watch as S, createElementBlock as n, openBlock as a, normalizeClass as c, unref as l, createVNode as b, withCtx as V, Fragment as _, renderList as w, normalizeStyle as B, createBlock as N, resolveDynamicComponent as z } from "vue";
-import { Flex as F } from "@aplus-frontend/antdv";
+import { defineComponent as C, ref as k, isVNode as S, h as r, watch as b, createElementBlock as i, openBlock as l, normalizeClass as c, unref as o, createVNode as V, withCtx as _, Fragment as w, renderList as B, normalizeStyle as N, createBlock as z, resolveDynamicComponent as F } from "vue";
+import { Flex as L } from "@aplus-frontend/antdv";
 import "../../config-provider/index.mjs";
 import "../../hooks/index.mjs";
-import { useNamespace as L } from "../../config-provider/hooks/use-namespace.mjs";
-import { useControllableValue as x } from "../../hooks/useControllableValue.mjs";
-const A = ["onClick"], q = /* @__PURE__ */ y({
+import x from "./style/index.mjs";
+import { useNamespace as A } from "../../config-provider/hooks/use-namespace.mjs";
+import { useControllableValue as D } from "../../hooks/useControllableValue.mjs";
+const E = ["onClick"], K = /* @__PURE__ */ C({
   name: "ApRadioGroup",
   __name: "ap-radio-group",
   props: {
@@ -18,44 +19,44 @@ const A = ["onClick"], q = /* @__PURE__ */ y({
   },
   emits: ["update:value", "change"],
   setup(m, { emit: d }) {
-    const { b: f, e: i } = L("ap-radio-group"), p = m, s = d, { value: u, updateValue: h } = x(
+    const { b: f, e: n } = A("ap-radio-group"), h = x("ap-radio-group"), p = m, s = d, { value: u, updateValue: g } = D(
       p,
       s
-    ), o = C(u.value), g = (e) => k(e) ? r(e) : typeof e == "function" ? r("span", e()) : r("span", e);
-    S(
+    ), a = k(u.value), y = (e) => S(e) ? r(e) : typeof e == "function" ? r("span", e()) : r("span", e);
+    b(
       () => u.value,
       (e) => {
-        e !== o.value && (o.value = e);
+        e !== a.value && (a.value = e);
       }
     );
     const v = (e) => {
-      o.value = e, setTimeout(() => {
-        h(e), s("change", e);
+      a.value = e, setTimeout(() => {
+        g(e), s("change", e);
       }, p.delay);
     };
-    return (e, D) => (a(), n("div", {
-      class: c([l(f)()])
+    return (e, G) => (l(), i("div", {
+      class: c([o(f)(), o(h)])
     }, [
-      b(l(F), {
+      V(o(L), {
         gap: e.optionStyle?.gap,
         wrap: "wrap"
       }, {
-        default: V(() => [
-          (a(!0), n(_, null, w(e.options.filter((t) => t.visible !== !1), (t) => (a(), n("div", {
+        default: _(() => [
+          (l(!0), i(w, null, B(e.options.filter((t) => t.visible !== !1), (t) => (l(), i("div", {
             key: t.value,
             class: c([
-              l(i)("item"),
-              o.value === t.value ? l(i)("item--active") : ""
+              o(n)("item"),
+              a.value === t.value ? o(n)("item--active") : ""
             ]),
-            style: B({
+            style: N({
               height: e.optionStyle?.height + "px",
               lineHeight: e.optionStyle?.height + "px",
               color: e.optionStyle?.color
             }),
-            onClick: (E) => v(t.value)
+            onClick: (H) => v(t.value)
           }, [
-            (a(), N(z(g(t.label))))
-          ], 14, A))), 128))
+            (l(), z(F(y(t.label))))
+          ], 14, E))), 128))
         ]),
         _: 1
       }, 8, ["gap"])
@@ -63,5 +64,5 @@ const A = ["onClick"], q = /* @__PURE__ */ y({
   }
 });
 export {
-  q as default
+  K as default
 };

package/es/src/business/ap-radio-group/style/index.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'vue';
+export type ApRadioGroupToken = {
+    apRadioGroupItemActiveBgColor: string;
+};
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/business/ap-radio-group/style/index.mjs

@@ -0,0 +1,35 @@
+import { genComponentStyleHook as a } from "../../../utils/cssinjs/index.mjs";
+const e = (o) => {
+  const { componentCls: r } = o;
+  return {
+    [r]: {
+      fontSize: o.fontSize,
+      padding: `${o.space} ${o.space} 0`,
+      backgroundColor: "#fff",
+      [`${r}__item`]: {
+        cursor: "pointer",
+        paddingInline: o.spaceLG,
+        borderRadius: o.borderRadius,
+        color: o.textColor1,
+        transition: "all 0.3s ease-in-out",
+        willChange: "background-color",
+        "&:hover": {
+          backgroundColor: o.colorBg2
+        },
+        "&--active": {
+          color: o.colorPrimary,
+          backgroundColor: `${o.apRadioGroupItemActiveBgColor} !important`
+        }
+      }
+    }
+  };
+}, l = a(
+  "ApRadioGroupToken",
+  (o) => [e(o)],
+  {
+    apRadioGroupItemActiveBgColor: "rgba(0, 112, 255, 0.12)"
+  }
+);
+export {
+  l as default
+};