@aplus-frontend/ui 7.6.0 → 7.7.0

package/es/src/business/ap-view/components/menu-list-content.vue2.mjs

@@ -1,8 +1,8 @@
-import { defineComponent as T, ref as y, watch as $, createElementBlock as l, openBlock as m, normalizeClass as V, unref as e, createElementVNode as o, createCommentVNode as f, toDisplayString as c, createVNode as i, withModifiers as b, withCtx as r } from "vue";
+import { defineComponent as T, ref as y, watch as $, createElementBlock as m, openBlock as c, normalizeClass as V, unref as e, createElementVNode as o, createCommentVNode as f, toDisplayString as r, createVNode as i, withModifiers as b, withCtx as v } from "vue";
 import "../../../config-provider/index.mjs";
 import { useViewInject as B } from "../hooks/use-view-provide.mjs";
-import { SYSTEM_VIEW_KEY as h } from "../utils/enum.mjs";
-import { Space as C, Popconfirm as F } from "@aplus-frontend/antdv";
+import { SYSTEM_VIEW_KEY as C } from "../utils/enum.mjs";
+import { Space as h, Popconfirm as F } from "@aplus-frontend/antdv";
 import L from "../icons/line-delete.vue.mjs";
 import "../../ap-tag/index.mjs";
 import "../../../ap-form/ap-form.vue.mjs";
