@das-fed/upf-ui 6.4.0-dev.238 → 6.4.0-dev.240

package/packages/components/pagination/index.js

@@ -1,27 +1,26 @@
 import '@das-fed/upf-ui/packages/components/pagination/style.css';
-import { defineComponent as B, openBlock as c, createElementBlock as f, createElementVNode as N, ref as T, computed as g, createBlock as D, withCtx as C, createVNode as v, Fragment as U, renderList as H, normalizeClass as h, createTextVNode as L, toDisplayString as x, unref as t, withDirectives as J, reactive as K, watch as Q, onMounted as W, nextTick as X, createCommentVNode as P, mergeProps as Y, isRef as V, renderSlot as Z } from "vue";
+import { defineComponent as D, openBlock as p, createElementBlock as f, createElementVNode as N, ref as T, computed as g, createBlock as B, withCtx as C, createVNode as v, Fragment as U, renderList as H, normalizeClass as y, createTextVNode as O, toDisplayString as x, unref as t, withDirectives as J, reactive as K, watch as Q, onMounted as W, nextTick as X, createCommentVNode as P, mergeProps as Y, isRef as V, renderSlot as Z } from "vue";
 import { withInstall as ee } from "@das-fed/upf-utils/with-install/index";
 import { t as S, currentLang as ae, setI18nRule as te } from "@das-fed/upf-web/packages/i18n/index";
-import { DasAutoRegisterIcon as oe, DasIcon as b } from "@das-fed/upf-ui/packages/components/icon/index";
-import { ElConfigProvider as le, ElPagination as ne } from "element-plus";
+import { DasAutoRegisterIcon as le, DasIcon as b } from "@das-fed/upf-ui/packages/components/icon/index";
+import { ElConfigProvider as oe, ElPagination as ne } from "element-plus";
 import "element-plus/es/components/pagination/style/css";
-import { useModelValue as O } from "@das-fed/upf-utils/vue";
+import { useModelValue as A } from "@das-fed/upf-utils/vue";
 import se from "element-plus/dist/locale/zh-cn.mjs";
 import ie from "element-plus/dist/locale/en.mjs";
-import { ElIcon as re, ElDropdownItem as pe, ElDropdownMenu as ce, ElDropdown as ue } from "element-plus/es";
+import { ElIcon as re, ElDropdownItem as ue, ElDropdownMenu as pe, ElDropdown as ce } from "element-plus/es";
 import "element-plus/es/components/base/style/css";
 import "element-plus/es/components/dropdown/style/css";
 import "element-plus/es/components/dropdown-menu/style/css";
 import "element-plus/es/components/dropdown-item/style/css";
 import "element-plus/es/components/icon/style/css";
 import { vDasTooltip as de } from "@das-fed/upf-ui/packages/components/text-tooltip/index";
-import { setThemeRule as ge } from "@das-fed/upf-web/packages/theme/index";
 /*! Element Plus Icons Vue v2.3.2 */
