@aplus-frontend/ui 0.6.0-beta.8 → 0.6.0

package/es/src/ap-form/search-form/components/popover-filter.vue2.mjs

@@ -1,10 +1,10 @@
-import { defineComponent as y, ref as k, createBlock as s, openBlock as l, unref as e, withCtx as o, createVNode as t, createElementVNode as d, normalizeClass as c, createElementBlock as C, Fragment as F, renderList as _, resolveDynamicComponent as b, createTextVNode as f, toDisplayString as v } from "vue";
-import { Popover as B, Tooltip as x, Button as u, Row as h, Col as L, Divider as N, Flex as S } from "@aplus-frontend/antdv";
-import { IconApFilterOutlined as w } from "@aplus-frontend/icon";
+import { defineComponent as C, ref as d, createBlock as c, openBlock as i, unref as e, withCtx as o, createVNode as t, normalizeClass as s, createElementVNode as g, createElementBlock as F, Fragment as _, renderList as B, resolveDynamicComponent as x, createTextVNode as v, toDisplayString as y } from "vue";
+import { Popover as h, Tooltip as L, Button as u, Row as N, Col as S, Divider as w, Flex as D } from "@aplus-frontend/antdv";
+import { IconApFilterOutlined as P } from "@aplus-frontend/icon";
 import "../../../config-provider/index.mjs";