@@ -22,13 +22,13 @@ const U = { class: "menu-list-content-name" }, W = ["title"], q = {
     view: {}
   },
   setup(N) {
-    const { b: v } = j("ap-view"), d = P("ap-view"), { token: K } = Y(), { t: n } = A(), t = N, {
+    const { b: s } = j("ap-view"), d = P("ap-view"), { token: K } = Y(), { t: n } = A(), t = N, {
       currentViewKey: D,
       changeCurrentViewKey: S,
       viewListCRUD: p,
       tableKey: w,
       menuOpen: _
-    } = B(), s = y(!1), k = y(), g = () => {
+    } = B(), l = y(!1), k = y(), g = () => {
       S(t.view.viewKey), _.value = !1;
     }, E = () => {
       p?.changeView?.({
@@ -36,69 +36,70 @@ const U = { class: "menu-list-content-name" }, W = ["title"], q = {
         tableKey: w,
         isDefault: !0
       });
-    }, I = () => {
+    }, z = () => {
       p?.removeView?.({
         tableKey: w,
         viewKey: t.view.viewKey
       });
-    }, z = async () => {
+    }, I = async () => {
       const u = await k.value?.validate?.();
       p?.changeView?.({
         ...t.view,
         tableKey: w,
         viewName: u?.viewName || t.view.viewName
-      }), s.value = !1;
+      }), l.value = !1;
     };
     return $(
       () => _.value,
       (u) => {
-        u && (s.value = !1);
+        u && (l.value = !1);
       }
-    ), (u, a) => s.value === !1 ? (m(), l("div", {
+    ), (u, a) => l.value === !1 ? (c(), m("div", {
       key: 0,
       class: V({
-        [e(v)("menu-list-content")]: !0,
-        [e(v)("menu-list-content-active")]: t.view?.viewKey === e(D),
-        hashId: e(d)
+        [e(s)()]: !0,
+        [e(s)("menu-list-content")]: !0,
+        [e(s)("menu-list-content-active")]: t.view?.viewKey === e(D),
+        [e(d)]: !0
       }),
       onClick: g
     }, [
       o("div", U, [
         o("span", {
           title: t.view?.viewName
-        }, c(t.view?.viewName), 9, W)
+        }, r(t.view?.viewName), 9, W)
       ]),
-      t.view?.viewKey !== e(h) && t.view?.isDefault ? (m(), l("div", q, [
+      t.view?.viewKey !== e(C) && t.view?.isDefault ? (c(), m("div", q, [
         i(e(O), {
           text: e(n)("ap.apView.default"),
           size: "small",
           color: e(K).colorPrimary
         }, null, 8, ["text", "color"])
       ])) : f("", !0),
-      t.view?.viewKey !== e(h) ? (m(), l("div", {
+      t.view?.viewKey !== e(C) ? (c(), m("div", {
         key: 1,
         class: "menu-list-content-action",
         onClick: a[1] || (a[1] = b(() => {
         }, ["stop"]))
       }, [
-        i(e(C), { size: 8 }, {
-          default: r(() => [
+        i(e(h), { size: 8 }, {
+          default: v(() => [
             o("div", {
               class: "menu-list-content-action-text",
-              onClick: a[0] || (a[0] = (R) => s.value = !0)
-            }, c(e(n)("ap.apView.rename")), 1),
-            t.view?.isDefault ? f("", !0) : (m(), l("div", {
+              onClick: a[0] || (a[0] = (R) => l.value = !0)
+            }, r(e(n)("ap.apView.rename")), 1),
+            t.view?.isDefault ? f("", !0) : (c(), m("div", {
               key: 0,
               class: "menu-list-content-action-text",
               onClick: E
-            }, c(e(n)("ap.apView.setDefault")), 1)),
+            }, r(e(n)("ap.apView.setDefault")), 1)),
             o("div", G, [
               i(e(F), {
                 title: e(n)("ap.apView.deleteTip"),
                 "ok-text": e(n)("ap.apView.ok"),
-                onConfirm: I
+                onConfirm: z
               }, {
-                default: r(() => [
+                default: v(() => [
                   i(L)
                 ]),
                 _: 1
@@ -108,9 +109,9 @@ const U = { class: "menu-list-content-name" }, W = ["title"], q = {
           _: 1
         })
       ])) : f("", !0)
-    ], 2)) : (m(), l("div", {
+    ], 2)) : (c(), m("div", {
       key: 1,
-      class: V([e(v)("menu-list-content"), e(v)("menu-list-content-edit"), e(d)])
+      class: V([e(s)("menu-list-content"), e(s)("menu-list-content-edit"), e(d)])
     }, [
       i(x, {
         ref_key: "formRef",
@@ -119,24 +120,24 @@ const U = { class: "menu-list-content-name" }, W = ["title"], q = {
           viewName: t.view?.viewName
         }
       }, {
-        default: r(() => [
+        default: v(() => [
           o("div", H, [
-            i(e(C), { size: 8 }, {
-              default: r(() => [
+            i(e(h), { size: 8 }, {
+              default: v(() => [
                 i(x.FormItem, { name: "viewName" }, {
-                  default: r(() => [
+                  default: v(() => [
                     i(e(M).Text, { maxlength: 20 })
                   ]),
                   _: 1
                 }),
                 o("div", {
                   class: "menu-list-content-action-text",
-                  onClick: z
-                }, c(e(n)("ap.apView.save")), 1),
+                  onClick: I
+                }, r(e(n)("ap.apView.save")), 1),
                 o("div", {
                   class: "menu-list-content-action-text",
-                  onClick: a[2] || (a[2] = (R) => s.value = !1)
-                }, c(e(n)("ap.apView.cancel")), 1)
+                  onClick: a[2] || (a[2] = (R) => l.value = !1)
+                }, r(e(n)("ap.apView.cancel")), 1)
               ]),
               _: 1
             })

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

@@ -1,5 +1,9 @@
-import { BaseToken, GenStyleFunc } from '../../../design-token/interface';
+import { GenStyleFunc } from '../../../design-token/interface';
 import { ComputedRef } from 'vue';
-export declare const genApViewStyle: GenStyleFunc<BaseToken>;
+export type ApViewToken = {
+    apViewPopoverWidth: number;
+    apViewMenuListWidth: number;
+};
+export declare const genApViewStyle: GenStyleFunc<ApViewToken>;
 declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

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

@@ -1,44 +1,45 @@
 import { genComponentStyleHook as n } from "../../../utils/cssinjs/index.mjs";
-const o = (t) => {
-  const { componentCls: e } = t;
+const i = (e) => {
+  const { componentCls: t } = e;
   return {
-    [e]: {
+    [t]: {
       "& > .ant-btn": {
         padding: 0
       },
       "& > .ant-dropdown-trigger": {
-        color: t.textColor3
+        color: e.textColor3
       },
-      [`${e}-main-content`]: {
-        padding: "4px 8px",
+      [`${t}-main-content`]: {
+        paddingInline: e.space,
+        paddingBlock: e.spaceXS,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         "&-disabled": {
-          color: t.textColor4,
+          color: e.textColor4,
           cursor: "not-allowed"
         }
       },
-      [`${e}-icon`]: {
+      [`${t}-icon`]: {
         width: "100%",
         height: "100%",
-        fontSize: "14px",
+        fontSize: e.fontSizeLG,
         display: "flex",
         justifyContent: "center",
         alignItems: "center"
       }
     },
-    [`${e}-main-content-popover`]: {
-      width: "340px",
+    [`${t}-main-content-popover`]: {
+      width: e.apViewPopoverWidth,
       "&-title-content": {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        marginBottom: "8px",
+        marginBottom: e.space,
         "&-title": {
-          ontSize: "14px",
+          fontSize: e.fontSizeLG,
           fontWeight: 500,
-          lineHeight: "22px"
+          lineHeight: e.lineHeightLG
         },
         ".ant-form-item": {
           marginBottom: 0
@@ -52,9 +53,9 @@ const o = (t) => {
         }
       }
     },
-    [`${e}-overlay`]: {
+    [`${t}-overlay`]: {
       ".ant-dropdown-menu": {
-        padding: "8px",
+        padding: e.space,
         "&-item": {
           padding: "0 !important",
           "&:hover": {
@@ -62,22 +63,23 @@ const o = (t) => {
           }
         }
       },
-      [`${e}-menu-list-content`]: {
-        width: "250px",
+      [`${t}-menu-list-content`]: {
+        width: e.apViewMenuListWidth,
         display: "flex",
-        padding: "6px 8px",
+        paddingBlock: e.spaceSM,
+        paddingInline: e.space,
         alignItems: "center",
-        height: "32px",
+        height: e.calc(e.controlHeight).add(e.calc(e.lineWidth).mul(2)).equal(),
         ".menu-list-content-name": {
           overflow: "hidden",
           display: "block",
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
-          fontSize: "12px",
-          marginRight: "8px"
+          fontSize: e.fontSize,
+          marginInlineEnd: e.space
         },
         ".menu-list-content-default": {
-          marginRight: "8px",
+          marginInlineEnd: e.space,
           flexShrink: 0
         },
         ".menu-list-content-action": {
@@ -88,16 +90,16 @@ const o = (t) => {
           userSelect: "none",
           "&-text": {
             cursor: "pointer",
-            fontSize: "12px",
+            fontSize: e.fontSize,
             display: "flex",
             alignItems: "center",
-            color: t.colorPrimary
+            color: e.colorPrimary
           },
           "&-delete": {
             cursor: "pointer",
             display: "flex",
             alignItems: "center",
-            color: t.textColor3,
+            color: e.textColor3,
             svg: {
               outline: "none",
               boxShadow: "none"
@@ -116,27 +118,33 @@ const o = (t) => {
         },
         "&-edit": {
           background: "transparent !important",
-          padding: "0 8px",
+          paddingInline: e.space,
+          paddingBlock: 0,
           cursor: "default"
         },
         "&:hover": {
-          background: t.colorBg3,
+          background: e.colorBg3,
           ".menu-list-content-action": {
             display: "block"
           }
         }
       },
-      [`${e}-menu-list-content-active`]: {
+      [`${t}-menu-list-content-active`]: {
         ".menu-list-content-name": {
-          color: t.colorPrimary
+          color: e.colorPrimary
         }
       }
     }
   };
-}, r = n("ApView", (t) => [
-  o(t)
-]);
+}, a = n(
+  "ApView",
+  (e) => [i(e)],
+  {
+    apViewPopoverWidth: 340,
+    apViewMenuListWidth: 250
+  }
+);
 export {
-  r as default,
-  o as genApViewStyle
+  a as default,
+  i as genApViewStyle
 };

package/es/src/business/batch-input-group/index.vue.mjs

@@ -1,21 +1,22 @@
-import { defineComponent as T, ref as h, computed as u, unref as t, createElementBlock as $, openBlock as g, normalizeStyle as B, normalizeClass as b, createVNode as c, withCtx as A, createBlock as K, createCommentVNode as M, mergeProps as D } from "vue";
+import { defineComponent as T, ref as h, computed as r, unref as t, createElementBlock as $, openBlock as g, normalizeStyle as B, normalizeClass as b, createVNode as c, withCtx as A, createBlock as K, createCommentVNode as M, mergeProps as D } from "vue";
 import "../../ap-field/index.mjs";
 import { Space as G } from "@aplus-frontend/antdv";
 import "../../config-provider/index.mjs";
 import { isNumber as q, omit as H } from "lodash-unified";
 import "./popover-input/index.vue.mjs";
 import "../../hooks/index.mjs";
-import { isDef as Y } from "../../utils/index.mjs";
-import { useDefaultPlaceholder as J } from "../../ap-field/hooks/use-default-placeholder.mjs";
-import { splitValue as Q } from "./utils.mjs";
-import W from "./style/index.mjs";
-import { useControllableValue as X } from "../../hooks/useControllableValue.mjs";
-import { useLocale as Z } from "../../config-provider/hooks/use-locale.mjs";
-import { useNamespace as ee } from "../../config-provider/hooks/use-namespace.mjs";
+import "../../utils/index.mjs";
+import { useDefaultPlaceholder as Y } from "../../ap-field/hooks/use-default-placeholder.mjs";
+import { splitValue as J } from "./utils.mjs";
+import Q from "./style/index.mjs";
+import { useControllableValue as W } from "../../hooks/useControllableValue.mjs";
+import { useLocale as X } from "../../config-provider/hooks/use-locale.mjs";
+import { useNamespace as Z } from "../../config-provider/hooks/use-namespace.mjs";
+import { isDef as ee } from "../../utils/is.mjs";
 import te from "../../ap-field/select/index.vue.mjs";
 import { ApFieldText as oe } from "../../ap-field/text/index.mjs";
 import ne from "./popover-input/index.vue2.mjs";
-const m = "GROUP_SEARCH_ALL", Ae = /* @__PURE__ */ T({
+const m = "GROUP_SEARCH_ALL", Ve = /* @__PURE__ */ T({
   name: "BatchInputGroup",
   __name: "index",
   props: {
@@ -77,43 +78,43 @@ const m = "GROUP_SEARCH_ALL", Ae = /* @__PURE__ */ T({
   },
   emits: ["update:value"],
   setup(V, { emit: x }) {
-    const o = V, C = J("Text", o), S = x, { value: a, updateValue: r } = X(
+    const o = V, C = Y("Text", o), S = x, { value: a, updateValue: u } = W(
       o,
       S
-    ), s = h(), f = h(), { t: I } = Z(), { b: k, cssVar: U } = ee("batch-input-group"), d = W("batch-input-group"), w = u(() => {
+    ), s = h(), f = h(), { t: I } = X(), { b: k, cssVar: U } = Z("batch-input-group"), d = Q("batch-input-group"), w = r(() => {
       const e = o.popoverPlacement;
       return {
         "popover-left": q(e) ? `${e}px` : e === "left" ? "0px" : "unset",
         "popover-right": e === "right" ? "0px" : "unset"
       };
-    }), P = u(() => o.options ? o.options.length > 1 && o.hasAll ? [
+    }), P = r(() => o.options ? o.options.length > 1 && o.hasAll ? [
       { value: m, label: I("ap.common.all") },
       ...o.options
-    ] : o.options : []), R = u(() => o.options ? o.options.map((e) => e.value) : []), N = u(() => t(a)?.value?.length ? t(a).value.join(",") : ""), j = u(() => t(a)?.value?.length ? t(a).value.join(`
-`) : ""), E = u(() => {
+    ] : o.options : []), R = r(() => o.options ? o.options.map((e) => e.value) : []), N = r(() => t(a)?.value?.length ? t(a).value.join(",") : ""), j = r(() => t(a)?.value?.length ? t(a).value.join(`
+`) : ""), E = r(() => {
       const e = t(a)?.key;
       if (e?.length)
         return e.length === 1 || !o.hasAll ? e[0] : m;
-    }), F = u(() => {
+    }), F = r(() => {
       const e = t(a)?.key;
       return !e || e?.length <= 1 ? t(C) : (o.options || []).filter((n) => e.includes(n.value)).map((n) => n.label).join("/");
     });
     function L(e) {
-      const l = t(a) || {}, n = e === m ? t(R) : Y(e) ? [e] : [];
-      r({
+      const l = t(a) || {}, n = e === m ? t(R) : ee(e) ? [e] : [];
+      u({
         ...l,
         key: n
       });
     }
     function O(e) {
       const l = t(a) || {}, n = e.target.value || "";
-      let i = Q(n, ",", ",", o.maxNum);
+      let i = J(n, ",", ",", o.maxNum);
       if (n !== i) {
         const y = f.value?.$el?.querySelector("input");
         y && (y.value = i);
       }
       let p = i.split(",");
-      p.length === 1 && p[0] === "" && (p = []), r({
+      p.length === 1 && p[0] === "" && (p = []), u({
         ...l,
         value: p
       });
@@ -121,14 +122,14 @@ const m = "GROUP_SEARCH_ALL", Ae = /* @__PURE__ */ T({
     function _(e) {
       const l = t(a) || {};
       let n = e.split(/,|\n/);
-      r({
+      u({
         ...l,
         value: n
       });
     }
     function v() {
       const e = t(a) || {}, l = e.value?.filter(Boolean);
-      r({
+      u({
         ...e,
         value: l
       });
@@ -200,5 +201,5 @@ const m = "GROUP_SEARCH_ALL", Ae = /* @__PURE__ */ T({
   }
 });
 export {
-  Ae as default
+  Ve as default
 };

package/es/src/business/batch-input-group/style/index.mjs

@@ -9,7 +9,7 @@ const a = (o) => {
         alignItems: "center",
         [`${r}-trigger-icon`]: {
           cursor: "pointer",
-          fontSize: "16px",
+          fontSize: o.fontSizeXL,
           color: o.textColor2,
           lineHeight: 0,
           "&:hover": {
@@ -37,7 +37,7 @@ const a = (o) => {
         padding: 0
       },
       [`${r}__popover--content`]: {
-        padding: "12px",
+        padding: o.spaceLG,
         textarea: {
           padding: 0,
           resize: "none"

package/es/src/check-card/style/index.mjs

@@ -3,11 +3,11 @@ import { genComponentStyleHook as t } from "../../utils/cssinjs/index.mjs";
 const s = (e) => {
   const {
     componentCls: i,
-    checkCardDisabledOutlineColor: c,
-    checkCardIndicatorSize: d,
+    checkCardDisabledOutlineColor: l,
+    checkCardIndicatorSize: c,
     checkCardOutlineWidth: r,
-    checkCardIndicatorOffset: l
-  } = e, a = e.calc(d).mul(2).equal();
+    checkCardIndicatorOffset: d
+  } = e, a = e.calc(c).mul(2).equal();
   return {
     [`${i}`]: {
       ...o(e),
@@ -18,11 +18,11 @@ const s = (e) => {
         cursor: "not-allowed !important"
       },
       "&--bordered": {
-        outline: `1px solid ${e.borderColorBase}`
+        outline: `${e.lineWidth} ${e.lineType} ${e.borderColorBase}`
       },
       [`&:hover:not(${i}--disabled)`]: {
         cursor: "pointer",
-        outline: `1px solid ${e.colorPrimary}`
+        outline: `${e.lineWidth} ${e.lineType} ${e.colorPrimary}`
       },
       "&::after": {
         content: '""',
@@ -36,21 +36,21 @@ const s = (e) => {
         borderRadius: e.calc(e.borderRadius).add("2px").equal()
       },
       "&--checked": {
-        outline: `${r} solid ${e.colorPrimary}`,
+        outline: `${r} ${e.lineType} ${e.colorPrimary}`,
         [`&:hover:not(${i}--disabled)`]: {
-          outline: `${r} solid ${e.colorPrimary}`
+          outline: `${r} ${e.lineType} ${e.colorPrimary}`
         },
         "&::after": {
           width: a,
           height: a,
-          insetBlockStart: l,
-          insetInlineEnd: l,
+          insetBlockStart: d,
+          insetInlineEnd: d,
           transition: "width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), inset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
         },
         [`&${i}--disabled`]: {
-          outlineColor: c,
+          outlineColor: l,
           "&::after": {
-            backgroundColor: c
+            backgroundColor: l
           }
         }
       },
@@ -63,7 +63,7 @@ const s = (e) => {
       [`${i}__title`]: {
         ...o(e),
         marginBottom: e.spaceXS,
-        color: "#333",
+        color: e.textColor1,
         fontWeight: "bold",
         "&--disabled": {
           color: e.textColor4
@@ -71,7 +71,7 @@ const s = (e) => {
       },
       [`${i}__content`]: {
         ...o(e),
-        color: "#333",
+        color: e.textColor1,
         "&--disabled": {
           color: e.textColor4
         }
@@ -84,13 +84,13 @@ const s = (e) => {
         lineHeight: 1,
         userSelect: "none",
         "& > img": {
-          width: e.calc(d).sub(r).equal(),
+          width: e.calc(c).sub(r).equal(),
           verticalAlign: "top"
         }
       }
     }
   };
-}, h = t(
+}, u = t(
   "CheckCard",
   (e) => [s(e)],
   {
@@ -102,5 +102,5 @@ const s = (e) => {
   }
 );
 export {
-  h as default
+  u as default
 };

package/es/src/design-token/constants.mjs

@@ -27,10 +27,12 @@ const o = {
   fontSize: 12,
   fontSizeLG: 14,
   fontSizeXL: 16,
+  fontSizeXXL: 20,
   lineHeightSM: 16,
   lineHeight: 18,
   lineHeightLG: 22,
   borderRadiusXS: 1,
+  borderRadiusSM: 2,
   borderRadius: 4,
   spaceXXS: 2,
   spaceXS: 4,
@@ -44,7 +46,13 @@ const o = {
   scrollbarThumbColorHover: "#959ca7",
   scrollbarTrackColorHover: "#f2f6f9",
   tableHeaderBg: "#f2f6f9",
-  lineClamp: 2
+  lineClamp: 2,
+  motionDurationFast: "0.1s",
+  motionDurationMid: "0.2s",
+  motionDurationSlow: "0.3s",
+  lineWidth: 1,
+  lineType: "solid",
+  controlHeight: 30
 };
 export {
   o as defaultToken