@opencompass-fe/oc-webkit-eval 0.1.1 → 0.1.3

package/dist/components/top-nav/top-nav.js

@@ -1 +1 @@
-import a,{useState as h,useEffect as y}from"react";import u from"classnames";import{langTypeEnum as W}from"../../constants/enums.js";import I from"../../assets/svg/top-nav/arena-flag.svg.js";import S from"../../assets/svg/top-nav/arrow-up.svg.js";import Z from"../../assets/svg/top-nav/logo-mark.svg.js";import K from"../../assets/svg/top-nav/logo-word.svg.js";import q from"../../assets/svg/top-nav/nav-down.svg.js";import{Dropdown as O}from"antd";import n from"./top-nav.module.less.js";import{useTopNavCommon as X,IconBox as d,renderDropdownContent as j,renderUserAvatar as G}from"./shared.js";const J=k=>{const{brandHref:A,locale:w,onToggleLocale:L,onArenaClick:g,navItems:x,arenaLabel:b,userInfo:C,onAvatarClick:D,userMenuItems:_,locales:m,triggerLogin:F,performLogout:z,isLoggedIn:v,hasUserMenu:B}=X(k),T=e=>{var l,t,r,o,s,c;return w===W.en?(r=(t=(l=e.labelEn)!=null?l:e.label)!=null?t:e.labelZh)!=null?r:"":(c=(s=(o=e.labelZh)!=null?o:e.label)!=null?s:e.labelEn)!=null?c:""},Y=(e,l)=>{var t,r,o,s,c;return(c=(s=(o=(r=(t=e.key)!=null?t:e.href)!=null?r:e.label)!=null?o:e.labelZh)!=null?s:e.labelEn)!=null?c:`nav-${l}`},[p,H]=h(!1),[f,M]=h(()=>window.innerWidth>860),$=p&&f?{width:"448px",height:"52px",padding:"8px",backgroundColor:"var(--oc-white)",borderColor:"rgba(226, 227, 228, 1)",boxShadow:"0 4px 10px rgba(0, 0, 0, 0.15)",transform:"translateX(-50%) translateY(6px)"}:void 0,i=p&&f,R=i?{pointerEvents:"none",opacity:0,transform:"translateY(-8px) scale(0.96)"}:void 0,U=i?{pointerEvents:"auto",opacity:1}:void 0;y(()=>{let e=0,l=-1;const t=()=>{if(e=0,window.scrollY===l)return;l=window.scrollY;const s=window.scrollY>24;H(c=>c===s?c:s)},r=()=>{e===0&&(e=window.requestAnimationFrame(t))};t(),window.addEventListener("scroll",r,{passive:!0});const o=window.setInterval(t,120);return()=>{window.removeEventListener("scroll",r),window.clearInterval(o),e!==0&&window.cancelAnimationFrame(e)}},[]),y(()=>{const e=()=>M(window.innerWidth>860);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const E=e=>j({items:e,locale:w,performLogout:z,styles:n}),N=e=>G({customDropdownRender:E,dropdownTrigger:["hover"],extra:e,hasUserMenu:B,isLoggedIn:v,onAvatarClick:D,styles:n,userInfo:C,userMenuItems:_});return a.createElement("header",{className:u(n.topbar,p&&n.scrolled)},a.createElement("a",{className:n.brand,href:A,"aria-label":m.topNavBrandAria},a.createElement("img",{className:n.brandMark,src:Z,alt:""}),a.createElement("img",{className:n.brandWord,src:K,alt:m.topNavBrandName})),a.createElement("nav",{className:u(n.nav,p&&n.navScrolled),"aria-label":m.topNavNavAria,style:$},x.map((e,l)=>{const t=Y(e,l),r=T(e),o=a.createElement("div",{className:u(n.navLink,e.active&&n.navLinkActive,e.withDown&&n.withDown)},a.createElement("span",null,r),e.withDown?a.createElement(d,{src:q,size:16,styles:n}):null);return!!e.dropdownItems&&e.dropdownItems.length>0?a.createElement(O,{key:t,trigger:["hover"],popupRender:()=>E(e.dropdownItems),placement:"bottom",styles:{root:{paddingTop:8}}},o):a.createElement(a.Fragment,{key:t},o)})),a.createElement("div",{className:n.actions,style:R,"aria-hidden":i},a.createElement("button",{className:n.arenaButton,type:"button",onClick:g},a.createElement(d,{src:I,size:16,className:n.arenaIconDefault,styles:n}),a.createElement(d,{src:S,size:16,className:n.arenaIconHover,styles:n}),a.createElement("span",null,b)),a.createElement("button",{className:n.langButton,type:"button",onClick:L},m.topNavLangSwitch),v?N():a.createElement("button",{className:n.loginButton,type:"button",onClick:F},m.login)),a.createElement("div",{className:u(n.floatingArena,i&&n.visible),style:U,"aria-hidden":!i},a.createElement("button",{className:n.floatingArenaButton,type:"button",tabIndex:i?0:-1,onClick:g},a.createElement(d,{src:I,size:16,className:n.arenaIconDefault,styles:n}),a.createElement(d,{src:S,size:16,className:n.arenaIconHover,styles:n}),a.createElement("span",null,b)),v?N({className:n.floatingAvatar,tabIndex:i?0:-1}):null))};export{J as default};
+import t,{useState as b,useRef as q,useEffect as g}from"react";import p from"classnames";import{langTypeEnum as X}from"../../constants/enums.js";import k from"../../assets/svg/top-nav/arena-flag.svg.js";import A from"../../assets/svg/top-nav/arrow-up.svg.js";import j from"../../assets/svg/top-nav/logo-mark.svg.js";import G from"../../assets/svg/top-nav/logo-word.svg.js";import J from"../../assets/svg/top-nav/nav-down.svg.js";import{Dropdown as P}from"antd";import n from"./top-nav.module.less.js";import{useTopNavCommon as Q,IconBox as v,renderDropdownContent as V,renderUserAvatar as ee}from"./shared.js";const ne=x=>{const{brandHref:C,locale:w,onToggleLocale:z,onArenaClick:E,navItems:h,arenaLabel:N,userInfo:D,onAvatarClick:_,userMenuItems:B,locales:m,triggerLogin:F,performLogout:H,isLoggedIn:f,hasUserMenu:R}=Q(x),T=e=>{var r,a,o,l,s,c;return w===X.en?(o=(a=(r=e.labelEn)!=null?r:e.label)!=null?a:e.labelZh)!=null?o:"":(c=(s=(l=e.labelZh)!=null?l:e.label)!=null?s:e.labelEn)!=null?c:""},M=(e,r)=>{var a,o,l,s,c;return(c=(s=(l=(o=(a=e.key)!=null?a:e.href)!=null?o:e.label)!=null?l:e.labelZh)!=null?s:e.labelEn)!=null?c:`nav-${r}`},[d,W]=b(!1),[u,Y]=b(()=>window.innerWidth>860),y=q(null),[I,$]=b(0),O=d&&u?{height:"52px",padding:"8px",backgroundColor:"var(--oc-white)",borderColor:"rgba(226, 227, 228, 1)",boxShadow:"0 4px 10px rgba(0, 0, 0, 0.15)",transform:"translateX(-50%) translateY(6px)"}:void 0,U=d&&u&&I>0?{"--oc-nav-half-width":`${I}px`}:void 0,i=d&&u,Z=i?{pointerEvents:"none",opacity:0,transform:"translateY(-8px) scale(0.96)"}:void 0,K=i?{pointerEvents:"auto",opacity:1}:void 0;g(()=>{let e=0,r=-1;const a=()=>{if(e=0,window.scrollY===r)return;r=window.scrollY;const s=window.scrollY>24;W(c=>c===s?c:s)},o=()=>{e===0&&(e=window.requestAnimationFrame(a))};a(),window.addEventListener("scroll",o,{passive:!0});const l=window.setInterval(a,120);return()=>{window.removeEventListener("scroll",o),window.clearInterval(l),e!==0&&window.cancelAnimationFrame(e)}},[]),g(()=>{const e=()=>Y(window.innerWidth>860);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),g(()=>{const e=y.current;if(!e||!u)return;const r=()=>{$(e.getBoundingClientRect().width/2)};r();const a=new ResizeObserver(r);return a.observe(e),window.addEventListener("resize",r),()=>{a.disconnect(),window.removeEventListener("resize",r)}},[u,d,w,h]);const L=e=>V({items:e,locale:w,performLogout:H,styles:n}),S=e=>ee({customDropdownRender:L,dropdownTrigger:["hover"],extra:e,hasUserMenu:R,isLoggedIn:f,onAvatarClick:_,styles:n,userInfo:D,userMenuItems:B});return t.createElement("header",{className:p(n.topbar,d&&n.scrolled),style:U},t.createElement("a",{className:n.brand,href:C,"aria-label":m.topNavBrandAria},t.createElement("img",{className:n.brandMark,src:j,alt:""}),t.createElement("img",{className:n.brandWord,src:G,alt:m.topNavBrandName})),t.createElement("nav",{ref:y,className:p(n.nav,d&&n.navScrolled),"aria-label":m.topNavNavAria,style:O},h.map((e,r)=>{const a=M(e,r),o=T(e),l=t.createElement("div",{className:p(n.navLink,e.active&&n.navLinkActive,e.withDown&&n.withDown)},t.createElement("span",null,o),e.withDown?t.createElement(v,{src:J,size:16,styles:n}):null);return!!e.dropdownItems&&e.dropdownItems.length>0?t.createElement(P,{key:a,trigger:["hover"],popupRender:()=>L(e.dropdownItems),placement:"bottom",styles:{root:{paddingTop:8}}},l):t.createElement(t.Fragment,{key:a},l)})),t.createElement("div",{className:n.actions,style:Z,"aria-hidden":i},t.createElement("button",{className:n.arenaButton,type:"button",onClick:E},t.createElement(v,{src:k,size:16,className:n.arenaIconDefault,styles:n}),t.createElement(v,{src:A,size:16,className:n.arenaIconHover,styles:n}),t.createElement("span",null,N)),t.createElement("button",{className:n.langButton,type:"button",onClick:z},m.topNavLangSwitch),f?S():t.createElement("button",{className:n.loginButton,type:"button",onClick:F},m.login)),t.createElement("div",{className:p(n.floatingArena,i&&n.visible),style:K,"aria-hidden":!i},t.createElement("button",{className:n.floatingArenaButton,type:"button",tabIndex:i?0:-1,onClick:E},t.createElement(v,{src:k,size:16,className:n.arenaIconDefault,styles:n}),t.createElement(v,{src:A,size:16,className:n.arenaIconHover,styles:n}),t.createElement("span",null,N)),f?S({className:n.floatingAvatar,tabIndex:i?0:-1}):null))};export{ne as default};

package/dist/components/top-nav/top-nav.module.less.js

@@ -19,7 +19,7 @@ import n from"../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inj
   top: 0;
   z-index: 20;
   display: grid;
-  grid-template-columns: 218px minmax(430px, 1fr) 218px;
+  grid-template-columns: 218px minmax(360px, 1fr) auto;
   align-items: center;
   width: 100%;
   height: 64px;
@@ -64,7 +64,6 @@ import n from"../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inj
   transform: translateY(-8px) scale(0.96);
 }
 .top-nav-module_topbar__M-9LM.top-nav-module_scrolled__0c7O- .top-nav-module_nav__CNENL.top-nav-module_navScrolled__0VNTc {
-  --oc-nav-width: 448px;
   --oc-nav-height: 52px;
   --oc-nav-padding: 8px;
   --oc-nav-background: var(--oc-white);
@@ -104,7 +103,8 @@ import n from"../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inj
   align-items: center;
   justify-self: center;
   justify-content: center;
-  width: var(--oc-nav-width, 430px);
+  width: fit-content;
+  max-width: calc(100vw - 280px);
   height: var(--oc-nav-height, 36px);
   padding: var(--oc-nav-padding, 0);
   background-color: var(--oc-nav-background, rgba(255, 255, 255, 0));
@@ -155,7 +155,7 @@ import n from"../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inj
   gap: 8px;
   align-items: center;
   justify-self: end;
-  width: 218px;
+  width: fit-content;
   height: 40px;
   padding: 0;
   background-color: rgba(255, 255, 255, 0);
@@ -167,6 +167,7 @@ import n from"../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inj
 }
 .top-nav-module_topbar__M-9LM .top-nav-module_actions__NeiZP .top-nav-module_arenaButton__uYjCi {
   display: inline-flex;
+  flex-shrink: 0;
   gap: 2px;
   align-items: center;
   justify-content: center;
@@ -202,20 +203,22 @@ import n from"../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inj
   white-space: nowrap;
 }
 .top-nav-module_topbar__M-9LM .top-nav-module_actions__NeiZP .top-nav-module_langButton__6jlyg {
-  width: 40px;
-  height: 40px;
+  flex-shrink: 0;
+  height: 36px;
+  padding: 8px 12px;
   color: var(--oc-text-secondary);
   border-radius: var(--oc-radius-md);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   white-space: nowrap;
-  transition: width 240ms ease, padding 240ms ease, opacity 180ms ease, background-color 220ms ease, transform 220ms ease;
+  transition: padding 240ms ease, opacity 180ms ease, background-color 220ms ease, transform 220ms ease;
 }
 .top-nav-module_topbar__M-9LM .top-nav-module_actions__NeiZP .top-nav-module_langButton__6jlyg:hover {
   background-color: var(--oc-fill-bg-hover);
 }
 .top-nav-module_topbar__M-9LM .top-nav-module_actions__NeiZP .top-nav-module_loginButton__rTUW2 {
+  flex-shrink: 0;
   height: 36px;
   padding: 8px 20px;
   color: var(--oc-white);
@@ -267,7 +270,7 @@ import n from"../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inj
 .top-nav-module_topbar__M-9LM .top-nav-module_floatingArena__SzJGl {
   position: fixed;
   top: 20px;
-  left: calc(50vw + 231px);
+  left: calc(50vw + var(--oc-nav-half-width, 0px) + 8px);
   z-index: 22;
   display: flex;
   gap: 8px;
@@ -345,7 +348,7 @@ import n from"../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inj
 }
 @media (max-width: 1180px) {
   .top-nav-module_topbar__M-9LM {
-    grid-template-columns: 160px minmax(360px, 1fr) 218px;
+    grid-template-columns: 160px minmax(320px, 1fr) auto;
   }
 }
 @media (max-width: 860px) {

package/dist/mobile/components/top-nav/top-nav.module.less.js

@@ -70,10 +70,14 @@ import n from"../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-
   gap: 12px;
 }
 .top-nav-module_topbar__0kHYG .top-nav-module_actions__b0CA9 .top-nav-module_langButton__ciwEY {
+  flex-shrink: 0;
+  height: 32px;
+  padding: 0 8px;
   color: var(--oc-text-secondary);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
+  white-space: nowrap;
 }
 .top-nav-module_topbar__0kHYG .top-nav-module_actions__b0CA9 .top-nav-module_loginButton__bWyfr {
   height: 32px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencompass-fe/oc-webkit-eval",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Provide some common components for oc",
   "repository": {
     "type": "git",