-var me = /* @__PURE__ */ B({
+var ge = /* @__PURE__ */ D({
   name: "ArrowDown",
   __name: "arrow-down",
-  setup(o) {
-    return (_, s) => (c(), f("svg", {
+  setup(l) {
+    return (_, s) => (p(), f("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 1024 1024"
     }, [
@@ -31,30 +30,30 @@ var me = /* @__PURE__ */ B({
       })
     ]));
   }
-}), ve = me;
-const fe = { class: "sizes-dropdown-link" }, _e = { class: "current-page-size" }, ze = {
+}), me = ge;
+const ve = { class: "sizes-dropdown-link" }, fe = { class: "current-page-size" }, _e = {
   name: "DasPaginationSizes"
-}, Ce = /* @__PURE__ */ B({
-  ...ze,
+}, ze = /* @__PURE__ */ D({
+  ..._e,
   props: {
     pageSizes: { default: () => [20, 50, 100] },
     pageSize: { default: 20 }
   },
   emits: ["update:pageSize", "size-change"],
-  setup(o, { emit: _ }) {
-    const s = o, l = _, k = T(!1), m = g({
+  setup(l, { emit: _ }) {
+    const s = l, o = _, k = T(!1), m = g({
       get: () => s.pageSize,
-      set: (u) => {
-        l("update:pageSize", u);
+      set: (c) => {
+        o("update:pageSize", c);
       }
-    }), i = (u) => {
-      k.value = u;
-    }, E = (u) => {
-      m.value = u, l("size-change", u);
+    }), i = (c) => {
+      k.value = c;
+    }, E = (c) => {
+      m.value = c, o("size-change", c);
     };
-    return (u, M) => {
-      const z = re, w = pe, e = ce, d = ue;
-      return c(), D(d, {
+    return (c, M) => {
+      const z = re, h = ue, e = pe, d = ce;
+      return p(), B(d, {
         "popper-class": "pagination-sizes-popper",
         trigger: "click",
         onVisibleChange: i,
@@ -63,16 +62,16 @@ const fe = { class: "sizes-dropdown-link" }, _e = { class: "current-page-size" }
         dropdown: C(() => [
           v(e, null, {
             default: C(() => [
-              (c(!0), f(
+              (p(!0), f(
                 U,
                 null,
-                H(o.pageSizes, (r) => (c(), D(w, {
-                  class: h(["sizes-item", r === o.pageSize ? "selected" : ""]),
+                H(l.pageSizes, (r) => (p(), B(h, {
+                  class: y(["sizes-item", r === l.pageSize ? "selected" : ""]),
                   key: r,
                   command: r
                 }, {
                   default: C(() => [
-                    L(
+                    O(
                       x(t(S)("pagination-items_per_page", r)),
                       1
                       /* TEXT */
@@ -90,9 +89,9 @@ const fe = { class: "sizes-dropdown-link" }, _e = { class: "current-page-size" }
           })
         ]),
         default: C(() => [
-          N("span", fe, [
-            J((c(), f("span", _e, [
-              L(
+          N("span", ve, [
+            J((p(), f("span", fe, [
+              O(
                 x(t(S)("pagination-items_per_page", m.value)),
                 1
                 /* TEXT */
@@ -101,10 +100,10 @@ const fe = { class: "sizes-dropdown-link" }, _e = { class: "current-page-size" }
               [t(de)]
             ]),
             v(z, {
-              class: h(["arrow-icon", k.value ? "rotate180" : ""])
+              class: y(["arrow-icon", k.value ? "rotate180" : ""])
             }, {
               default: C(() => [
-                v(t(ve))
+                v(t(me))
               ]),
               _: 1
               /* STABLE */
@@ -116,35 +115,35 @@ const fe = { class: "sizes-dropdown-link" }, _e = { class: "current-page-size" }
       });
     };
   }
-}), R = (o, _) => {
-  const s = o.__vccOpts || o;
-  for (const [l, k] of _)
-    s[l] = k;
+}), R = (l, _) => {
+  const s = l.__vccOpts || l;
+  for (const [o, k] of _)
+    s[o] = k;
   return s;
-}, ke = /* @__PURE__ */ R(Ce, [["__scopeId", "data-v-43e2e3e7"]]), he = { class: "total-page" }, we = {
+}, Ce = /* @__PURE__ */ R(ze, [["__scopeId", "data-v-3b9e5b1e"]]), ke = { class: "total-page" }, ye = {
   name: "TotalPage"
-}, ye = /* @__PURE__ */ B({
-  ...we,
+}, he = /* @__PURE__ */ D({
+  ...ye,
   props: {
     totalPage: {}
   },
-  setup(o) {
-    return (_, s) => (c(), f(
+  setup(l) {
+    return (_, s) => (p(), f(
       "div",
-      he,
-      x(t(S)("pagination-total_page", o.totalPage)),
+      ke,
+      x(t(S)("pagination-total_page", l.totalPage)),
       1
       /* TEXT */
     ));
   }
-}), xe = /* @__PURE__ */ R(ye, [["__scopeId", "data-v-1bfe159a"]]), Se = { class: "das-ui-pagination" }, $e = {
+}), we = /* @__PURE__ */ R(he, [["__scopeId", "data-v-c314d3d0"]]), xe = { class: "das-ui-pagination" }, Se = {
   key: 0,
-  style: { color: "#212121", "font-size": "12px" }
-}, Pe = {
+  style: { color: "var(--upf-text-primary)", "font-size": "12px" }
+}, $e = {
   key: 1,
   style: { "margin-left": "12px" },
   class: "page-container flex-center__y"
-}, be = { class: "flex-center__y" }, Ne = { class: "flex-center__y" }, De = /* @__PURE__ */ B({
+}, Pe = { class: "flex-center__y" }, be = { class: "flex-center__y" }, Ne = /* @__PURE__ */ D({
   __name: "Pagination",
   props: {
     modelValue: { default: 1 },
@@ -159,9 +158,9 @@ const fe = { class: "sizes-dropdown-link" }, _e = { class: "current-page-size" }
     popperClass: {}
   },
   emits: ["update:modelValue", "update:pageSize", "size-change", "current-change", "prev-click", "next-click", "first-click", "last-click"],
-  setup(o, { emit: _ }) {
-    const s = o, l = _;
-    oe({
+  setup(l, { emit: _ }) {
+    const s = l, o = _;
+    le({
       "arrow-first": import("@das-fed/upf-ui/packages/icons/arrow-first"),
       left: import("@das-fed/upf-ui/packages/icons/left"),
       right: import("@das-fed/upf-ui/packages/icons/right"),
@@ -172,11 +171,11 @@ const fe = { class: "sizes-dropdown-link" }, _e = { class: "current-page-size" }
       pre: !1,
       next: !1,
       last: !1
-    }), E = g(() => s.layout), u = g(() => s.background), M = g(() => s.pageSizes), z = g(() => s.total), w = g(() => s.simple), e = O(s, "modelValue"), d = O(s, "pageSize"), r = g(() => Math.ceil(z.value / d.value)), I = g(() => w.value ? "prev, slot, next" : E.value || "total,jumper,slot,sizes"), A = g(() => I.value.replace(/\s*/g, "").split(",").filter((a) => a !== "total" && a !== "sizes").join(",")), j = (n) => {
-      l("update:pageSize", n), l("size-change", n);
-    }, y = (n) => {
-      l("update:modelValue", n), l("current-change", n);
-    }, F = () => l("prev-click", e.value), q = () => l("next-click", e.value), G = () => {
+    }), E = g(() => s.layout), c = g(() => s.background), M = g(() => s.pageSizes), z = g(() => s.total), h = g(() => s.simple), e = A(s, "modelValue"), d = A(s, "pageSize"), r = g(() => Math.ceil(z.value / d.value)), I = g(() => h.value ? "prev, slot, next" : E.value || "total,jumper,slot,sizes"), L = g(() => I.value.replace(/\s*/g, "").split(",").filter((a) => a !== "total" && a !== "sizes").join(",")), j = (n) => {
+      o("update:pageSize", n), o("size-change", n);
+    }, w = (n) => {
+      o("update:modelValue", n), o("current-change", n);
+    }, F = () => o("prev-click", e.value), q = () => o("next-click", e.value), G = () => {
       i.first = r.value === 0 || e.value <= 1, i.pre = r.value === 0 || e.value <= 1, i.next = r.value === 0 || e.value === r.value, i.last = r.value === 0 || e.value === r.value;
     };
     Q(
@@ -189,111 +188,111 @@ const fe = { class: "sizes-dropdown-link" }, _e = { class: "current-page-size" }
       }
     );
     const $ = (n, a) => {
-      const p = /* @__PURE__ */ new Map([
+      const u = /* @__PURE__ */ new Map([
         [
           "first",
           () => {
-            e.value <= 1 || (e.value = 1, y(e.value), l("first-click", e.value));
+            e.value <= 1 || (e.value = 1, w(e.value), o("first-click", e.value));
           }
         ],
         [
           "pre",
           () => {
-            e.value <= 1 || (e.value--, y(e.value), l("prev-click", e.value));
+            e.value <= 1 || (e.value--, w(e.value), o("prev-click", e.value));
           }
         ],
         [
           "next",
           () => {
-            e.value !== z.value && (e.value++, y(e.value), l("next-click", e.value));
+            e.value !== z.value && (e.value++, w(e.value), o("next-click", e.value));
           }
         ],
         [
           "last",
           () => {
-            e.value !== z.value && (e.value = r.value, y(e.value), l("last-click", e.value));
+            e.value !== z.value && (e.value = r.value, w(e.value), o("last-click", e.value));
           }
         ]
       ]);
       if (a) return;
-      p.get(n)();
+      u.get(n)();
     };
     return W(() => {
       X(() => {
-        var n, a, p;
-        (n = m.value) != null && n.$el && ((a = m.value.$el) != null && a.getElementsByClassName("el-pagination__goto")[0] && (m.value.$el.getElementsByClassName("el-pagination__goto")[0].innerText = S("第")), (p = m.value.$el) != null && p.getElementsByClassName("el-pagination__classifier")[0] && (m.value.$el.getElementsByClassName("el-pagination__classifier")[0].innerText = S("页")));
+        var n, a, u;
+        (n = m.value) != null && n.$el && ((a = m.value.$el) != null && a.getElementsByClassName("el-pagination__goto")[0] && (m.value.$el.getElementsByClassName("el-pagination__goto")[0].innerText = S("第")), (u = m.value.$el) != null && u.getElementsByClassName("el-pagination__classifier")[0] && (m.value.$el.getElementsByClassName("el-pagination__classifier")[0].innerText = S("页")));
       });
-    }), (n, a) => (c(), f("div", Se, [
-      I.value.includes("total") ? (c(), D(t(xe), {
+    }), (n, a) => (p(), f("div", xe, [
+      I.value.includes("total") ? (p(), B(t(we), {
         key: 0,
         "total-page": r.value,
         style: { "margin-right": "12px" }
       }, null, 8, ["total-page"])) : P("v-if", !0),
-      v(t(le), { locale: k.value }, {
+      v(t(oe), { locale: k.value }, {
         default: C(() => [
           v(t(ne), Y({
             ref_key: "dasPagination",
             ref: m,
-            class: { background: u.value, simple: w.value },
+            class: { background: c.value, simple: h.value },
             currentPage: t(e),
-            "onUpdate:currentPage": a[4] || (a[4] = (p) => V(e) ? e.value = p : null),
+            "onUpdate:currentPage": a[4] || (a[4] = (u) => V(e) ? e.value = u : null),
             "page-size": t(d),
-            "onUpdate:pageSize": a[5] || (a[5] = (p) => V(d) ? d.value = p : null),
+            "onUpdate:pageSize": a[5] || (a[5] = (u) => V(d) ? d.value = u : null),
             "page-sizes": M.value,
-            layout: A.value,
+            layout: L.value,
             total: z.value,
-            small: o.small,
-            background: u.value,
-            disabled: o.disabled,
-            "popper-class": o.popperClass ? `das-pagination-popper ${o.popperClass}` : "das-pagination-popper",
+            small: l.small,
+            background: c.value,
+            disabled: l.disabled,
+            "popper-class": l.popperClass ? `das-pagination-popper ${l.popperClass}` : "das-pagination-popper",
             teleported: !1,
-            onCurrentChange: y,
+            onCurrentChange: w,
             onPrevClick: F,
             onNextClick: q
           }, n.$attrs), {
             default: C(() => [
-              A.value.includes("slot") ? Z(n.$slots, "default", { key: 0 }, () => [
-                n.$slots.default ? P("v-if", !0) : (c(), f(
+              L.value.includes("slot") ? Z(n.$slots, "default", { key: 0 }, () => [
+                n.$slots.default ? P("v-if", !0) : (p(), f(
                   U,
                   { key: 0 },
                   [
-                    w.value ? (c(), f(
+                    h.value ? (p(), f(
                       "div",
-                      $e,
+                      Se,
                       x(t(e)) + "/" + x(Math.ceil(z.value / t(d))),
                       1
                       /* TEXT */
-                    )) : (c(), f("div", Pe, [
-                      N("div", be, [
+                    )) : (p(), f("div", $e, [
+                      N("div", Pe, [
                         v(t(b), {
-                          class: h(["page-icon", i.first ? "disabled" : ""]),
+                          class: y(["page-icon", i.first ? "disabled" : ""]),
                           icon: "arrow-first",
-                          iconColor: "#666666",
+                          iconColor: "var(--upf-text-secondary)",
                           size: "medium",
-                          onClick: a[0] || (a[0] = (p) => $("first", i.first))
+                          onClick: a[0] || (a[0] = (u) => $("first", i.first))
                         }, null, 8, ["class"]),
                         v(t(b), {
-                          class: h(["page-icon", i.pre ? "disabled" : ""]),
+                          class: y(["page-icon", i.pre ? "disabled" : ""]),
                           icon: "left",
-                          iconColor: "#666666",
+                          iconColor: "var(--upf-text-secondary)",
                           size: "medium",
-                          onClick: a[1] || (a[1] = (p) => $("pre", i.pre))
+                          onClick: a[1] || (a[1] = (u) => $("pre", i.pre))
                         }, null, 8, ["class"])
                       ]),
-                      N("div", Ne, [
+                      N("div", be, [
                         v(t(b), {
-                          class: h(["page-icon", i.next ? "disabled" : ""]),
+                          class: y(["page-icon", i.next ? "disabled" : ""]),
                           icon: "right",
-                          iconColor: "#666666",
+                          iconColor: "var(--upf-text-secondary)",
                           size: "medium",
-                          onClick: a[2] || (a[2] = (p) => $("next", i.next))
+                          onClick: a[2] || (a[2] = (u) => $("next", i.next))
                         }, null, 8, ["class"]),
                         v(t(b), {
-                          class: h(["page-icon", i.last ? "disabled" : ""]),
+                          class: y(["page-icon", i.last ? "disabled" : ""]),
                           icon: "arrow-last",
-                          iconColor: "#666666",
+                          iconColor: "var(--upf-text-secondary)",
                           size: "medium",
-                          onClick: a[3] || (a[3] = (p) => $("last", i.last))
+                          onClick: a[3] || (a[3] = (u) => $("last", i.last))
                         }, null, 8, ["class"])
                       ])
                     ]))
@@ -310,33 +309,25 @@ const fe = { class: "sizes-dropdown-link" }, _e = { class: "current-page-size" }
         _: 3
         /* FORWARDED */
       }, 8, ["locale"]),
-      I.value.includes("sizes") ? (c(), D(t(ke), {
+      I.value.includes("sizes") ? (p(), B(t(Ce), {
         key: 1,
         "page-sizes": M.value,
         pageSize: t(d),
-        "onUpdate:pageSize": a[6] || (a[6] = (p) => V(d) ? d.value = p : null),
+        "onUpdate:pageSize": a[6] || (a[6] = (u) => V(d) ? d.value = u : null),
         onSizeChange: j
       }, null, 8, ["page-sizes", "pageSize"])) : P("v-if", !0)
     ]));
   }
-}), Be = /* @__PURE__ */ R(De, [["__scopeId", "data-v-fdc0943d"]]), Ee = {
-  "--das-ui-pagination-simple-border-color": "#D9D9D9",
-  "--das-ui-pagination-size-color": "#212121",
-  "--das-ui-pagination-size--icon-hover-color": "#3761CA",
-  "--das-ui-pagination-size--poppver-item-hover-bg-color": "#f5f5f5",
-  "--das-ui-pagination-size--poppver-item-click-color": "#5582f3",
-  "--das-ui-pagination-totalpage-color": "#666666"
-}, Me = {
+}), Be = /* @__PURE__ */ R(Ne, [["__scopeId", "data-v-4e64aa5f"]]), De = {
   第: { "zh-CN": "第", en: "No.", "zh-MO": "第", _appCode: "framework" },
   页: { "zh-CN": "页", en: "page", "zh-MO": "頁", _appCode: "framework" },
   "pagination-total_page": { "zh-CN": "共$0页", en: "Total $0", "zh-MO": "共$0頁", _appCode: "framework" },
   "pagination-items_per_page": { "zh-CN": "$0条/页", en: "$0 Records/Page", "zh-MO": "$0條/頁", _appCode: "framework" }
 };
-te(Me);
-ge(Ee);
-const Ye = () => T(null), Ze = ee(Be);
+te(De);
+const Qe = () => T(null), We = ee(Be);
 export {
-  Ze as DasPagination,
-  Ye as DasPaginationRef,
-  Ze as default
+  We as DasPagination,
+  Qe as DasPaginationRef,
+  We as default
 };

package/packages/components/pagination/src/Pagination.vue.d.ts

@@ -6,8 +6,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (currentPage: number) => any;
-    "current-change": (pageSize: number) => any;
     "size-change": (currentPage: number) => any;
+    "current-change": (pageSize: number) => any;
     "update:pageSize": (pageSize: number) => any;
     "prev-click": (currentPage: number) => any;
     "next-click": (currentPage: number) => any;
@@ -15,8 +15,8 @@ declare const __VLS_component: import("vue").DefineComponent<PaginationProps, {}
     "last-click": (currentPage: number) => any;
 }, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
     "onUpdate:modelValue"?: ((currentPage: number) => any) | undefined;
-    "onCurrent-change"?: ((pageSize: number) => any) | undefined;
     "onSize-change"?: ((currentPage: number) => any) | undefined;
+    "onCurrent-change"?: ((pageSize: number) => any) | undefined;
     "onUpdate:pageSize"?: ((pageSize: number) => any) | undefined;
     "onPrev-click"?: ((currentPage: number) => any) | undefined;
     "onNext-click"?: ((currentPage: number) => any) | undefined;

package/packages/components/pagination/style.css

@@ -1 +1 @@
-.sizes-dropdown-link[data-v-43e2e3e7]{display:flex;align-items:center;margin-left:12px}.sizes-dropdown-link .arrow-icon[data-v-43e2e3e7]{font-size:14px;transition:transform .3s}.sizes-dropdown-link .rotate180[data-v-43e2e3e7]{transform:rotate(180deg)}.sizes-dropdown-link .current-page-size[data-v-43e2e3e7]{font-size:12px;color:var(--das-ui-pagination-size-color);margin-right:9px}.sizes-dropdown-link:hover .arrow-icon[data-v-43e2e3e7]{color:var(--das-ui-pagination-size--icon-hover-color)}.pagination-sizes-popper{min-width:108px}.pagination-sizes-popper .el-popper__arrow{display:none}.pagination-sizes-popper .sizes-item.el-dropdown-menu__item{display:flex;justify-content:flex-end;padding-right:24px;font-size:12px;color:var(--das-ui-pagination-size-color)}.pagination-sizes-popper .sizes-item.el-dropdown-menu__item:hover{color:var(--das-ui-pagination-size-color);background-color:var(--das-ui-pagination-size--poppver-item-hover-bg-color)}.pagination-sizes-popper .sizes-item.el-dropdown-menu__item.selected{color:var(--das-ui-pagination-size--poppver-item-click-color);font-weight:400}.pagination-sizes-popper .sizes-item.el-dropdown-menu__item.selected :hover{color:var(--das-ui-pagination-size--poppver-item-click-color)}.total-page[data-v-1bfe159a]{font-size:12px;color:var(--das-ui-pagination-totalpage-color)}.das-ui-pagination .flex-center__y[data-v-fdc0943d]{display:flex;align-items:center}.das-ui-pagination[data-v-fdc0943d]{display:flex;align-items:center;--el-color-primary: var(--das-ui-button-primary);padding:0}.das-ui-pagination[data-v-fdc0943d] .el-pagination__classifier,.das-ui-pagination[data-v-fdc0943d] .el-pagination__editor{margin-left:4px}.das-ui-pagination[data-v-fdc0943d] .el-pagination__jump{margin-left:12px}.das-ui-pagination[data-v-fdc0943d] .el-pagination__jump .el-input__wrapper.is-focus,.das-ui-pagination[data-v-fdc0943d] .el-pagination__jump .el-input__wrapper:hover{box-shadow:0 0 0 1px var(--das-ui-pagination-size--poppver-item-click-color) inset}.das-ui-pagination[data-v-fdc0943d] .el-select .el-input__wrapper{box-shadow:none!important}.das-ui-pagination[data-v-fdc0943d] .el-select .el-input{width:85px}.das-ui-pagination[data-v-fdc0943d] .el-select .el-input .el-select__caret{color:#666;margin-left:0}.das-ui-pagination[data-v-fdc0943d] .el-pagination__sizes{display:flex;flex-direction:column;justify-content:center;margin-left:0;margin-right:0}.das-ui-pagination.simple[data-v-fdc0943d]{border:1px solid var(--das-ui-pagination-simple-border-color);background:#fff}.das-ui-pagination.simple[data-v-fdc0943d]:hover{border-color:var(--das-ui-button-primary)}.das-ui-pagination .page-container .page-icon[data-v-fdc0943d]{cursor:pointer;margin-right:8px}.das-ui-pagination .page-container .page-icon[data-v-fdc0943d]:hover,.das-ui-pagination .page-container .page-icon[data-v-fdc0943d]:active{fill:var(--das-ui-pagination-size--poppver-item-click-color)}.das-ui-pagination .page-container .page-icon.disabled[data-v-fdc0943d]{cursor:not-allowed;fill:#b2b2b2}
+.sizes-dropdown-link[data-v-3b9e5b1e]{display:flex;align-items:center;margin-left:12px}.sizes-dropdown-link .arrow-icon[data-v-3b9e5b1e]{font-size:14px;transition:transform .3s}.sizes-dropdown-link .rotate180[data-v-3b9e5b1e]{transform:rotate(180deg)}.sizes-dropdown-link .current-page-size[data-v-3b9e5b1e]{font-size:12px;color:var(--upf-text-primary);margin-right:9px}.sizes-dropdown-link:hover .arrow-icon[data-v-3b9e5b1e]{color:var(--upf-color-primary)}.pagination-sizes-popper{min-width:108px}.pagination-sizes-popper .el-popper__arrow{display:none}.pagination-sizes-popper .sizes-item.el-dropdown-menu__item{display:flex;justify-content:flex-end;padding-right:24px;font-size:12px;color:var(--upf-text-primary)}.pagination-sizes-popper .sizes-item.el-dropdown-menu__item:hover{color:var(--upf-text-primary);background-color:var(--upf-bg-secondary)}.pagination-sizes-popper .sizes-item.el-dropdown-menu__item.selected{color:var(--upf-color-primary);background-color:var(--upf-color-primary-bg);font-weight:400}.pagination-sizes-popper .sizes-item.el-dropdown-menu__item.selected :hover{color:var(--upf-color-primary)}.total-page[data-v-c314d3d0]{font-size:12px;color:var(--upf-text-secondary)}.das-ui-pagination .flex-center__y[data-v-4e64aa5f]{display:flex;align-items:center}.das-ui-pagination[data-v-4e64aa5f]{display:flex;align-items:center;--el-color-primary: var(--upf-color-primary);padding:0}.das-ui-pagination[data-v-4e64aa5f] .el-pagination__classifier,.das-ui-pagination[data-v-4e64aa5f] .el-pagination__editor{margin-left:4px}.das-ui-pagination[data-v-4e64aa5f] .el-pagination__jump{margin-left:12px}.das-ui-pagination[data-v-4e64aa5f] .el-pagination__jump .el-input__wrapper.is-focus,.das-ui-pagination[data-v-4e64aa5f] .el-pagination__jump .el-input__wrapper:hover{box-shadow:0 0 0 1px var(--upf-color-primary) inset}.das-ui-pagination[data-v-4e64aa5f] .el-select .el-input__wrapper{box-shadow:none!important}.das-ui-pagination[data-v-4e64aa5f] .el-select .el-input{width:85px}.das-ui-pagination[data-v-4e64aa5f] .el-select .el-input .el-select__caret{color:var(--upf-text-secondary);margin-left:0}.das-ui-pagination[data-v-4e64aa5f] .el-pagination__sizes{display:flex;flex-direction:column;justify-content:center;margin-left:0;margin-right:0}.das-ui-pagination.simple[data-v-4e64aa5f]{border:1px solid var(--upf-border-color);background:var(--upf-bg-primary)}.das-ui-pagination.simple[data-v-4e64aa5f]:hover{border-color:var(--upf-color-primary)}.das-ui-pagination .page-container .page-icon[data-v-4e64aa5f]{cursor:pointer;margin-right:8px}.das-ui-pagination .page-container .page-icon[data-v-4e64aa5f]:hover,.das-ui-pagination .page-container .page-icon[data-v-4e64aa5f]:active{fill:var(--upf-color-primary)}.das-ui-pagination .page-container .page-icon.disabled[data-v-4e64aa5f]{cursor:not-allowed;fill:var(--upf-text-disabled)}.das-ui-pagination[data-v-4e64aa5f] .el-dropdown-menu__item:not(.is-disabled):focus{background-color:var(--upf-bg-primary)}