-import { useNamespace as D } from "../../../config-provider/hooks/use-namespace.mjs";
-import { useLocale as P } from "../../../config-provider/hooks/use-locale.mjs";
-const O = /* @__PURE__ */ y({
+import { useNamespace as R } from "../../../config-provider/hooks/use-namespace.mjs";
+import { useLocale as T } from "../../../config-provider/hooks/use-locale.mjs";
+const U = /* @__PURE__ */ C({
   name: "ApFormSearchFormPopoverFilter",
   __name: "popover-filter",
   props: {
@@ -12,34 +12,34 @@ const O = /* @__PURE__ */ y({
     onSubmit: { type: Function },
     submitLoading: { type: Boolean }
   },
-  setup(T) {
-    const { e: a } = D("ap-form-search-form"), { t: i } = P(), m = k(!1);
-    function g(n) {
-      return n.closest(".ant-form") || document.body;
+  setup(V) {
+    const k = d(), { e: a, b: f } = R("ap-form-search-form"), { t: m } = T(), l = d(!1);
+    function b(r) {
+      return r.closest(".ant-form") || document.body;
     }
-    return (n, p) => (l(), s(e(B), {
-      open: m.value,
-      "onUpdate:open": p[1] || (p[1] = (r) => m.value = r),
+    return (r, p) => (i(), c(e(h), {
+      open: l.value,
+      "onUpdate:open": p[1] || (p[1] = (n) => l.value = n),
       "overlay-class-name": e(a)("popover"),
       trigger: "click",
       placement: "bottom",
       mask: "",
       "mask-style": { backgroundColor: "transparent" },
-      "get-popup-container": g
+      "get-popup-container": b
     }, {
       content: o(() => [
-        d("div", {
-          class: c([e(a)("popover-content")]),
+        g("div", {
+          class: s([e(a)("popover-content")]),
           style: { paddingBottom: "4px", width: "825px" }
         }, [
-          t(e(h), { gutter: 16 }, {
+          t(e(N), { gutter: 8 }, {
             default: o(() => [
-              (l(!0), C(F, null, _(n.config, (r) => (l(), s(e(L), {
-                key: r.key,
+              (i(!0), F(_, null, B(r.config, (n) => (i(), c(e(S), {
+                key: n.key,
                 span: 8
               }, {
                 default: o(() => [
-                  (l(), s(b(r.node)))
+                  (i(), c(x(n.node)))
                 ]),
                 _: 2
               }, 1024))), 128))
@@ -47,28 +47,28 @@ const O = /* @__PURE__ */ y({
             _: 1
           })
         ], 2),
-        t(e(N), { style: { margin: "0" } }),
-        d("div", {
-          class: c(e(a)("popover-footer"))
+        t(e(w), { style: { margin: "0" } }),
+        g("div", {
+          class: s(e(a)("popover-footer"))
         }, [
-          t(e(S), { justify: "end" }, {
+          t(e(D), { justify: "end" }, {
             default: o(() => [
               t(e(u), {
-                onClick: p[0] || (p[0] = (r) => m.value = !1)
+                onClick: p[0] || (p[0] = (n) => l.value = !1)
               }, {
                 default: o(() => [
-                  f(v(e(i)("ap.common.cancelText")), 1)
+                  v(y(e(m)("ap.common.cancelText")), 1)
                 ]),
                 _: 1
               }),
               t(e(u), {
-                class: c(e(a)("popover-footer-confirm-btn")),
+                class: s(e(a)("popover-footer-confirm-btn")),
                 type: "primary",
-                loading: n.submitLoading,
-                onClick: n.onSubmit
+                loading: r.submitLoading,
+                onClick: r.onSubmit
               }, {
                 default: o(() => [
-                  f(v(e(i)("ap.apForm.search.search")), 1)
+                  v(y(e(m)("ap.apForm.search.search")), 1)
                 ]),
                 _: 1
               }, 8, ["class", "loading", "onClick"])
@@ -78,17 +78,21 @@ const O = /* @__PURE__ */ y({
         ], 2)
       ]),
       default: o(() => [
-        t(e(x), {
-          title: e(i)("ap.apForm.search.moreFilter"),
+        t(e(L), {
+          title: e(m)("ap.apForm.search.moreFilter"),
           placement: "top"
         }, {
           default: o(() => [
-            t(e(u), null, {
+            t(e(u), {
+              ref_key: "triggerBtnRef",
+              ref: k,
+              class: s([e(f)("trigger-btn"), { [e(f)("trigger-btn-active")]: l.value }])
+            }, {
               icon: o(() => [
-                t(e(w))
+                t(e(P), { size: 14 })
               ]),
               _: 1
-            })
+            }, 8, ["class"])
           ]),
           _: 1
         }, 8, ["title"])
@@ -98,5 +102,5 @@ const O = /* @__PURE__ */ y({
   }
 });
 export {
-  O as default
+  U as default
 };

package/es/src/ap-form/search-form/components/popover-sorter/index.vue2.mjs

@@ -1,111 +1,117 @@
-import { defineComponent as N, ref as y, watch as T, unref as e, createBlock as B, openBlock as S, withCtx as t, createVNode as o, createElementVNode as s, normalizeClass as r, toDisplayString as p, createTextVNode as C } from "vue";
-import { Popover as D, Tooltip as P, Button as v, Flex as g, Divider as V } from "@aplus-frontend/antdv";
-import { IconApLayoutOutlined as j } from "@aplus-frontend/icon";
+import { defineComponent as S, ref as C, watch as k, unref as e, createBlock as D, openBlock as P, withCtx as a, createVNode as o, normalizeClass as r, createElementVNode as s, toDisplayString as m, createTextVNode as b } from "vue";
+import { Popover as V, Tooltip as j, Button as h, Flex as _, Divider as z } from "@aplus-frontend/antdv";
+import { IconApLayoutOutlined as A } from "@aplus-frontend/icon";
 import "../../../../config-provider/index.mjs";
-import A from "vuedraggable";
+import I from "vuedraggable";
 import "./sortable-item.vue.mjs";
-import { getStringName as I } from "../../../item-group/helper.mjs";
-import { useNamespace as k } from "../../../../config-provider/hooks/use-namespace.mjs";
-import { useLocale as L } from "../../../../config-provider/hooks/use-locale.mjs";
-import R from "./sortable-item.vue2.mjs";
-const M = /* @__PURE__ */ N({
+import { getStringName as L } from "../../../item-group/helper.mjs";
+import { useNamespace as F } from "../../../../config-provider/hooks/use-namespace.mjs";
+import { useLocale as R } from "../../../../config-provider/hooks/use-locale.mjs";
+import $ from "./sortable-item.vue2.mjs";
+const W = /* @__PURE__ */ S({
   name: "ApFormSearchFormPopoverSorter",
   __name: "index",
   props: {
     children: {},
-    onClickConfirm: { type: Function }
+    onClickConfirm: { type: Function },
+    sorted: { type: Boolean }
   },
-  setup(_) {
-    const i = _, c = y(i.children);
-    let h = [...i.children];
-    T(
-      () => i.children,
-      (n) => {
-        c.value = n, h = n;
+  setup(w) {
+    const l = w, c = C(l.children);
+    let v = [...l.children], g = [...l.children];
+    k(
+      () => l.children,
+      (t) => {
+        l.sorted || (c.value = t, g = t, v = t);
       }
     );
-    const { e: m } = k("ap-form-search-form"), { b: a } = k("search-form-sorter"), { t: l } = L(), f = y(!1);
-    function F(n) {
-      return n.closest(".ant-form") || document.body;
+    const { e: f, b: y } = F("ap-form-search-form"), { b: n } = F("search-form-sorter"), { t: i } = R(), p = C(!1);
+    function x(t) {
+      return t.closest(".ant-form") || document.body;
     }
-    function b() {
-      f.value = !1, console.log(e(c)), i.onClickConfirm(e(c));
+    function B() {
+      p.value = !1, v = [...e(c)], l.onClickConfirm(e(c));
     }
-    function x() {
-      c.value = [...h];
+    function N() {
+      c.value = [...g];
     }
-    function w(n) {
-      return I(n.props.name);
+    function T(t) {
+      return L(t.props.name);
     }
-    return (n, u) => (S(), B(e(D), {
-      open: f.value,
-      "onUpdate:open": u[1] || (u[1] = (d) => f.value = d),
-      "overlay-class-name": e(m)("popover"),
+    return k(
+      () => p.value,
+      (t) => {
+        t && (c.value = [...v]);
+      }
+    ), (t, u) => (P(), D(e(V), {
+      open: p.value,
+      "onUpdate:open": u[1] || (u[1] = (d) => p.value = d),
+      "overlay-class-name": e(f)("popover"),
       trigger: "click",
       placement: "bottom",
       mask: "",
       "mask-style": { backgroundColor: "transparent" },
-      "get-popup-container": F
+      "get-popup-container": x
     }, {
-      content: t(() => [
+      content: a(() => [
         s("div", {
-          class: r(e(a)("header"))
+          class: r(e(n)("header"))
         }, [
           s("span", {
-            class: r(e(a)("header-title"))
-          }, p(e(l)("ap.apForm.search.sorterTitle")), 3),
-          o(e(g), { justify: "space-between" }, {
-            default: t(() => [
+            class: r(e(n)("header-title"))
+          }, m(e(i)("ap.apForm.search.sorterTitle")), 3),
+          o(e(_), { justify: "space-between" }, {
+            default: a(() => [
               s("span", {
-                class: r(e(a)("header-desc"))
-              }, p(e(l)("ap.apForm.search.sorterDesc")), 3),
+                class: r(e(n)("header-desc"))
+              }, m(e(i)("ap.apForm.search.sorterDesc")), 3),
               s("div", {
-                class: r(e(a)("header-action-wrapper")),
-                onClick: x
+                class: r(e(n)("header-action-wrapper")),
+                onClick: N
               }, [
                 s("span", {
-                  class: r(e(a)("header-reset-btn"))
-                }, p(e(l)("ap.apForm.search.sorterReset")), 3)
+                  class: r(e(n)("header-reset-btn"))
+                }, m(e(i)("ap.apForm.search.sorterReset")), 3)
               ], 2)
             ]),
             _: 1
           })
         ], 2),
         s("div", {
-          class: r([e(m)("popover-content"), e(a)("content")])
+          class: r([e(f)("popover-content"), e(n)("content")])
         }, [
-          o(e(A), {
+          o(e(I), {
             list: c.value,
-            class: r(e(a)("sorter-wrapper")),
-            "item-key": w
+            class: r(e(n)("sorter-wrapper")),
+            "item-key": T
           }, {
-            item: t(({ element: d }) => [
-              o(R, { item: d }, null, 8, ["item"])
+            item: a(({ element: d }) => [
+              o($, { item: d }, null, 8, ["item"])
             ]),
             _: 1
           }, 8, ["list", "class"])
         ], 2),
-        o(e(V), { style: { margin: "0" } }),
+        o(e(z), { style: { margin: "0" } }),
         s("div", {
-          class: r(e(m)("popover-footer"))
+          class: r(e(f)("popover-footer"))
         }, [
-          o(e(g), { justify: "end" }, {
-            default: t(() => [
-              o(e(v), {
-                onClick: u[0] || (u[0] = (d) => f.value = !1)
+          o(e(_), { justify: "end" }, {
+            default: a(() => [
+              o(e(h), {
+                onClick: u[0] || (u[0] = (d) => p.value = !1)
               }, {
-                default: t(() => [
-                  C(p(e(l)("ap.common.cancelText")), 1)
+                default: a(() => [
+                  b(m(e(i)("ap.common.cancelText")), 1)
                 ]),
                 _: 1
               }),
-              o(e(v), {
-                class: r(e(m)("popover-footer-confirm-btn")),
+              o(e(h), {
+                class: r(e(f)("popover-footer-confirm-btn")),
                 type: "primary",
-                onClick: b
+                onClick: B
               }, {
-                default: t(() => [
-                  C(p(e(l)("ap.apForm.search.sorterConfirmBtn")), 1)
+                default: a(() => [
+                  b(m(e(i)("ap.apForm.search.sorterConfirmBtn")), 1)
                 ]),
                 _: 1
               }, 8, ["class"])
@@ -114,18 +120,20 @@ const M = /* @__PURE__ */ N({
           })
         ], 2)
       ]),
-      default: t(() => [
-        o(e(P), {
-          title: e(l)("ap.apForm.search.sorterTitle"),
+      default: a(() => [
+        o(e(j), {
+          title: e(i)("ap.apForm.search.sorterTitle"),
           placement: "top"
         }, {
-          default: t(() => [
-            o(e(v), null, {
-              icon: t(() => [
-                o(e(j))
+          default: a(() => [
+            o(e(h), {
+              class: r([e(y)("trigger-btn"), { [e(y)("trigger-btn-active")]: p.value }])
+            }, {
+              icon: a(() => [
+                o(e(A), { size: 14 })
               ]),
               _: 1
-            })
+            }, 8, ["class"])
           ]),
           _: 1
         }, 8, ["title"])
@@ -135,5 +143,5 @@ const M = /* @__PURE__ */ N({
   }
 });
 export {
-  M as default
+  W as default
 };

package/es/src/ap-form/search-form/hooks/use-count-per-row.mjs

@@ -1,17 +1,35 @@
-import { computed as c } from "vue";
-import { useBreakpoints as u } from "@vueuse/core";
-const t = [1, 2, 3, 4, 6, 8, 12, 24], P = (o) => {
-  const e = u({ sm: 0, md: 1280, lg: 1728 }).active();
-  return c(() => {
-    if (e.value === "lg") {
-      const n = t.findIndex(
-        (r) => r === o.countPerRow
-      );
-      return t[n + 1] || o.countPerRow;
-    }
-    return o.countPerRow;
+import { ref as w, watchEffect as a, computed as s, unref as i } from "vue";
+import { useResizeObserver as P } from "@vueuse/core";
+import { isUndefined as R } from "lodash-unified";
+const c = [1, 2, 3, 4, 6, 8, 12, 24], g = { xs: 0, sm: 768, md: 1280, lg: 1728 }, h = Object.entries(g).sort(
+  (t, r) => r[1] - t[1]
+), v = (t) => {
+  const r = w(0);
+  a(
+    (e) => {
+      const n = R(t.resizeTarget) ? document.documentElement : t.resizeTarget, { stop: o } = P(n, (f) => {
+        const m = f[0], { width: d } = m.contentRect;
+        r.value = d;
+      });
+      e(() => {
+        o();
+      });
+    },
+    { flush: "post" }
+  );
+  const u = s(() => {
+    for (const [e, n] of h)
+      if (i(r) > n)
+        return e;
+    return "md";
+  });
+  return s(() => {
+    const e = c.findIndex(
+      (o) => o === t.countPerRow
+    ), n = i(u);
+    return n === "lg" ? c[e + 1] || t.countPerRow : n === "xs" && c[e - 1] || t.countPerRow;
   });
 };
 export {
-  P as useCountPerRow
+  v as useCountPerRow
 };

package/es/src/ap-form/search-form/index.vue.d.ts

@@ -816,7 +816,7 @@ declare function __VLS_template(): {
             hideRequiredMark: boolean;
             validateOnRuleChange: boolean;
             syncToUrl: boolean | ((values: Recordable, type: "get" | "set") => Recordable);
-        }> & Omit<Readonly< ApFormProps> & Readonly<{}>, "validate" | "resetFields" | "clearValidate" | "validateFields" | "getFieldsValue" | "scrollToField" | "registerWatch" | "setFieldValue" | ("layout" | "colon" | "labelAlign" | "validateTrigger" | "hideRequiredMark" | "validateOnRuleChange" | "syncToUrl") | "setFieldsValue" | "getInternalInstance" | "validateFieldsReturnTransformed" | "getFieldsValueTransformed"> & ShallowUnwrapRef<{
+        }> & Omit<Readonly< ApFormProps> & Readonly<{}>, "validate" | "registerWatch" | "setFieldsValue" | "setFieldValue" | "resetFields" | "clearValidate" | "validateFields" | "getFieldsValue" | "scrollToField" | "getInternalInstance" | "validateFieldsReturnTransformed" | "getFieldsValueTransformed" | ("layout" | "colon" | "labelAlign" | "validateTrigger" | "hideRequiredMark" | "validateOnRuleChange" | "syncToUrl")> & ShallowUnwrapRef<{
             setFieldsValue: (fields: Partial<any>) => void;
             setFieldValue: (name: NamePath, value: any, triggerChange?: boolean, optimizeFn?: UpdateModelOptimizeFn) => void;
             resetFields: () => Promise<void>;
@@ -1651,7 +1651,7 @@ declare const __VLS_component: DefineComponent<ApFormSearchFormProps, {
         hideRequiredMark: boolean;
         validateOnRuleChange: boolean;
         syncToUrl: boolean | ((values: Recordable, type: "get" | "set") => Recordable);
-    }> & Omit<Readonly< ApFormProps> & Readonly<{}>, "validate" | "resetFields" | "clearValidate" | "validateFields" | "getFieldsValue" | "scrollToField" | "registerWatch" | "setFieldValue" | ("layout" | "colon" | "labelAlign" | "validateTrigger" | "hideRequiredMark" | "validateOnRuleChange" | "syncToUrl") | "setFieldsValue" | "getInternalInstance" | "validateFieldsReturnTransformed" | "getFieldsValueTransformed"> & ShallowUnwrapRef<{
+    }> & Omit<Readonly< ApFormProps> & Readonly<{}>, "validate" | "registerWatch" | "setFieldsValue" | "setFieldValue" | "resetFields" | "clearValidate" | "validateFields" | "getFieldsValue" | "scrollToField" | "getInternalInstance" | "validateFieldsReturnTransformed" | "getFieldsValueTransformed" | ("layout" | "colon" | "labelAlign" | "validateTrigger" | "hideRequiredMark" | "validateOnRuleChange" | "syncToUrl")> & ShallowUnwrapRef<{
         setFieldsValue: (fields: Partial<any>) => void;
         setFieldValue: (name: NamePath, value: any, triggerChange?: boolean, optimizeFn?: UpdateModelOptimizeFn) => void;
         resetFields: () => Promise<void>;