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

package/es/src/business/ap-value-select-card/index.vue2.mjs

@@ -1,11 +1,12 @@
-import { defineComponent as z, ref as I, computed as T, createElementBlock as r, openBlock as a, normalizeStyle as A, normalizeClass as d, unref as s, createVNode as b, withCtx as V, createElementVNode as c, createCommentVNode as y, Fragment as N, renderList as R, withModifiers as f, renderSlot as u, createTextVNode as g, toDisplayString as h, createBlock as L } from "vue";
-import { Popover as j } from "@aplus-frontend/antdv";
-import { PlusOutlined as G, InfoCircleFilled as q } from "@ant-design/icons-vue";
-import { IconApAdLinePoor as J } from "@aplus-frontend/icon";
+import { defineComponent as L, ref as O, computed as T, createElementBlock as r, openBlock as d, normalizeStyle as A, normalizeClass as a, unref as s, createVNode as b, withCtx as V, createElementVNode as c, createCommentVNode as y, Fragment as N, renderList as R, withModifiers as f, renderSlot as u, createTextVNode as g, toDisplayString as h, createBlock as j } from "vue";
+import { Popover as G } from "@aplus-frontend/antdv";
+import { PlusOutlined as q, InfoCircleFilled as J } from "@ant-design/icons-vue";
+import { IconApAdLinePoor as Q } from "@aplus-frontend/icon";
 import "../../config-provider/index.mjs";
