@para-ui/core 5.0.0-beta.1 → 5.0.0-beta.2

package/es/Transfer/index.js

@@ -2,10 +2,10 @@ import { j as r } from "../_virtual/jsx-runtime.js";
 import { useState as p, useCallback as g, useEffect as I } from "react";
 import Q from "clsx";
 import { Button as m } from "../Button/index.js";
-import V from "@para-ui/icons/Left";
-import W from "@para-ui/icons/Right";
-import X from "@para-ui/icons/Up";
-import Y from "@para-ui/icons/Down";
+import { Left as V } from "../node_modules/@para-ui/icons/Left/index.js";
+import { Right as W } from "../node_modules/@para-ui/icons/Right/index.js";
+import { Up as X } from "../node_modules/@para-ui/icons/Up/index.js";
+import { Down as Y } from "../node_modules/@para-ui/icons/Down/index.js";
 import Z from "../GlobalContext/useFormatMessage.js";
 import _ from "./lang/index.js";
 import { $prefixCls as j } from "../GlobalContext/constant.js";
@@ -17,19 +17,19 @@ const ge = ($) => {
     data: C = [],
     value: B,
     customKey: h = "key",
-    onChange: x,
-    titles: v = [u({ id: "left" }), u({ id: "right" })],
+    onChange: b,
+    titles: D = [u({ id: "left" }), u({ id: "right" })],
     // ['左侧', '右侧']
     className: F,
-    style: D = { width: "298px" },
+    style: L = { width: "298px" },
     onSort: E,
     trim: M = !1,
-    multiple: L = !0,
-    rightIcon: N,
+    multiple: v = !0,
+    rightIcon: w,
     render: q = (c) => {
     },
     disabled: l
-  } = $, [n, k] = p([]), [s, i] = p([]), [w, J] = p([]), [f, K] = p([]), [z, oe] = p(), [G, se] = p(), [O, T] = p(!1), A = g(
+  } = $, [n, k] = p([]), [s, i] = p([]), [N, J] = p([]), [f, K] = p([]), [z, oe] = p(), [G, se] = p(), [O, T] = p(!1), A = g(
     (c, o, t, e, a) => {
       e === "left" ? (!a && n.forEach((d) => d.checked = !1), n[t].checked = o, k([...n])) : (!a && s.forEach((d) => d.checked = !1), s[t].checked = o, i([...s]));
     },
@@ -43,7 +43,7 @@ const ge = ($) => {
       }), i([...s]));
     },
     [n, s]