-import { useNamespace as Q } from "../../config-provider/hooks/use-namespace.mjs";
-import { useGlobalConfig as U } from "../../config-provider/hooks/use-global-config.mjs";
-const W = ["onClick"], X = { class: "label" }, Y = { class: "value" }, Z = ["onClick"], _ = ["onClick"], x = { class: "label" }, ee = { class: "value" }, te = { class: "text" }, re = /* @__PURE__ */ z({
+import U from "./style/index.mjs";
+import { useNamespace as W } from "../../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as X } from "../../config-provider/hooks/use-global-config.mjs";
+const Y = ["onClick"], Z = { class: "label" }, _ = { class: "value" }, x = ["onClick"], ee = ["onClick"], te = { class: "label" }, le = { class: "value" }, se = { class: "text" }, he = /* @__PURE__ */ L({
   name: "ApValueSelectCard",
   __name: "index",
   props: {
@@ -25,11 +26,11 @@ const W = ["onClick"], X = { class: "label" }, Y = { class: "value" }, Z = ["onC
   },
   emits: ["update:selectedKeys", "update:highlightedKeys", "change", "select", "remove", "highlight"],
   setup(v, { expose: F, emit: H }) {
-    const o = H, l = v, { b: n, m: D } = Q("ap-value-select-card"), E = U("uiMode", "aplus"), M = I(null), p = I(!1), K = T(() => l.options), C = T(() => K.value.filter(
+    const o = H, l = v, { b: n, m: D } = W("ap-value-select-card"), E = U("ap-value-select-card"), M = X("uiMode", "aplus"), P = O(null), p = O(!1), K = T(() => l.options), C = T(() => K.value.filter(
       (e) => l.selectedKeys.includes(e.key)
     )), B = (e) => l.selectedKeys.includes(e), S = (e) => l.highlightedKeys.includes(e), $ = (e) => {
-      l.selectedKeys.includes(e) ? k(e) : O(e);
-    }, O = (e) => {
+      l.selectedKeys.includes(e) ? k(e) : I(e);
+    }, I = (e) => {
       if (l.maxSelected && l.selectedKeys.length >= l.maxSelected)
         return;
       const i = [...l.selectedKeys, e];
@@ -52,7 +53,7 @@ const W = ["onClick"], X = { class: "label" }, Y = { class: "value" }, Z = ["onC
       else
         i = [...l.highlightedKeys, e];
       o("update:highlightedKeys", i), o("highlight", i);
-    }, P = (e) => {
+    }, z = (e) => {
       e || (p.value = e);
     };
     return F({
@@ -62,44 +63,44 @@ const W = ["onClick"], X = { class: "label" }, Y = { class: "value" }, Z = ["onC
       isSelected: B,
       isHighlighted: S,
       toggleOption: $,
-      addOption: O,
+      addOption: I,
       removeOption: k,
       highlightOption: w
-    }), (e, i) => (a(), r("div", {
-      class: d([s(n)(), `${s(D)(s(E))}`]),
+    }), (e, i) => (d(), r("div", {
+      class: a([s(n)(), `${s(D)(s(M))}`, s(E)]),
       style: A({
         ...e.wrapperStyle,
         "--ap-value-select-card-column-count": e.maxRowDisplay
       })
     }, [
-      b(s(j), {
+      b(s(G), {
         open: p.value,
         trigger: "click",
         placement: "bottomRight",
         arrow: !1,
         "get-popup-container": e.getContainer,
-        onOpenChange: P
+        onOpenChange: z
       }, {
         content: V(() => [
           c("div", {
-            class: d(s(n)("popover"))
+            class: a(s(n)("popover"))
           }, [
-            e.popoverTitle ? (a(), r("div", {
+            e.popoverTitle ? (d(), r("div", {
               key: 0,
-              class: d(s(n)("title"))
+              class: a(s(n)("title"))
             }, [
-              e.showTitleIcon ? (a(), L(s(q), {
+              e.showTitleIcon ? (d(), j(s(J), {
                 key: 0,
-                class: d(s(n)("title-icon"))
+                class: a(s(n)("title-icon"))
               }, null, 8, ["class"])) : y("", !0),
               g(" " + h(e.popoverTitle), 1)
             ], 2)) : y("", !0),
             c("div", {
-              class: d(s(n)("list"))
+              class: a(s(n)("list"))
             }, [
-              (a(!0), r(N, null, R(K.value, (t) => (a(), r("div", {
+              (d(!0), r(N, null, R(K.value, (t) => (d(), r("div", {
                 key: t.key,
-                class: d([
+                class: a([
                   s(n)("list-item"),
                   "all",
                   {
@@ -109,30 +110,30 @@ const W = ["onClick"], X = { class: "label" }, Y = { class: "value" }, Z = ["onC
                 ]),
                 onClick: f((m) => $(t.key), ["stop"])
               }, [
-                c("div", X, [
+                c("div", Z, [
                   u(e.$slots, "popover-label", { option: t }, () => [
                     g(h(t.label), 1)
                   ])
                 ]),
-                c("div", Y, [
+                c("div", _, [
                   u(e.$slots, "popover-value", { option: t }, () => [
                     g(h(t.value), 1)
                   ])
                 ])
-              ], 10, W))), 128))
+              ], 10, Y))), 128))
             ], 2)
           ], 2)
         ]),
         default: V(() => [
           c("div", {
-            class: d(s(n)("list"))
+            class: a(s(n)("list"))
           }, [
-            (a(!0), r(N, null, R(C.value, (t) => (a(), r("div", {
+            (d(!0), r(N, null, R(C.value, (t) => (d(), r("div", {
               key: t.key,
               ref_for: !0,
               ref_key: "listItemRef",
-              ref: M,
-              class: d([
+              ref: P,
+              class: a([
                 s(n)("list-item"),
                 {
                   select: S(t.key),
@@ -143,34 +144,34 @@ const W = ["onClick"], X = { class: "label" }, Y = { class: "value" }, Z = ["onC
               style: A(e.getCardStyle(t.key)),
               onClick: f((m) => w(t.key), ["stop"])
             }, [
-              e.showCloseIcon && (!(e.highlightedKeys.length === 1 && S(t.key)) && C.value.length > 1) ? (a(), r("div", {
+              e.showCloseIcon && (!(e.highlightedKeys.length === 1 && S(t.key)) && C.value.length > 1) ? (d(), r("div", {
                 key: 0,
-                class: d(s(n)("list-item-close")),
+                class: a(s(n)("list-item-close")),
                 onClick: f((m) => k(t.key), ["stop"])
               }, [
                 u(e.$slots, "close-icon", {}, () => [
-                  b(s(J))
+                  b(s(Q))
                 ])
-              ], 10, _)) : y("", !0),
-              c("div", x, [
+              ], 10, ee)) : y("", !0),
+              c("div", te, [
                 u(e.$slots, "label", { option: t }, () => [
                   g(h(t.label), 1)
                 ])
               ]),
-              c("div", ee, [
+              c("div", le, [
                 u(e.$slots, "value", { option: t }, () => [
                   g(h(t.value), 1)
                 ])
               ])
-            ], 14, Z))), 128)),
-            e.showAddButton && (!e.maxSelected || e.selectedKeys.length < e.maxSelected) ? (a(), r("div", {
+            ], 14, x))), 128)),
+            e.showAddButton && (!e.maxSelected || e.selectedKeys.length < e.maxSelected) ? (d(), r("div", {
               key: 0,
-              class: d([s(n)("list-item"), "choose"]),
+              class: a([s(n)("list-item"), "choose"]),
               onClick: i[0] || (i[0] = f((t) => p.value = !0, ["stop"]))
             }, [
               u(e.$slots, "add-button", {}, () => [
-                b(s(G)),
-                c("span", te, h(e.addButtonText), 1)
+                b(s(q)),
+                c("span", se, h(e.addButtonText), 1)
               ])
             ], 2)) : y("", !0)
           ], 2)
@@ -181,5 +182,5 @@ const W = ["onClick"], X = { class: "label" }, Y = { class: "value" }, Z = ["onC
   }
 });
 export {
-  re as default
+  he as default
 };

package/es/src/business/ap-value-select-card/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-value-select-card/style/index.mjs

@@ -0,0 +1,137 @@
+import { genComponentStyleHook as e } from "../../../utils/cssinjs/index.mjs";
+const l = (o) => {
+  const { componentCls: r } = o;
+  return {
+    [r]: {
+      position: "relative",
+      marginBlockStart: "8px",
+      ".ant-popover": {
+        width: "100%"
+      },
+      [`${r}-list`]: {
+        display: "grid",
+        gridTemplateColumns: "repeat(var(--ap-value-select-card-column-count, 5), minmax(var(--ap-value-select-card-max-width, 150px), 1fr))",
+        gridAutoRows: "1fr",
+        gap: "12px",
+        "&-item": {
+          position: "relative",
+          boxSizing: "border-box",
+          padding: "8px 16px",
+          color: o.textColor1,
+          border: `1px solid ${o.colorBg1}`,
+          borderRadius: o.borderRadius,
+          cursor: "pointer",
+          "&-close": {
+            position: "absolute",
+            top: "8px",
+            right: "10px",
+            zIndex: 1,
+            color: o.textColor3,
+            fontSize: o.fontSizeLG,
+            cursor: "pointer",
+            "&:hover": {
+              color: o.colorError
+            }
+          },
+          ".label": {
+            marginBlockEnd: "4px",
+            fontSize: o.fontSize,
+            lineHeight: o.lineHeight
+          },
+          ".value": {
+            overflow: "hidden",
+            fontWeight: "bold",
+            fontSize: o.fontSizeXL,
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis"
+          },
+          "&:hover:not(.select)": {
+            border: `1px solid ${o.colorPrimary}`
+          },
+          "&.select": {
+            color: o.textColor2,
+            borderColor: "transparent",
+            boxShadow: "3px 10px 30px -2px rgba(123, 121, 140, 0.15)",
+            background: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--ap-value-select-card-bg-color, #f5f9ff) 92%)",
+            "&:hover": {
+              background: "var(--ap-value-select-card-bg-color, #f5f9ff)"
+            }
+          },
+          "&.all": {
+            color: o.textColor1,
+            background: "#fff",
+            border: `1px solid ${o.colorBg1}`,
+            boxShadow: "none",
+            "&:hover:not(.disabled)": {
+              borderColor: o.colorPrimary
+            },
+            "&.disabled": {
+              color: "#8896b0",
+              background: "#f9f9fa",
+              cursor: "not-allowed",
+              border: `1px solid ${o.colorBg1}`
+            },
+            "&.select": {
+              background: "#f5f9ff",
+              borderColor: o.colorPrimary,
+              cursor: "pointer"
+            }
+          },
+          "&.choose": {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            color: o.colorPrimary,
+            background: "#fff",
+            border: "1px dashed #d1d7df",
+            boxShadow: "none",
+            ".text": {
+              fontSize: o.fontSize,
+              marginInlineStart: "4px"
+            }
+          }
+        }
+      },
+      [`${r}-title`]: {
+        display: "flex",
+        alignItems: "center",
+        marginBlockEnd: "12px",
+        color: "#526a90",
+        fontSize: o.fontSize,
+        "&-icon": {
+          marginRight: "4px",
+          color: "#abb7cc",
+          fontSize: o.fontSizeLG
+        }
+      },
+      "&--admin": {
+        [r]: {
+          "&-list": {
+            "&-item": {
+              "&.all": {
+                "&.select": {
+                  background: "#F7FCFA"
+                },
+                "&.disabled": {
+                  color: "#999"
+                }
+              }
+            }
+          },
+          "&-title": {
+            color: "#666",
+            "&-icon": {
+              color: "#BFBFBF"
+            }
+          }
+        }
+      }
+    }
+  };
+}, a = e("ApValueSelectCard", (o) => [
+  l(o)
+]);
+export {
+  a as default
+};

package/es/src/business/ap-view/ap-view.vue2.mjs

@@ -1,19 +1,20 @@
-import { defineComponent as $, computed as C, ref as p, createVNode as K, watch as U, createBlock as Y, openBlock as z, unref as y, mergeProps as M, withCtx as R, createElementVNode as q, normalizeClass as H } from "vue";
+import { defineComponent as U, computed as F, ref as y, createVNode as K, watch as Y, createBlock as z, openBlock as M, unref as u, mergeProps as R, withCtx as q, createElementVNode as H, normalizeClass as J } from "vue";
 import "../../config-provider/index.mjs";
-import J from "./icons/line-down.vue.mjs";
-import { ApBatchActionGroup as Q } from "../ap-batch-action-group/index.mjs";
+import Q from "./icons/line-down.vue.mjs";
+import { ApBatchActionGroup as X } from "../ap-batch-action-group/index.mjs";
 import "./components/main-button-content.vue.mjs";
 import "./components/menu-list-content.vue.mjs";
-import { useViewProvide as X } from "./hooks/use-view-provide.mjs";
-import { useInjectApTable as Z } from "../../ap-table/context.mjs";
-import { SYSTEM_VIEW_KEY as u } from "./utils/enum.mjs";
-import { isValid as ee } from "@aplus-frontend/utils";
-import { useGlobalConfig as te } from "../../config-provider/hooks/use-global-config.mjs";
-import { useNamespace as ae } from "../../config-provider/hooks/use-namespace.mjs";
-import { useLocale as ie } from "../../config-provider/hooks/use-locale.mjs";
-import se from "./components/main-button-content.vue2.mjs";
-import oe from "./components/menu-list-content.vue2.mjs";
-const Ke = /* @__PURE__ */ $({
+import { useViewProvide as Z } from "./hooks/use-view-provide.mjs";
+import { useInjectApTable as ee } from "../../ap-table/context.mjs";
+import { SYSTEM_VIEW_KEY as c } from "./utils/enum.mjs";
+import { isValid as te } from "@aplus-frontend/utils";
+import ae from "./style/index.mjs";
+import { useGlobalConfig as ie } from "../../config-provider/hooks/use-global-config.mjs";
+import { useNamespace as se } from "../../config-provider/hooks/use-namespace.mjs";
+import { useLocale as oe } from "../../config-provider/hooks/use-locale.mjs";
+import re from "./components/main-button-content.vue2.mjs";
+import ne from "./components/menu-list-content.vue2.mjs";
+const De = /* @__PURE__ */ U({
   name: "ApView",
   __name: "ap-view",
   props: {
@@ -37,71 +38,71 @@ const Ke = /* @__PURE__ */ $({
     },
     emptyData: {}
   },
-  setup(F, {
+  setup(I, {
     expose: N
   }) {
-    const s = F, _ = te("viewCacheOption"), {
-      b: V
-    } = ae("ap-view"), {
-      t: I
-    } = ie(), d = C(() => ({
-      viewKey: u,
-      viewName: I("ap.apView.systemView")
+    const s = I, _ = ie("viewCacheOption"), {
+      b: d
+    } = se("ap-view"), {
+      t: O
+    } = oe(), b = ae("ap-view"), V = F(() => ({
+      viewKey: c,
+      viewName: O("ap.apView.systemView")
     })), {
-      getSearchFormValues: O,
-      setSearchFormValues: L,
-      submit: x,
-      reset: B,
-      submitWith: E,
-      getSearchFormSorterItems: k,
-      setSearchFormSorterItems: A,
-      resetSearchFormSorterItems: P
-    } = Z(), T = p(!1), S = p(!1), w = p("");
-    let c = !1, b = !1;
-    const W = {
+      getSearchFormValues: L,
+      setSearchFormValues: x,
+      submit: B,
+      reset: E,
+      submitWith: k,
+      getSearchFormSorterItems: A,
+      setSearchFormSorterItems: P,
+      resetSearchFormSorterItems: T
+    } = ee(), W = y(!1), S = y(!1), v = y("");
+    let f = !1, g = !1;
+    const j = {
       dropdownType: "dropdown",
-      content: K(se, {
+      content: K(re, {
         maxViewNum: s.maxViewNum
       }, null)
-    }, i = p([d.value]), j = C(() => i.value.map((t) => ({
+    }, i = y([V.value]), G = F(() => i.value.map((t) => ({
       id: t.viewKey,
-      content: K(oe, {
+      content: K(ne, {
         view: t
       }, null)
     }))), r = {
-      getSearchFormValues: O,
-      setSearchFormValues: L,
-      submit: x,
-      reset: B,
-      submitWith: E,
-      getSearchFormSorterItems: k,
-      setSearchFormSorterItems: A,
-      resetSearchFormSorterItems: P,
+      getSearchFormValues: L,
+      setSearchFormValues: x,
+      submit: B,
+      reset: E,
+      submitWith: k,
+      getSearchFormSorterItems: A,
+      setSearchFormSorterItems: P,
+      resetSearchFormSorterItems: T,
       ...s.saveDataSource
-    }, v = {
+    }, p = {
       ..._.value,
       ...s.viewCacheOption
-    }, g = () => s.isDefaultSystemView ? u : (s.isFirstDefaultSystemView || b) && c ? u : i.value.find((a) => a.isDefault)?.viewKey ?? u, l = (t) => {
-      w.value = t;
-      const a = i.value.find((e) => e.viewKey === w.value);
+    }, D = () => s.isDefaultSystemView ? c : (s.isFirstDefaultSystemView || g) && f ? c : i.value.find((a) => a.isDefault)?.viewKey ?? c, l = (t) => {
+      v.value = t;
+      const a = i.value.find((e) => e.viewKey === v.value);
       a && setTimeout(() => {
-        a.viewKey === u ? c ? s.manual || r?.submitWith?.() : s.manual || (r?.resetSearchFormSorterItems?.(), r?.reset?.()) : (r?.setSearchFormValues?.({
+        a.viewKey === c ? f ? s.manual || r?.submitWith?.() : s.manual || (r?.resetSearchFormSorterItems?.(), r?.reset?.()) : (r?.setSearchFormValues?.({
           ...Object.fromEntries(Object.keys(r?.getSearchFormValues?.() ?? {}).map((e) => [e, void 0])) ?? {},
           ...s?.emptyData ?? {},
           ...r?.getSearchFormSorterItems?.()?.reduce((e, o) => (a.viewConfig?.searchForm?.[o.name] && (e[o.name] = a.viewConfig?.searchForm?.[o.name]), e), {}) ?? {}
-        }), r?.setSearchFormSorterItems?.(a.viewConfig?.sorterItems ?? []), c ? s.manual || r?.submitWith?.() : r?.submit?.()), c = !1;
+        }), r?.setSearchFormSorterItems?.(a.viewConfig?.sorterItems ?? []), f ? s.manual || r?.submitWith?.() : r?.submit?.()), f = !1;
       });
-    }, D = {
+    }, C = {
       getViewList: async (t) => {
         try {
           const {
             tableKey: a
-          } = t, e = await v?.getViewList?.({
+          } = t, e = await p?.getViewList?.({
             tableKey: a
           });
-          return i.value = [d.value, ...e ?? []], l(g()), i.value;
+          return i.value = [V.value, ...e ?? []], l(D()), i.value;
         } catch {
-          return i.value = [d.value], l(u), i.value;
+          return i.value = [V.value], l(c), i.value;
         }
       },
       addView: async (t) => {
@@ -110,14 +111,14 @@ const Ke = /* @__PURE__ */ $({
           viewKey: e,
           viewName: o,
           isDefault: n,
-          viewConfig: f
+          viewConfig: w
         } = t;
-        await v?.addView?.({
+        await p?.addView?.({
           tableKey: a,
           viewKey: e,
           viewName: o,
           isDefault: n,
-          viewConfig: f
+          viewConfig: w
         }), n && (i.value = i.value.map((m) => ({
           ...m,
           isDefault: !1
@@ -125,7 +126,7 @@ const Ke = /* @__PURE__ */ $({
           viewKey: e,
           viewName: o,
           isDefault: n,
-          viewConfig: f
+          viewConfig: w
         }], l(e);
       },
       changeView: async (t) => {
@@ -134,70 +135,70 @@ const Ke = /* @__PURE__ */ $({
           viewKey: e,
           viewName: o,
           isDefault: n,
-          viewConfig: f
+          viewConfig: w
         } = t;
-        await v?.changeView?.({
+        await p?.changeView?.({
           tableKey: a,
           viewKey: e,
           viewName: o,
           isDefault: n,
-          viewConfig: f
+          viewConfig: w
         }), n && (i.value = i.value.map((h) => ({
           ...h,
           isDefault: !1
         })));
         const m = i.value.find((h) => h.viewKey === e);
-        m && (m.viewName = o, m.isDefault = n, m.viewConfig = f), l(e);
+        m && (m.viewName = o, m.isDefault = n, m.viewConfig = w), l(e);
       },
       removeView: async (t) => {
         const {
           tableKey: a,
           viewKey: e
         } = t;
-        await v?.removeView?.({
+        await p?.removeView?.({
           tableKey: a,
           viewKey: e
-        }), i.value = i.value.filter((o) => o.viewKey !== e), e === w.value && l(g());
+        }), i.value = i.value.filter((o) => o.viewKey !== e), e === v.value && l(D());
       }
-    }, G = {
+    }, $ = {
       tableKey: s.tableKey,
-      currentViewKey: w,
+      currentViewKey: v,
       changeCurrentViewKey: l,
-      popoverOpen: T,
+      popoverOpen: W,
       menuOpen: S,
       viewList: i,
-      viewListCRUD: D,
+      viewListCRUD: C,
       saveDataSource: r
     };
-    return X(G), U(() => s.tableKey, (t) => {
-      ee(t) && (c = !0, D?.getViewList?.({
+    return Z($), Y(() => s.tableKey, (t) => {
+      te(t) && (f = !0, C?.getViewList?.({
         tableKey: t
       }));
     }, {
       immediate: !0
     }), N({
       setFirstDefaultSystemView: (t) => {
-        b = t;
+        g = t;
       }
-    }), (t, a) => (z(), Y(y(Q), M({
+    }), (t, a) => (M(), z(u(X), R({
       ...t.$attrs
     }, {
       open: S.value,
       "onUpdate:open": a[0] || (a[0] = (e) => S.value = e),
-      class: [y(V)()],
-      "button-props": W,
-      "menu-list": j.value,
-      "overlay-class-name": [y(V)("overlay")],
+      class: [u(d)(), u(b)],
+      "button-props": j,
+      "menu-list": G.value,
+      "overlay-class-name": [u(d)("overlay"), u(b)],
       trigger: "click",
       placement: "bottom"
     }), {
-      icon: R(() => [q("div", {
-        class: H([y(V)("icon")])
-      }, [K(J)], 2)]),
+      icon: q(() => [H("div", {
+        class: J([u(d)("icon")])
+      }, [K(Q)], 2)]),
       _: 1
     }, 16, ["open", "class", "menu-list", "overlay-class-name"]));
   }
 });
 export {
-  Ke as default
+  De as default
 };