-  ), y = g(
+  ), U = g(
     (c) => {
       c === "left" ? (n.forEach((o) => {
         !o.disabled && !o.hide && !l && (o.checked = !o.checked);
@@ -52,7 +52,7 @@ const ge = ($) => {
       }), i([...s]));
     },
     [n, s]
-  ), b = (c) => {
+  ), x = (c) => {
     let o = [];
     c === "left" ? (o = [...s], o.forEach((e) => {
       e?.checked && !e?.hide && (e.checked = !1, n.push(e), s.splice(s.indexOf(e), 1));
@@ -62,8 +62,8 @@ const ge = ($) => {
     const t = [];
     s.forEach((e) => {
       t.push(e[h]);
-    }), x?.(t);
-  }, P = (c) => {
+    }), b?.(t);
+  }, y = (c) => {
     T(!0), c == "up" ? i((o) => {
       f.forEach((e) => {
         o.splice(e - 1, 0, ...o.splice(e, 1));
@@ -71,7 +71,7 @@ const ge = ($) => {
       const t = [];
       return o.forEach((e) => {
         t.push(e[h]);
-      }), E?.([...t]), x?.([...t]), [...o];
+      }), E?.([...t]), b?.([...t]), [...o];
     }) : i((o) => {
       f.reverse().forEach((e) => {
         o.splice(e + 1, 0, ...o.splice(e, 1));
@@ -79,9 +79,9 @@ const ge = ($) => {
       const t = [];
       return o.forEach((e) => {
         t.push(e[h]);
-      }), E?.([...t]), x?.([...t]), [...o];
+      }), E?.([...t]), b?.([...t]), [...o];
     });
-  }, U = te((c, o) => {
+  }, P = te((c, o) => {
     const t = M ? c.toUpperCase().trim() : c.toUpperCase();
     o === "left" ? (n.forEach((e) => {
       e.hide = !1;
@@ -98,7 +98,7 @@ const ge = ($) => {
       const e = [];
       return t.forEach((a) => {
         e.push(a[h]);
-      }), E?.([...e]), x?.([...e]), [...t];
+      }), E?.([...e]), b?.([...e]), [...t];
     });
   }, []);
   return I(() => {
@@ -125,18 +125,18 @@ const ge = ($) => {
     /* @__PURE__ */ r.jsx(
       R,
       {
-        title: v[0],
+        title: D[0],
         queryAll: S,
         data: n,
-        style: D,
+        style: L,
         direction: "left",
         customKey: h,
-        rightIcon: N,
+        rightIcon: w,
         onchange: A,
-        multiple: L,
-        onMove: b,
-        inverse: y,
-        onSearch: U
+        multiple: v,
+        onMove: x,
+        inverse: U,
+        onSearch: P
       }
     ),
     /* @__PURE__ */ r.jsxs("div", { className: "moveBtn", children: [
@@ -144,14 +144,14 @@ const ge = ($) => {
         m.IconButton,
         {
           className: "btn btn-right",
-          disabled: w.length <= 0 || l,
-          toolTipTitle: w.length <= 0 ? u({ id: "rightBtnTips" }) : "",
+          disabled: N.length <= 0 || l,
+          toolTipTitle: N.length <= 0 ? u({ id: "rightBtnTips" }) : "",
           TooltipProps: {
             arrow: !1,
             placement: "bottomLeft"
           },
           onClick: () => {
-            b("right");
+            x("right");
           },
           children: /* @__PURE__ */ r.jsx(W, {})
         }
@@ -167,7 +167,7 @@ const ge = ($) => {
             placement: "bottomLeft"
           },
           onClick: () => {
-            P("up");
+            y("up");
           },
           children: /* @__PURE__ */ r.jsx(X, {})
         }
@@ -183,7 +183,7 @@ const ge = ($) => {
             placement: "bottomLeft"
           },
           onClick: () => {
-            P("down");
+            y("down");
           },
           children: /* @__PURE__ */ r.jsx(Y, {})
         }
@@ -199,7 +199,7 @@ const ge = ($) => {
             placement: "bottomLeft"
           },
           onClick: () => {
-            b("left");
+            x("left");
           },
           children: /* @__PURE__ */ r.jsx(V, {})
         }
@@ -208,21 +208,21 @@ const ge = ($) => {
     /* @__PURE__ */ r.jsx(
       R,
       {
-        title: v[1],
+        title: D[1],
         queryAll: S,
         data: s,
-        style: D,
+        style: L,
         direction: "right",
         customKey: h,
-        rightIcon: N,
+        rightIcon: w,
         onchange: A,
-        multiple: L,
-        onMove: b,
-        inverse: y,
+        multiple: v,
+        onMove: x,
+        inverse: U,
         fluctuationPosition: z,
         fluctuationOrther: G,
         onEndSort: H,
-        onSearch: U
+        onSearch: P
       }
     )
   ] }) });

package/es/Transfer/style/css.d.ts

@@ -0,0 +1 @@
+export {};

package/es/Transfer/style/css.js

@@ -0,0 +1 @@
+import './index.css';

package/es/Transfer/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/Transfer/style/index.js

@@ -0,0 +1 @@
+import './index.scss';

package/es/Transfer/style/index.scss

@@ -0,0 +1,215 @@
+@use "../../styles/theme" as *;
+
+.#{$prefixCls}-transfer {
+  display: flex;
+  font-size: 14px;
+  user-select: none;
+
+
+  .blue-background-class {
+    background-color: $NPT05;
+  }
+
+  .drag-item {
+    background: $NA4 !important;
+    box-shadow: $ND3;
+  }
+
+  .box {
+    border-radius: $radius;
+    border: 1px solid $NA1;
+    overflow: hidden;
+
+    .box-header {
+      background: $NA3;
+      color: $NT1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-left: 10px;
+      height: 36px;
+      border-bottom: 1px solid $NA1;
+    }
+
+    .count {
+      color: $NT1;
+      letter-spacing: 1px;
+    }
+
+    .context {
+      height: 400px;
+      overflow: auto;
+      margin-top: 4px;
+
+      .item-fluctuation {
+        animation: flucturation 0.4s forwards;
+      }
+
+      .item-fluctuationOrther {
+        animation: flucturationOrther 0.5s forwards;
+      }
+
+      .item {
+        padding: 0px 10px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        &.item-checked {
+          &:hover {
+            background-color: $NA3 !important;
+          }
+
+          & > .item-label {
+            color: $NP1;
+          }
+        }
+
+        & > .item-label {
+          flex: 1;
+          overflow: hidden;
+          color: $NT1;
+        }
+
+        &:hover {
+          background-color: $NA3;
+        }
+
+        &.item-disabled {
+          &:hover {
+            background: inherit;
+            cursor: no-drop;
+          }
+
+          & > .item-label {
+            color: $NT3;
+          }
+        }
+
+        .handle {
+          margin-left: 8px;
+          display: flex;
+          align-content: center;
+
+          .handle-line {
+            height: 12px;
+            border-left: 1px solid $NA1;
+            margin: auto 10px auto 0;
+          }
+
+          svg {
+            color: $NT2;
+          }
+
+          &:hover {
+            svg {
+              color: $NP1;
+            }
+          }
+        }
+      }
+
+      .item-border {
+        padding-left: 6px;
+      }
+    }
+
+    .text-field-content {
+      border: none;
+      border-radius: 0;
+      border-bottom: 1px solid $NA1;
+    }
+
+    .footer {
+      display: flex;
+      align-items: center;
+      border-top: 1px solid $NA1;
+      height: 36px;
+      justify-content: space-between;
+      padding: 0 10px;
+
+      & > div:nth-child(1) {
+        button {
+          color: $NP1;
+
+          &:hover {
+            color: $NPT8;
+          }
+        }
+
+        .btn-off {
+          color: $NT3;
+
+          &:hover {
+            color: $NT3;
+          }
+        }
+
+        & > button {
+          padding: 0;
+        }
+
+        & > button:nth-child(2) {
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+
+  .moveBtn {
+    display: flex;
+    height: 500px;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0 20px;
+
+    > button {
+      background-color: $NP1;
+      color: $NA4;
+    }
+
+    .btn-left {
+      margin-top: 16px;
+    }
+  }
+
+  .#{$prefixCls}-transfer-container {
+    display: flex;
+  }
+
+  &-disabled > .#{$prefixCls}-transfer-container {
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      top: -1px;
+      left: -1px;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);;
+      z-index: 1;
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 4px;
+      backdrop-filter: blur(1px);
+    }
+  }
+}
+
+@keyframes flucturation {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(36px);
+  }
+}
+
+@keyframes flucturationOrther {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-36px);
+  }
+}

package/es/Tree/OperateBar/index.js

@@ -1,10 +1,10 @@
 import { j as d } from "../../_virtual/jsx-runtime.js";
 import { useRef as A, useState as R, useImperativeHandle as U, useEffect as C } from "react";
 import J from "react-dom";
-import q from "@para-ui/icons/EditFile";
-import G from "@para-ui/icons/PlusCircle";
-import K from "@para-ui/icons/Delete";
-import Q from "@para-ui/icons/Forbid";
+import { EditFile as q } from "../../node_modules/@para-ui/icons/EditFile/index.js";
+import { PlusCircle as G } from "../../node_modules/@para-ui/icons/PlusCircle/index.js";
+import { Delete as K } from "../../node_modules/@para-ui/icons/Delete/index.js";
+import { Forbid as Q } from "../../node_modules/@para-ui/icons/Forbid/index.js";
 import { Tooltip as V } from "../../Tooltip/index.js";
 import { UUID as W } from "@paraview/lib";
 import X from "clsx";
@@ -52,7 +52,7 @@ const _ = (c) => ({
   const { actionsCallback: h, opRef: i, mouseInRef: p, showActions: s, onRemove: m } = c, n = A(null), l = A(W().replace(/-/g, "")), [j, N] = R({}), [v, P] = R(!1), [E, y] = R(!1), b = Y("Tree", Z), g = i.current, w = (e, t) => {
     const o = `${Math.round(Math.sin(Math.PI / 180 * t) * e)}px`, r = `${-Math.round(Math.cos(Math.PI / 180 * t) * e + 12)}px`;
     return { left: o, top: r };
-  }, I = (e) => e <= 4 ? 40 : e === 5 ? 60 : e > 5 && e < 7 ? 80 : 100, B = (e, t) => {
+  }, B = (e) => e <= 4 ? 40 : e === 5 ? 60 : e > 5 && e < 7 ? 80 : 100, I = (e, t) => {
     const o = i.current?.anchorEl?.getBoundingClientRect() || { top: 0, left: 0, height: 0 }, { left: r, height: a } = o;
     let { top: f } = o;
     const u = t + 24 + 12, x = t * 2 + 24 + 12;
@@ -67,8 +67,8 @@ const _ = (c) => ({
     let o = 0, r = 0;
     return e === 4 ? (o = 60, r = t * o) : e === 3 ? (o = 30, r = (2 * t + 1) * o) : e === 2 ? (o = 60, r = (t + 1) * o) : e === 1 ? r = 90 : e === 5 ? (o = 45, r = t * o) : e > 5 && e <= 7 ? (o = 30, r = t * o) : e > 7 && (o = 20, r = t * o), r;
   }, S = () => {
-    const t = document.getElementById(l.current)?.getElementsByClassName("sector-item-container")?.[0], o = t?.childNodes || [], r = t?.parentNode, a = I(o.length);
-    r && B(r, a);
+    const t = document.getElementById(l.current)?.getElementsByClassName("sector-item-container")?.[0], o = t?.childNodes || [], r = t?.parentNode, a = B(o.length);
+    r && I(r, a);
     for (let f = 0; f < o.length; f++) {
       const u = o[f];
       u.style.transition = ".3s", u.style.opacity = "1";
@@ -84,9 +84,9 @@ const _ = (c) => ({
     e?.parentNode?.removeChild(e), y(!1);
   }, O = (e, t) => {
     t ? (N(e), S()) : $();
-  }, D = () => {
-    p.current = !0;
   }, F = () => {
+    p.current = !0;
+  }, D = () => {
     m?.(g?.anchorEl), g?.onShowSector?.({}, !1);
   }, T = (e, t, o) => {
     o.stopPropagation(), h?.(e, t, o);
@@ -133,8 +133,8 @@ const _ = (c) => ({
       "div",
       {
         className: "sector-container",
-        onMouseLeave: F,
-        onMouseEnter: D,
+        onMouseLeave: D,
+        onMouseEnter: F,
         children: /* @__PURE__ */ d.jsx("ul", { className: "sector-item-container", children: z() })
       }
     ),