diff --git a/dev/404.html b/dev/404.html index 19b497b467..4e170db361 100644 --- a/dev/404.html +++ b/dev/404.html @@ -11,14 +11,14 @@ - - + +
ZUI 3

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/assets/guide_start_index.md.DSDqE0Ii.js b/dev/assets/guide_start_index.md.BS9e9PLJ.js similarity index 93% rename from dev/assets/guide_start_index.md.DSDqE0Ii.js rename to dev/assets/guide_start_index.md.BS9e9PLJ.js index bc9fb362bb..b76664e77f 100644 --- a/dev/assets/guide_start_index.md.DSDqE0Ii.js +++ b/dev/assets/guide_start_index.md.BS9e9PLJ.js @@ -1,4 +1,4 @@ -import{c as n,k as s,m as l,a as i,t as h,R as a,o as k,f as p}from"./chunks/framework.DeE3OwZJ.js";const E=s("h1",{id:"快速开始",tabindex:"-1"},[i("快速开始 "),s("a",{class:"header-anchor",href:"#快速开始","aria-label":'Permalink to "快速开始"'},"​")],-1),e=s("h2",{id:"下载使用",tabindex:"-1"},[i("下载使用 "),s("a",{class:"header-anchor",href:"#下载使用","aria-label":'Permalink to "下载使用"'},"​")],-1),d=s("p",null,"你可以从如下地址下载 ZUI 的最新版本：",-1),g={class:"vp-raw row gap-4"},r=["href"],_=s("i",{class:"icon icon-download-alt icon-lg"},null,-1),o=["href"],y=s("i",{class:"icon icon-github icon-lg"},null,-1),c=a(`

下载后将如下文件解压到你的项目中：

text
zui/
+import{c as n,k as s,m as l,a as i,t as h,R as a,o as k,f as p}from"./chunks/framework.DeE3OwZJ.js";const E=s("h1",{id:"快速开始",tabindex:"-1"},[i("快速开始 "),s("a",{class:"header-anchor",href:"#快速开始","aria-label":'Permalink to "快速开始"'},"​")],-1),e=s("h2",{id:"下载使用",tabindex:"-1"},[i("下载使用 "),s("a",{class:"header-anchor",href:"#下载使用","aria-label":'Permalink to "下载使用"'},"​")],-1),d=s("p",null,"你可以从如下地址下载 ZUI 的最新版本：",-1),r={class:"vp-raw row gap-4"},g=["href"],_=s("i",{class:"icon icon-download-alt icon-lg"},null,-1),o=["href"],y=s("i",{class:"icon icon-github icon-lg"},null,-1),c=a(`
下载后将如下文件解压到你的项目中：
text
zui/
 ├── zui.css
 ├── zui.js
 └── zui.esm.js
下载后在页面中导入：
html
<!doctype html>
@@ -14,7 +14,7 @@ import{c as n,k as s,m as l,a as i,t as h,R as a,o as k,f as p}from"./chunks/fra
     <a class="btn" href="/">访问 ZUI 网站</a>
     <script src="./zui/zui.js"></script>
   </body>
-</html>
使用 CDN ​
使用 CDN 可以快速使用 ZUI，与下载使用基本一样，只需要将相关资源文件替换为 CDN 上的地址即可：
`,6),F={class:"vp-code-group vp-adaptive-theme"},u=a('
',1),C={class:"blocks"},T={class:"language-html vp-adaptive-theme active"},A=s("button",{title:"Copy Code",class:"copy"},null,-1),D=s("span",{class:"lang"},"html",-1),m={class:"shiki shiki-themes github-light github-dark vp-code"},B=a('<!doctype html>',1),S=a('<html lang="zh-CN">',1),b=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),v=a('    <meta charset="utf-8">',1),I=a('    <meta name="viewport" content="width=device-width, initial-scale=1">',1),q=a('    <title>ZUI</title>',1),P={class:"line highlighted"},V=a('    <link rel="stylesheet" href=',7),z={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},N=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),f=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),R=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),w=a('    <h1>ZUI is awesome!</h1>',1),j=a('    <a class="btn" href="/">访问 ZUI 网站</a>',1),U={class:"line highlighted"},Z=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    <",-1),x=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),J=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),M=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),H={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},X=a(' crossorigin="anonymous"></script>',6),O=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),Q=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),G={class:"language-html vp-adaptive-theme"},$=s("button",{title:"Copy Code",class:"copy"},null,-1),W=s("span",{class:"lang"},"html",-1),K={class:"shiki shiki-themes github-light github-dark vp-code"},L=a('<!doctype html>',1),Y=a('<html lang="zh-CN">',1),ss=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),is=a('    <meta charset="utf-8">',1),as=a('    <meta name="viewport" content="width=device-width, initial-scale=1">',1),ts=a('    <title>ZUI</title>',1),hs={class:"line highlighted"},ns=a('    <link rel="stylesheet" href=',7),ls={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},ks=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),ps=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),Es=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),es=a('    <h1>ZUI is awesome!</h1>',1),ds=a('    <a class="btn" href="/">访问 ZUI 网站</a>',1),gs={class:"line highlighted"},rs=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    <",-1),_s=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),os=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),ys=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),cs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Fs=a(' crossorigin="anonymous"></script>',6),us=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),Cs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),Ts={class:"language-html vp-adaptive-theme"},As=s("button",{title:"Copy Code",class:"copy"},null,-1),Ds=s("span",{class:"lang"},"html",-1),ms={class:"shiki shiki-themes github-light github-dark vp-code"},Bs=a('<!doctype html>',1),Ss=a('<html lang="zh-CN">',1),bs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),vs=a('    <meta charset="utf-8">',1),Is=a('    <meta name="viewport" content="width=device-width, initial-scale=1">',1),qs=a('    <title>ZUI</title>',1),Ps={class:"line highlighted"},Vs=a('    <link rel="stylesheet" href=',7),zs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Ns=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),fs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),Rs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),ws=a('    <h1>ZUI is awesome!</h1>',1),js=a('    <a class="btn" href="/">访问 ZUI 网站</a>',1),Us={class:"line highlighted"},Zs=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    <",-1),xs=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),Js=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),Ms=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),Hs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Xs=a(' crossorigin="anonymous"></script>',6),Os=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),Qs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),Gs=a(`
使用 JS 组件 ​
无论是下载还是使用 CDN，导入 zui.js 之后，你就可以使用 ZUI 中的 JS 组件了，ZUI 提供的所有 JS 辅助方法和组件类都在全局对象 zui 上进行访问，例如：
html
<nav id="nav"></nav>
+</html>
使用 CDN ​
使用 CDN 可以快速使用 ZUI，与下载使用基本一样，只需要将相关资源文件替换为 CDN 上的地址即可：
`,6),F={class:"vp-code-group vp-adaptive-theme"},u=a('
',1),C={class:"blocks"},A={class:"language-html vp-adaptive-theme active"},T=s("button",{title:"Copy Code",class:"copy"},null,-1),D=s("span",{class:"lang"},"html",-1),B={class:"shiki shiki-themes github-light github-dark vp-code"},m=a('<!doctype html>',1),S=a('<html lang="zh-CN">',1),b=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),v=a('    <meta charset="utf-8">',1),q=a('    <meta name="viewport" content="width=device-width, initial-scale=1">',1),I=a('    <title>ZUI</title>',1),P={class:"line highlighted"},V=a('    <link rel="stylesheet" href=',7),z={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},N=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),f=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),R=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),w=a('    <h1>ZUI is awesome!</h1>',1),j=a('    <a class="btn" href="/">访问 ZUI 网站</a>',1),U={class:"line highlighted"},Z=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    <",-1),J=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),x=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),M=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),H={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},$=a(' crossorigin="anonymous"></script>',6),O=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),G=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),K={class:"language-html vp-adaptive-theme"},L=s("button",{title:"Copy Code",class:"copy"},null,-1),Q=s("span",{class:"lang"},"html",-1),W={class:"shiki shiki-themes github-light github-dark vp-code"},X=a('<!doctype html>',1),Y=a('<html lang="zh-CN">',1),ss=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),is=a('    <meta charset="utf-8">',1),as=a('    <meta name="viewport" content="width=device-width, initial-scale=1">',1),ts=a('    <title>ZUI</title>',1),hs={class:"line highlighted"},ns=a('    <link rel="stylesheet" href=',7),ls={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},ks=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),ps=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),Es=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),es=a('    <h1>ZUI is awesome!</h1>',1),ds=a('    <a class="btn" href="/">访问 ZUI 网站</a>',1),rs={class:"line highlighted"},gs=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    <",-1),_s=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),os=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),ys=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),cs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Fs=a(' crossorigin="anonymous"></script>',6),us=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),Cs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),As={class:"language-html vp-adaptive-theme"},Ts=s("button",{title:"Copy Code",class:"copy"},null,-1),Ds=s("span",{class:"lang"},"html",-1),Bs={class:"shiki shiki-themes github-light github-dark vp-code"},ms=a('<!doctype html>',1),Ss=a('<html lang="zh-CN">',1),bs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),vs=a('    <meta charset="utf-8">',1),qs=a('    <meta name="viewport" content="width=device-width, initial-scale=1">',1),Is=a('    <title>ZUI</title>',1),Ps={class:"line highlighted"},Vs=a('    <link rel="stylesheet" href=',7),zs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Ns=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),fs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),Rs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),ws=a('    <h1>ZUI is awesome!</h1>',1),js=a('    <a class="btn" href="/">访问 ZUI 网站</a>',1),Us={class:"line highlighted"},Zs=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    <",-1),Js=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),xs=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),Ms=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),Hs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},$s=a(' crossorigin="anonymous"></script>',6),Os=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  ")],-1),Gs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),Ks=a(`
使用 JS 组件 ​
无论是下载还是使用 CDN，导入 zui.js 之后，你就可以使用 ZUI 中的 JS 组件了，ZUI 提供的所有 JS 辅助方法和组件类都在全局对象 zui 上进行访问，例如：
html
<nav id="nav"></nav>
 
 <script>
 const {Nav} = zui;
@@ -34,20 +34,20 @@ import{c as n,k as s,m as l,a as i,t as h,R as a,o as k,f as p}from"./chunks/fra
 import 'zui/css';
 
 zui.Messager.show('Hello!');
如果你仅仅需要 ZUI 中的单个组件，例如 数据表格，你可以这样导入：
js
import {DTable} from 'zui/lib/dtable';
-import 'zui/lib/dtable/css';
`,13),Ys=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start/index.md","filePath":"guide/start/index.md","lastUpdated":null}'),$s={name:"guide/start/index.md"},si=Object.assign($s,{setup(Ws){return(t,Ks)=>(k(),n("div",null,[E,e,d,s("div",g,[s("a",{class:"btn primary size-lg rounded-full",href:l(p)(`/zui-${t.zui.version}.zip`),download:""},[_,i(" 点击下载")],8,r),s("a",{class:"btn outline size-lg rounded-full",href:`https://github.com/easysoft/zui/releases/tag/v${t.zui.version}`,target:"_blank"},[y,i(" 从 GitHub 下载")],8,o)]),c,s("div",F,[u,s("div",C,[s("div",T,[A,D,s("pre",m,[s("code",null,[B,i(`
+import 'zui/lib/dtable/css';
`,13),Ys=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start/index.md","filePath":"guide/start/index.md","lastUpdated":null}'),Ls={name:"guide/start/index.md"},si=Object.assign(Ls,{setup(Qs){return(t,Ws)=>(k(),n("div",null,[E,e,d,s("div",r,[s("a",{class:"btn primary size-lg rounded-full",href:l(p)(`/zui-${t.zui.version}.zip`),download:""},[_,i(" 点击下载")],8,g),s("a",{class:"btn outline size-lg rounded-full",href:`https://github.com/easysoft/zui/releases/tag/v${t.zui.version}`,target:"_blank"},[y,i(" 从 GitHub 下载")],8,o)]),c,s("div",F,[u,s("div",C,[s("div",A,[T,D,s("pre",B,[s("code",null,[m,i(` `),S,i(` `),b,i(` `),v,i(` -`),I,i(` `),q,i(` +`),I,i(` `),s("span",P,[V,s("span",z,'"///cdn.jsdelivr.net/npm/zui/dist/'+h(t.zui.version)+'/zui.css"',1),N]),i(` `),f,i(` `),R,i(` `),w,i(` `),j,i(` -`),s("span",U,[Z,x,J,M,s("span",H,'"///cdn.jsdelivr.net/npm/zui/dist/'+h(t.zui.version)+'/zui.js"',1),X]),i(` +`),s("span",U,[Z,J,x,M,s("span",H,'"///cdn.jsdelivr.net/npm/zui/dist/'+h(t.zui.version)+'/zui.js"',1),$]),i(` `),O,i(` -`),Q])])]),s("div",G,[$,W,s("pre",K,[s("code",null,[L,i(` +`),G])])]),s("div",K,[L,Q,s("pre",W,[s("code",null,[X,i(` `),Y,i(` `),ss,i(` `),is,i(` @@ -58,19 +58,19 @@ import{c as n,k as s,m as l,a as i,t as h,R as a,o as k,f as p}from"./chunks/fra `),Es,i(` `),es,i(` `),ds,i(` -`),s("span",gs,[rs,_s,os,ys,s("span",cs,'"///cdn.bootcdn.net/ajax/libs/zui/'+h(t.zui.version)+'/zui.js"',1),Fs]),i(` +`),s("span",rs,[gs,_s,os,ys,s("span",cs,'"///cdn.bootcdn.net/ajax/libs/zui/'+h(t.zui.version)+'/zui.js"',1),Fs]),i(` `),us,i(` -`),Cs])])]),s("div",Ts,[As,Ds,s("pre",ms,[s("code",null,[Bs,i(` +`),Cs])])]),s("div",As,[Ts,Ds,s("pre",Bs,[s("code",null,[ms,i(` `),Ss,i(` `),bs,i(` `),vs,i(` -`),Is,i(` `),qs,i(` +`),Is,i(` `),s("span",Ps,[Vs,s("span",zs,'"///unpkg.com/zui@'+h(t.zui.version)+'/zui.css"',1),Ns]),i(` `),fs,i(` `),Rs,i(` `),ws,i(` `),js,i(` -`),s("span",Us,[Zs,xs,Js,Ms,s("span",Hs,'"///unpkg.com/zui@'+h(t.zui.version)+'/zui.js"',1),Xs]),i(` +`),s("span",Us,[Zs,Js,xs,Ms,s("span",Hs,'"///unpkg.com/zui@'+h(t.zui.version)+'/zui.js"',1),$s]),i(` `),Os,i(` -`),Qs])])])])]),Gs]))}});export{Ys as __pageData,si as default}; +`),Gs])])])])]),Ks]))}});export{Ys as __pageData,si as default}; diff --git a/dev/assets/guide_start_index.md.DSDqE0Ii.lean.js b/dev/assets/guide_start_index.md.BS9e9PLJ.lean.js similarity index 73% rename from dev/assets/guide_start_index.md.DSDqE0Ii.lean.js rename to dev/assets/guide_start_index.md.BS9e9PLJ.lean.js index a47dad9d13..273835bb80 100644 --- a/dev/assets/guide_start_index.md.DSDqE0Ii.lean.js +++ b/dev/assets/guide_start_index.md.BS9e9PLJ.lean.js @@ -1,17 +1,17 @@ -import{c as n,k as s,m as l,a as i,t as h,R as a,o as k,f as p}from"./chunks/framework.DeE3OwZJ.js";const E=s("h1",{id:"快速开始",tabindex:"-1"},[i("快速开始 "),s("a",{class:"header-anchor",href:"#快速开始","aria-label":'Permalink to "快速开始"'},"​")],-1),e=s("h2",{id:"下载使用",tabindex:"-1"},[i("下载使用 "),s("a",{class:"header-anchor",href:"#下载使用","aria-label":'Permalink to "下载使用"'},"​")],-1),d=s("p",null,"你可以从如下地址下载 ZUI 的最新版本：",-1),g={class:"vp-raw row gap-4"},r=["href"],_=s("i",{class:"icon icon-download-alt icon-lg"},null,-1),o=["href"],y=s("i",{class:"icon icon-github icon-lg"},null,-1),c=a("",6),F={class:"vp-code-group vp-adaptive-theme"},u=a("",1),C={class:"blocks"},T={class:"language-html vp-adaptive-theme active"},A=s("button",{title:"Copy Code",class:"copy"},null,-1),D=s("span",{class:"lang"},"html",-1),m={class:"shiki shiki-themes github-light github-dark vp-code"},B=a("",1),S=a("",1),b=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),v=a("",1),I=a("",1),q=a("",1),P={class:"line highlighted"},V=a("",7),z={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},N=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),f=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),R=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),w=a("",1),j=a("",1),U={class:"line highlighted"},Z=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <",-1),x=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),J=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),M=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),H={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},X=a("",6),O=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),Q=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),G={class:"language-html vp-adaptive-theme"},$=s("button",{title:"Copy Code",class:"copy"},null,-1),W=s("span",{class:"lang"},"html",-1),K={class:"shiki shiki-themes github-light github-dark vp-code"},L=a("",1),Y=a("",1),ss=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),is=a("",1),as=a("",1),ts=a("",1),hs={class:"line highlighted"},ns=a("",7),ls={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},ks=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),ps=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),Es=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),es=a("",1),ds=a("",1),gs={class:"line highlighted"},rs=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <",-1),_s=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),os=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),ys=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),cs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Fs=a("",6),us=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),Cs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),Ts={class:"language-html vp-adaptive-theme"},As=s("button",{title:"Copy Code",class:"copy"},null,-1),Ds=s("span",{class:"lang"},"html",-1),ms={class:"shiki shiki-themes github-light github-dark vp-code"},Bs=a("",1),Ss=a("",1),bs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),vs=a("",1),Is=a("",1),qs=a("",1),Ps={class:"line highlighted"},Vs=a("",7),zs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Ns=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),fs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),Rs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),ws=a("",1),js=a("",1),Us={class:"line highlighted"},Zs=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <",-1),xs=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),Js=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),Ms=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),Hs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Xs=a("",6),Os=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),Qs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),Gs=a("",13),Ys=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start/index.md","filePath":"guide/start/index.md","lastUpdated":null}'),$s={name:"guide/start/index.md"},si=Object.assign($s,{setup(Ws){return(t,Ks)=>(k(),n("div",null,[E,e,d,s("div",g,[s("a",{class:"btn primary size-lg rounded-full",href:l(p)(`/zui-${t.zui.version}.zip`),download:""},[_,i(" 点击下载")],8,r),s("a",{class:"btn outline size-lg rounded-full",href:`https://github.com/easysoft/zui/releases/tag/v${t.zui.version}`,target:"_blank"},[y,i(" 从 GitHub 下载")],8,o)]),c,s("div",F,[u,s("div",C,[s("div",T,[A,D,s("pre",m,[s("code",null,[B,i(` +import{c as n,k as s,m as l,a as i,t as h,R as a,o as k,f as p}from"./chunks/framework.DeE3OwZJ.js";const E=s("h1",{id:"快速开始",tabindex:"-1"},[i("快速开始 "),s("a",{class:"header-anchor",href:"#快速开始","aria-label":'Permalink to "快速开始"'},"​")],-1),e=s("h2",{id:"下载使用",tabindex:"-1"},[i("下载使用 "),s("a",{class:"header-anchor",href:"#下载使用","aria-label":'Permalink to "下载使用"'},"​")],-1),d=s("p",null,"你可以从如下地址下载 ZUI 的最新版本：",-1),r={class:"vp-raw row gap-4"},g=["href"],_=s("i",{class:"icon icon-download-alt icon-lg"},null,-1),o=["href"],y=s("i",{class:"icon icon-github icon-lg"},null,-1),c=a("",6),F={class:"vp-code-group vp-adaptive-theme"},u=a("",1),C={class:"blocks"},A={class:"language-html vp-adaptive-theme active"},T=s("button",{title:"Copy Code",class:"copy"},null,-1),D=s("span",{class:"lang"},"html",-1),B={class:"shiki shiki-themes github-light github-dark vp-code"},m=a("",1),S=a("",1),b=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),v=a("",1),q=a("",1),I=a("",1),P={class:"line highlighted"},V=a("",7),z={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},N=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),f=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),R=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),w=a("",1),j=a("",1),U={class:"line highlighted"},Z=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <",-1),J=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),x=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),M=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),H={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},$=a("",6),O=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),G=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),K={class:"language-html vp-adaptive-theme"},L=s("button",{title:"Copy Code",class:"copy"},null,-1),Q=s("span",{class:"lang"},"html",-1),W={class:"shiki shiki-themes github-light github-dark vp-code"},X=a("",1),Y=a("",1),ss=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),is=a("",1),as=a("",1),ts=a("",1),hs={class:"line highlighted"},ns=a("",7),ls={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},ks=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),ps=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),Es=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),es=a("",1),ds=a("",1),rs={class:"line highlighted"},gs=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <",-1),_s=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),os=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),ys=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),cs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Fs=a("",6),us=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),Cs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),As={class:"language-html vp-adaptive-theme"},Ts=s("button",{title:"Copy Code",class:"copy"},null,-1),Ds=s("span",{class:"lang"},"html",-1),Bs={class:"shiki shiki-themes github-light github-dark vp-code"},ms=a("",1),Ss=a("",1),bs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"head"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),vs=a("",1),qs=a("",1),Is=a("",1),Ps={class:"line highlighted"},Vs=a("",7),zs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},Ns=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">",-1),fs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),Rs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"body"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")],-1),ws=a("",1),js=a("",1),Us={class:"line highlighted"},Zs=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," <",-1),Js=s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"script",-1),xs=s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," src",-1),Ms=s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"=",-1),Hs={style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},$s=a("",6),Os=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")],-1),Gs=s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"")],-1),Ks=a("",13),Ys=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start/index.md","filePath":"guide/start/index.md","lastUpdated":null}'),Ls={name:"guide/start/index.md"},si=Object.assign(Ls,{setup(Qs){return(t,Ws)=>(k(),n("div",null,[E,e,d,s("div",r,[s("a",{class:"btn primary size-lg rounded-full",href:l(p)(`/zui-${t.zui.version}.zip`),download:""},[_,i(" 点击下载")],8,g),s("a",{class:"btn outline size-lg rounded-full",href:`https://github.com/easysoft/zui/releases/tag/v${t.zui.version}`,target:"_blank"},[y,i(" 从 GitHub 下载")],8,o)]),c,s("div",F,[u,s("div",C,[s("div",A,[T,D,s("pre",B,[s("code",null,[m,i(` `),S,i(` `),b,i(` `),v,i(` -`),I,i(` `),q,i(` +`),I,i(` `),s("span",P,[V,s("span",z,'"///cdn.jsdelivr.net/npm/zui/dist/'+h(t.zui.version)+'/zui.css"',1),N]),i(` `),f,i(` `),R,i(` `),w,i(` `),j,i(` -`),s("span",U,[Z,x,J,M,s("span",H,'"///cdn.jsdelivr.net/npm/zui/dist/'+h(t.zui.version)+'/zui.js"',1),X]),i(` +`),s("span",U,[Z,J,x,M,s("span",H,'"///cdn.jsdelivr.net/npm/zui/dist/'+h(t.zui.version)+'/zui.js"',1),$]),i(` `),O,i(` -`),Q])])]),s("div",G,[$,W,s("pre",K,[s("code",null,[L,i(` +`),G])])]),s("div",K,[L,Q,s("pre",W,[s("code",null,[X,i(` `),Y,i(` `),ss,i(` `),is,i(` @@ -22,19 +22,19 @@ import{c as n,k as s,m as l,a as i,t as h,R as a,o as k,f as p}from"./chunks/fra `),Es,i(` `),es,i(` `),ds,i(` -`),s("span",gs,[rs,_s,os,ys,s("span",cs,'"///cdn.bootcdn.net/ajax/libs/zui/'+h(t.zui.version)+'/zui.js"',1),Fs]),i(` +`),s("span",rs,[gs,_s,os,ys,s("span",cs,'"///cdn.bootcdn.net/ajax/libs/zui/'+h(t.zui.version)+'/zui.js"',1),Fs]),i(` `),us,i(` -`),Cs])])]),s("div",Ts,[As,Ds,s("pre",ms,[s("code",null,[Bs,i(` +`),Cs])])]),s("div",As,[Ts,Ds,s("pre",Bs,[s("code",null,[ms,i(` `),Ss,i(` `),bs,i(` `),vs,i(` -`),Is,i(` `),qs,i(` +`),Is,i(` `),s("span",Ps,[Vs,s("span",zs,'"///unpkg.com/zui@'+h(t.zui.version)+'/zui.css"',1),Ns]),i(` `),fs,i(` `),Rs,i(` `),ws,i(` `),js,i(` -`),s("span",Us,[Zs,xs,Js,Ms,s("span",Hs,'"///unpkg.com/zui@'+h(t.zui.version)+'/zui.js"',1),Xs]),i(` +`),s("span",Us,[Zs,Js,xs,Ms,s("span",Hs,'"///unpkg.com/zui@'+h(t.zui.version)+'/zui.js"',1),$s]),i(` `),Os,i(` -`),Qs])])])])]),Gs]))}});export{Ys as __pageData,si as default}; +`),Gs])])])])]),Ks]))}});export{Ys as __pageData,si as default}; diff --git a/dev/guide/config/base/color.html b/dev/guide/config/base/color.html index 318a676ce0..39e26cc40b 100644 --- a/dev/guide/config/base/color.html +++ b/dev/guide/config/base/color.html @@ -14,8 +14,8 @@ - - + + @@ -49,7 +49,7 @@ --color-primary-900-rgb: 88, 34, 133; --color-primary-950-rgb: 59, 14, 99; }

提示

在定义 CSS 变量覆盖调色板时，除了定义 50~950 的十六进制颜色外，还需要定义对应的 RGB 颜色，这是为了在一些特殊场景下通过改变透明度来实现颜色的变化。

注意

如果你需要自定义配色，建议只通过修改调色板来实现，不建议修改界面公共颜色，除非主题需要实现对比度更明显的风格，任何时候都不应该修改特殊颜色的定义。

更多关于主题的内容参考 主题 文档。

- + \ No newline at end of file diff --git a/dev/guide/config/base/font.html b/dev/guide/config/base/font.html index f80d506051..7eb6e190d2 100644 --- a/dev/guide/config/base/font.html +++ b/dev/guide/config/base/font.html @@ -14,8 +14,8 @@ - - + + @@ -44,7 +44,7 @@ 月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。
leading-relaxed
.leading-relaxed
—宽松
line-height: line-height
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
 月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。
leading-loose
.leading-loose
—松散
line-height: line-height
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
 月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。

在 ZUI 中可以通过 CSS 工具类来设置行高，详细用法参加 CSS 工具类 / 排版 / 行高 文档。

- + \ No newline at end of file diff --git a/dev/guide/config/base/rounded.html b/dev/guide/config/base/rounded.html index 4b00762d34..8701524395 100644 --- a/dev/guide/config/base/rounded.html +++ b/dev/guide/config/base/rounded.html @@ -14,8 +14,8 @@ - - + + @@ -31,7 +31,7 @@ --radius-3xl: 1.5rem; --radius-full: 9999px; }

自定义主题 ​

可以通过定制主题来修改圆角设置，具体参见 主题 文档。

- + \ No newline at end of file diff --git a/dev/guide/config/base/screens.html b/dev/guide/config/base/screens.html index 05d75d7d35..7b7c03d4ee 100644 --- a/dev/guide/config/base/screens.html +++ b/dev/guide/config/base/screens.html @@ -14,8 +14,8 @@ - - + + @@ -54,7 +54,7 @@ --screen-xl: 1280px; --screen-2xl: 1536px; }

自定义主题 ​

可以通过定制主题来修改屏幕断点设置，具体参见 主题 文档。

- + \ No newline at end of file diff --git a/dev/guide/config/base/shadow.html b/dev/guide/config/base/shadow.html index f4ead5e23a..9198749e43 100644 --- a/dev/guide/config/base/shadow.html +++ b/dev/guide/config/base/shadow.html @@ -14,8 +14,8 @@ - - + + @@ -30,7 +30,7 @@ --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --shadow-none: none; }

自定义主题 ​

可以通过定制主题来修改阴影设置，具体参见 主题 文档。

- + \ No newline at end of file diff --git a/dev/guide/config/base/spacing.html b/dev/guide/config/base/spacing.html index a0f3cc18ea..90e5d43ab4 100644 --- a/dev/guide/config/base/spacing.html +++ b/dev/guide/config/base/spacing.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

间距 ​

间距配置 ​

为了方便实现风格一致的交互界面，ZUI 预置了间距设置。下面为默认的间距配置：

名称
实际值
预览
0
width
px
width
0.5
width
1
width
1.5
width
2
width
2.5
width
3
width
3.5
width
4
width
5
width
6
width
7
width
8
width
9
width
10
width
11
width
12
width
14
width
16
width
20
width
24
width
28
width
32
width
36
width
40
width
44
width
48
width
52
width
56
width
60
width
64
width
72
width
80
width
96
width

4px 约定

通过上表可以看到，除了 0 和 px 比较特殊的设置，其他间距实际值都是 4px 的倍数，这是有意设计，无论是设计还是开发都应该将间距为 4px 的倍数作为约定，这样更有利于实现风格一致的交互界面。

当以上间距无法满足要求时，如果需要引入新的间距值也应当遵从 4px 约定。

间距会影响所有相关 CSS 属性配置，包括 padding、margin、width、height、maxHeight、gap、inset 等。

使用间距 ​

在 ZUI 中提供了大量 CSS 工具类，可以非常方便的来应用间距配置，包括：

如需了解，请参考对应的文档。

自定义间距 ​

可以通过定制主题来修改间距设置，具体参见 主题 文档。

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/guide/customize/build.html b/dev/guide/customize/build.html index e55de808b1..ddc6e1b919 100644 --- a/dev/guide/customize/build.html +++ b/dev/guide/customize/build.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

打包 ​

执行如下命令进行打包操作：

sh
pnpm build

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/guide/customize/dev.html b/dev/guide/customize/dev.html index b13824dfa7..5512f0941c 100644 --- a/dev/guide/customize/dev.html +++ b/dev/guide/customize/dev.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

开发 ​

开发服务 ​

执行如下命令启动开发服务：

shell
$ pnpm dev

开发服务器启动后，默认情况下可以通过网址：http://localhost:5173/ 来访问开发服务页面。通过页面上的组件导航，可以访问对应的组件开发页面。也可以将组件名附加到网址后面，直接访问对应的组件页面，例如 http://localhost:5173/button/。

在开发服务页面上支持热更新，当开发文件变更后会自动反馈到开发服务页面上。

对组件进行开发调试 ​

组件开发目录 ​

ZUI3 每个组件在一个独立的目录内，拥有自己的 package.json 文件，使得组件可以独立作为 npm 包来使用，也可以单独作为子项目进行开发维护。

提示

通常组件通过在 package.json 文件中设置属性 private: true 来让包仅在 zui3 工作空间内可用，但组件仍然拥有作为公开的包发布到 npm 上进行独立使用。

文档开发服务 ​

启动 ZUI 文档网站开发服务执行如下命令：

shell
$ pnpm docs:dev

此命令会先打包 ZUI 并启动文档开发服务器，默认情况下可以通过网址：http://localhost:5174/ 来访问文档开发服务页面。

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/guide/customize/exts-lib.html b/dev/guide/customize/exts-lib.html index 9f5b702c58..ee86441549 100644 --- a/dev/guide/customize/exts-lib.html +++ b/dev/guide/customize/exts-lib.html @@ -14,8 +14,8 @@ - - + + @@ -23,7 +23,7 @@
ZUI 3

Appearance

组件库扩展 ​

ZUI3 组件库内置了大量组件，并支持集中开发、调试和打包，其中打包还支持只选择指定的组件进行个性化定制，同步输出组件库文档。但当需求扩展到组件库之外时，就需要用到扩展组件库了。ZUI3 支持扩展组件库模式，可以从其他位置引入一个或多个组件库目录，享受集中开发、调试和打包。下面介绍扩展组件库的使用方法。

定义扩展库 ​

扩展组件库可以来自本地系统的任意位置，只需要提供一个路径，例如：

txt
/Users/TaiJi/Projects/zui3_exts/lib/

扩展组件库的目录结构与 ZUI3 /lib/ 下的目录结构一致，下面的每个子目录为一个独立的组件，详细定义参考 开发文档。

添加扩展库 ​

在 zui3 项目根目录执行：

shell
$ pnpm extend-lib -- <ext_lib_path> <lib_name>

其中参数 ext_lib_path 为扩展组件库路径，<lib_name> 为扩展组件库名称。例如：

shell
$ pnpm extend-lib -- /Users/TaiJi/Projects/zui3_exts/lib/ zentao

执行上述命令之后，会将组件库目录文件拷贝到 zui3/lib_name 目录下，同时会在 zui3/exts/libs.json 文件中记录此扩展库的名称和路径。

json
{
     "zentao": "/Users/TaiJi/Projects/zui3_exts/lib/*"
 }

实际上，你也可以通过自己编辑这个文件来添加扩展库。

启动开发服务 ​

要在开发模式中包含对扩展组件库的开发调试，只需要执行如下命令代替 pnpm dev 命令即可：

shell
$ pnpm dev:exts

当添加了多个扩展库时，上述命令会包含所有扩展库，有时只需要包含特定的扩展库，只需要自定义 --lib 参数即可：

shell
$ pnpm dev:exts --lib=zui,zentao

启动文档服务器 ​

要在文档网站服务模式中包含对扩展组件库的文档支持，只需要如下命令代替 pnpm docs:dev 命令即可：

shell
$ pnpm docs:dev:exts

打包 ​

打包时如果需要将扩展库中的组件也进行打包，则需要添加 --exts 参数，然后就可以在需要打包的组件清单中指定扩展库中的组件名称：

shell
$ pnpm build -- label @zentao/status-label --exts

如果不指定名称，则默认打包仍然只打包内置组件库的组件，例如下面的命令仍然相当于 pnpm build：

shell
$ pnpm build -- --exts

如果需要将所有内置组件库和扩展库中的所有组件一并打包，可以使用如下命令：

shell
$ pnpm build -- zui+exts --exts --name=zentao

当添加了多个扩展库时，上述命令会包含所有扩展库，有时只需要包含特定的扩展库，只需要自定义 --exts 参数即可：

shell
$ pnpm build -- zui+exts --exts=zui,zentao

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/guide/index.html b/dev/guide/index.html index 2ac524fe5b..963c7752a0 100644 --- a/dev/guide/index.html +++ b/dev/guide/index.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

指引 ​

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/guide/start/compatibility.html b/dev/guide/start/compatibility.html index cff6e90081..5d7750086e 100644 --- a/dev/guide/start/compatibility.html +++ b/dev/guide/start/compatibility.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

兼容性 ​

支持的浏览器 ​

  • Chrome：49+
  • Firefox：45+
  • Safari：10+
  • Edge：13+
  • Chrome for Android：112+
  • iOS Safari：10+

用到的第三方库 ​

在 ZUI 3 中使用了一些精心挑选的第三方库，这些库通常足够小巧但实用：

  • preact - 基于 Preact 实现了大部分 JS 组件，通过封装支持原生调用
  • cash-dom - 提供了大量辅助方法方便操作 DOM，同时提供了对 jQuery 的兼容实用方式
  • floating UI - 实现浮动交互定位，例如下拉菜单、工具提示等
  • tinykeys - 实现快捷键功能

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/guide/start/index.html b/dev/guide/start/index.html index 4daef5b8dc..c8dc0ab66c 100644 --- a/dev/guide/start/index.html +++ b/dev/guide/start/index.html @@ -12,10 +12,10 @@ - + - - + + @@ -36,7 +36,7 @@ <a class="btn" href="/">访问 ZUI 网站</a> <script src="./zui/zui.js"></script> </body> -</html>

使用 CDN ​

使用 CDN 可以快速使用 ZUI，与下载使用基本一样，只需要将相关资源文件替换为 CDN 上的地址即可：

html
<!doctype html>
+</html>

使用 CDN ​

使用 CDN 可以快速使用 ZUI，与下载使用基本一样，只需要将相关资源文件替换为 CDN 上的地址即可：

html
<!doctype html>
 <html lang="zh-CN">
   <head>
     <meta charset="utf-8">
@@ -96,7 +96,7 @@
 
 zui.Messager.show('Hello!');

如果你仅仅需要 ZUI 中的单个组件，例如 数据表格，你可以这样导入：

js
import {DTable} from 'zui/lib/dtable';
 import 'zui/lib/dtable/css';
- + \ No newline at end of file diff --git a/dev/hashmap.json b/dev/hashmap.json index ba5e166739..eed712eca1 100644 --- a/dev/hashmap.json +++ b/dev/hashmap.json @@ -1 +1 @@ -{"guide_config_base_font.md":"Ba4TxUmX","guide_start_compatibility.md":"q89QWNkS","guide_config_base_spacing.md":"B653NiFv","guide_start_index.md":"DSDqE0Ii","guide_config_base_shadow.md":"BNzZgBvC","lib_components_avatar_index.md":"7j-ew9BZ","guide_config_base_rounded.md":"-jZtXV-b","lib_components_avatar-group_index.md":"BqwB9RZP","lib_components_btn-group_index.md":"5V7X7r4P","guide_index.md":"t3LZT4QY","guide_config_base_color.md":"B8wXYfl6","lib_components_dashboard_index.md":"DRaM25zK","lib_components_breadcrumb_index.md":"9pymY2C8","lib_components_button_index.md":"C214-n31","guide_config_base_screens.md":"CXV8MRfe","index.md":"0I4m7CHi","lib_components_nav_js.md":"OePgMXXa","guide_customize_dev.md":"DnacC27M","lib_components_color-picker_index.md":"TddEDwtA","lib_components_label_index.md":"q76w0qb_","lib_components_table_index.md":"Ck9c8Ek4","lib_components_progress_index.md":"CEtektTK","lib_components_toolbar_js.md":"ih1Bb-Rr","utilities_effects_utilities_shadow.md":"CaSFSOMl","utilities_flex_utilities_align-content.md":"BXGtlw9g","utilities_flex_utilities_align-self.md":"FvSQ-0Fm","lib_helpers_core_cash.md":"BBNx4yIr","utilities_flex_utilities_flex.md":"BlvjgLjv","utilities_effects_utilities_opacity.md":"BcIL05hy","utilities_flex_utilities_gap.md":"DArM8pom","utilities_flex_utilities_align-items.md":"CoFxBC8U","lib_components_tree_index.md":"Dn03SufJ","utilities_flex_utilities_order.md":"CfeTP7tL","utilities_flex_utilities_basis.md":"CD8bfBkC","utilities_flex_utilities_grow.md":"Cn0nOehN","utilities_borders_utilities_ring-width.md":"DzwqJDAb","lib_components_tooltip_index.md":"Co1ECN3g","lib_index.md":"Ci-MFpvh","utilities_borders_utilities_ring-offset.md":"DVb4azgP","utilities_spacing_utilities_margin.md":"C9jBOzP9","utilities_borders_utilities_border-width.md":"DVKauZHZ","lib_components_contextmenu_index.md":"DmEkUwKC","utilities_borders_utilities_divider.md":"khTQtOjv","utilities_borders_utilities_ring-color.md":"s0nb0vey","lib_components_upload-imgs_index.md":"erXa6IN9","utilities_layout_utilities_display.md":"DcXW9WtS","utilities_index.md":"CTpyUmIw","lib_components_messager_index.md":"BW-SbOyW","lib_helpers_helpers_string-helper.md":"me2jtoF5","lib_components_progress-circle_index.md":"B0UUIqGM","utilities_flex_utilities_shrink.md":"CangfHwT","lib_components_upload_index.md":"CzVklHlh","lib_components_scrollbar_index.md":"BjI3vUqu","lib_components_menu_js.md":"CtCBsfaZ","guide_customize_exts-lib.md":"BKuxQGR7","lib_components_kanban_index.md":"BFBze8B1","lib_components_pager_index.md":"D-bROEeS","utilities_skin_utilities_surface.md":"CN20jMqq","utilities_typography_utilities_word-break.md":"BxSlEVBy","utilities_borders_utilities_border-radius.md":"Dh1Nfe3A","utilities_flex_utilities_wrap.md":"DZ1moX26","guide_customize_build.md":"CwkGJfdc","lib_components_picker_index.md":"BxKuBKTw","lib_components_pager_js.md":"DDMQ9lXw","lib_components_nav_index.md":"LeXRijcV","lib_components_alert_index.md":"Bep50ZBz","utilities_interactivity_utilities_scroll.md":"-0JODEPX","lib_components_dropdown_index.md":"DbbvFq7u","lib_forms_checkbox_switch.md":"QH8sYaT3","lib_forms_datetime-picker_datetime.md":"CPkUUpoa","public_zui_icons_fontawesome-license.md":"gfk3cURr","utilities_skin_utilities_solid.md":"DDXu0yXc","utilities_sizing_utilities_width.md":"DNXQWQFd","lib_forms_datetime-picker_time.md":"CNcyRWFH","utilities_skin_utilities_ghost.md":"cxxai5pM","lib_components_modal_trigger.md":"BMBZZybJ","utilities_skin_utilities_outline.md":"bsC71Qhi","utilities_skin_utilities_pale.md":"D1L1NRKs","utilities_effects_utilities_transition.md":"SqXrre1m","utilities_interactivity_utilities_loading.md":"Da_3FM-1","lib_components_file-selector_index.md":"DvywDJ4t","utilities_spacing_utilities_padding.md":"DuVwhAAe","utilities_effects_utilities_transform.md":"DOI7WnD2","utilities_typography_utilities_text-color.md":"D1fjRsa-","utilities_layout_utilities_aspect-ratio.md":"_oWsoIYV","lib_components_panel_index.md":"CoS14bNk","utilities_layout_utilities_object-fit.md":"D4YmLxEC","utilities_layout_utilities_visibility.md":"CKuADuoh","utilities_sizing_utilities_height.md":"CdF7aUuw","utilities_interactivity_utilities_pointer-events.md":"BtGq2TRI","utilities_flex_utilities_justify-content.md":"D4BVZfVC","utilities_typography_utilities_line-clamp.md":"CvO9OG4z","utilities_typography_utilities_text-overflow.md":"CCaD8PoB","utilities_flex_utilities_direction.md":"ByjEgbMo","lib_components_menu_index.md":"GncmWrZR","utilities_interactivity_utilities_state.md":"0ZTXUBo7","lib_helpers_store_index.md":"Bb0Q5VMq","utilities_layout_utilities_floats.md":"pUvtfQiw","utilities_effects_utilities_animation.md":"B91izYvM","utilities_typography_utilities_font-size.md":"B3W8gyR3","utilities_typography_utilities_vertical-align.md":"DiLQT3Ni","utilities_typography_utilities_font-family.md":"BHWBVXg4","lib_components_search-box_index.md":"C6d4tMjv","lib_forms_datetime-picker_date.md":"D59eL2rp","lib_components_tabs_index.md":"D-2YSS_0","utilities_borders_utilities_border-color.md":"YFsIdVzo","utilities_layout_utilities_container.md":"CoO_yfrQ","lib_forms_input-group_index.md":"BMbSYMAL","lib_components_modal_index.md":"CgbVseyc","themes_index.md":"BufleTaf","lib_forms_form-control_index.md":"BiHmr69s","utilities_interactivity_utilities_disabled.md":"D0jvD9y2","utilities_effects_utilities_filter.md":"BECjG4KT","utilities_interactivity_utilities_user-select.md":"BrNPbIfK","lib_helpers_helpers_date-helper.md":"8AhG85Op","utilities_layout_utilities_z-index.md":"DKY1uWyd","utilities_backgrounds_utilities_index.md":"83vrBdjK","utilities_layout_utilities_position.md":"rEqgc51a","utilities_typography_utilities_whitespace.md":"BFKZWjDW","utilities_typography_utilities_text-transform.md":"CM7k043G","utilities_layout_utilities_top-right-bottom-left.md":"C3lYdIa5","utilities_spacing_utilities_space.md":"xgZHI4vS","utilities_layout_utilities_overflow.md":"DVHk2FQA","utilities_typography_utilities_list-style.md":"LuK8VgZf","lib_helpers_core_component.md":"xZvBwXNR","utilities_typography_utilities_text-decoration.md":"BvY6hqYi","lib_forms_input-control_index.md":"Cv0HAFHI","utilities_typography_utilities_font-weight.md":"CV3nf15_","utilities_typography_utilities_leading.md":"DOlxRw-6","lib_forms_checkbox_index.md":"D_VspyHI","lib_components_toolbar_index.md":"DvojQFd3","utilities_interactivity_utilities_cursor.md":"DvV2lotG","utilities_typography_utilities_text-align.md":"CtJ4rtrI","lib_components_dtable_plugins.md":"CrBZnIMk","lib_components_dtable_index.md":"BffsFMb4","lib_forms_form_index.md":"sRq2u4jF"} +{"guide_customize_exts-lib.md":"BKuxQGR7","guide_customize_dev.md":"DnacC27M","lib_components_avatar_index.md":"7j-ew9BZ","guide_config_base_shadow.md":"BNzZgBvC","lib_components_btn-group_index.md":"5V7X7r4P","lib_components_pager_js.md":"DDMQ9lXw","lib_components_avatar-group_index.md":"BqwB9RZP","lib_components_kanban_index.md":"BFBze8B1","lib_components_menu_js.md":"CtCBsfaZ","lib_components_label_index.md":"q76w0qb_","lib_components_menu_index.md":"GncmWrZR","guide_start_compatibility.md":"q89QWNkS","lib_components_messager_index.md":"BW-SbOyW","lib_components_file-selector_index.md":"DvywDJ4t","lib_components_button_index.md":"C214-n31","lib_components_tree_index.md":"Dn03SufJ","guide_customize_build.md":"CwkGJfdc","guide_config_base_rounded.md":"-jZtXV-b","lib_components_tooltip_index.md":"Co1ECN3g","lib_components_breadcrumb_index.md":"9pymY2C8","index.md":"0I4m7CHi","lib_components_nav_index.md":"LeXRijcV","guide_config_base_screens.md":"CXV8MRfe","lib_components_dtable_index.md":"BffsFMb4","lib_forms_form-control_index.md":"BiHmr69s","guide_config_base_color.md":"B8wXYfl6","guide_start_index.md":"BS9e9PLJ","lib_components_alert_index.md":"Bep50ZBz","utilities_effects_utilities_shadow.md":"CaSFSOMl","lib_components_upload_index.md":"CzVklHlh","guide_index.md":"t3LZT4QY","lib_components_nav_js.md":"OePgMXXa","lib_forms_datetime-picker_datetime.md":"CPkUUpoa","utilities_borders_utilities_ring-offset.md":"DVb4azgP","lib_components_pager_index.md":"D-bROEeS","lib_forms_input-control_index.md":"Cv0HAFHI","lib_helpers_store_index.md":"Bb0Q5VMq","lib_index.md":"Ci-MFpvh","public_zui_icons_fontawesome-license.md":"gfk3cURr","utilities_backgrounds_utilities_index.md":"83vrBdjK","utilities_borders_utilities_border-color.md":"YFsIdVzo","utilities_borders_utilities_border-radius.md":"Dh1Nfe3A","utilities_borders_utilities_border-width.md":"DVKauZHZ","utilities_borders_utilities_divider.md":"khTQtOjv","utilities_borders_utilities_ring-color.md":"s0nb0vey","utilities_effects_utilities_transform.md":"DOI7WnD2","lib_helpers_core_component.md":"xZvBwXNR","lib_components_toolbar_js.md":"ih1Bb-Rr","utilities_flex_utilities_gap.md":"DArM8pom","themes_index.md":"BufleTaf","lib_components_scrollbar_index.md":"BjI3vUqu","lib_forms_form_index.md":"sRq2u4jF","lib_components_toolbar_index.md":"DvojQFd3","lib_forms_datetime-picker_date.md":"D59eL2rp","guide_config_base_font.md":"Ba4TxUmX","lib_forms_datetime-picker_time.md":"CNcyRWFH","lib_components_progress_index.md":"CEtektTK","lib_forms_checkbox_index.md":"D_VspyHI","lib_components_modal_trigger.md":"BMBZZybJ","lib_components_table_index.md":"Ck9c8Ek4","lib_helpers_helpers_string-helper.md":"me2jtoF5","lib_components_dtable_plugins.md":"CrBZnIMk","guide_config_base_spacing.md":"B653NiFv","utilities_typography_utilities_text-decoration.md":"BvY6hqYi","lib_components_dashboard_index.md":"DRaM25zK","lib_components_progress-circle_index.md":"B0UUIqGM","utilities_typography_utilities_text-overflow.md":"CCaD8PoB","lib_components_panel_index.md":"CoS14bNk","utilities_layout_utilities_top-right-bottom-left.md":"C3lYdIa5","utilities_layout_utilities_position.md":"rEqgc51a","utilities_typography_utilities_whitespace.md":"BFKZWjDW","utilities_typography_utilities_text-transform.md":"CM7k043G","utilities_typography_utilities_vertical-align.md":"DiLQT3Ni","lib_helpers_helpers_date-helper.md":"8AhG85Op","utilities_typography_utilities_word-break.md":"BxSlEVBy","lib_forms_checkbox_switch.md":"QH8sYaT3","lib_components_tabs_index.md":"D-2YSS_0","lib_components_search-box_index.md":"C6d4tMjv","utilities_borders_utilities_ring-width.md":"DzwqJDAb","utilities_effects_utilities_animation.md":"B91izYvM","utilities_effects_utilities_filter.md":"BECjG4KT","utilities_effects_utilities_transition.md":"SqXrre1m","utilities_flex_utilities_align-content.md":"BXGtlw9g","utilities_flex_utilities_align-items.md":"CoFxBC8U","utilities_flex_utilities_align-self.md":"FvSQ-0Fm","utilities_flex_utilities_basis.md":"CD8bfBkC","utilities_flex_utilities_direction.md":"ByjEgbMo","utilities_flex_utilities_flex.md":"BlvjgLjv","utilities_flex_utilities_grow.md":"Cn0nOehN","lib_components_picker_index.md":"BxKuBKTw","utilities_flex_utilities_order.md":"CfeTP7tL","utilities_flex_utilities_shrink.md":"CangfHwT","utilities_flex_utilities_wrap.md":"DZ1moX26","utilities_index.md":"CTpyUmIw","utilities_layout_utilities_overflow.md":"DVHk2FQA","lib_components_contextmenu_index.md":"DmEkUwKC","lib_forms_input-group_index.md":"BMbSYMAL","utilities_effects_utilities_opacity.md":"BcIL05hy","lib_components_upload-imgs_index.md":"erXa6IN9","utilities_typography_utilities_line-clamp.md":"CvO9OG4z","lib_components_color-picker_index.md":"TddEDwtA","utilities_interactivity_utilities_cursor.md":"DvV2lotG","utilities_interactivity_utilities_disabled.md":"D0jvD9y2","utilities_typography_utilities_list-style.md":"LuK8VgZf","lib_components_modal_index.md":"CgbVseyc","utilities_typography_utilities_text-color.md":"D1fjRsa-","utilities_typography_utilities_leading.md":"DOlxRw-6","lib_components_dropdown_index.md":"DbbvFq7u","utilities_typography_utilities_font-family.md":"BHWBVXg4","utilities_interactivity_utilities_loading.md":"Da_3FM-1","utilities_interactivity_utilities_pointer-events.md":"BtGq2TRI","utilities_interactivity_utilities_scroll.md":"-0JODEPX","utilities_interactivity_utilities_state.md":"0ZTXUBo7","utilities_interactivity_utilities_user-select.md":"BrNPbIfK","utilities_layout_utilities_aspect-ratio.md":"_oWsoIYV","utilities_layout_utilities_container.md":"CoO_yfrQ","utilities_layout_utilities_display.md":"DcXW9WtS","utilities_layout_utilities_floats.md":"pUvtfQiw","utilities_layout_utilities_visibility.md":"CKuADuoh","utilities_layout_utilities_z-index.md":"DKY1uWyd","utilities_sizing_utilities_height.md":"CdF7aUuw","utilities_skin_utilities_ghost.md":"cxxai5pM","utilities_sizing_utilities_width.md":"DNXQWQFd","utilities_skin_utilities_outline.md":"bsC71Qhi","utilities_skin_utilities_pale.md":"D1L1NRKs","utilities_skin_utilities_solid.md":"DDXu0yXc","utilities_skin_utilities_surface.md":"CN20jMqq","utilities_spacing_utilities_margin.md":"C9jBOzP9","utilities_spacing_utilities_padding.md":"DuVwhAAe","utilities_spacing_utilities_space.md":"xgZHI4vS","utilities_typography_utilities_font-size.md":"B3W8gyR3","utilities_typography_utilities_font-weight.md":"CV3nf15_","utilities_typography_utilities_text-align.md":"CtJ4rtrI","lib_helpers_core_cash.md":"BBNx4yIr","utilities_layout_utilities_object-fit.md":"D4YmLxEC","utilities_flex_utilities_justify-content.md":"D4BVZfVC"} diff --git a/dev/index.html b/dev/index.html index 1f343845b4..6b4af8881d 100644 --- a/dev/index.html +++ b/dev/index.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

ZUI 3

开箱即用的组合式前端 UI 框架

快速开始
GitHub
⚡️

开箱即用，按需加载

采用基础 + 组件库模式，按需使用

💎

丰富的组件库

实用 CSS 工具类 + 强大的 JS 组件库

🛠️

丰富主题，灵活定制

深色模式，自定义主题，定制打包

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/lib/components/alert/index.html b/dev/lib/components/alert/index.html index 0db91e6cd7..7777e5073d 100644 --- a/dev/lib/components/alert/index.html +++ b/dev/lib/components/alert/index.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

消息框 ​

消息框能够轻松展示一些需要引起用户注意的内容。

基本使用 ​

为元素添加 alert 类来获得消息框的外观。

嘿！这是一则提示。

包含链接 ​

使用 .alert-link 类来为消息框内的链接添加样式。

Hi! 这条消息可能需要你注意。了解更多

包含关闭按钮 ​

使用 .alert-close 类来为消息框内的关闭按钮添加样式。絮语注意到是当需要在消息框中包含更多内容时，需要将消息文本放置在 .alert-text 中。

嘿！这是一则提示。了解更多

包含操作按钮 ​

像添加关闭按钮一样，还可以添加其他操作按钮：

嘿！这是一则提示。了解更多

可以将多个按钮放在工具栏中：

嘿！这是一则提示。了解更多

外观类型 ​

配合丰富的 CSS 工具类 来实现不同消息框的外观。

嘿！这是一则提示。
嘿！这是一则提示。
嘿！这是一则提示。
嘿！这是一则提示。
嘿！这是一则提示。
嘿！这是一则提示。
嘿！这是一则提示。

CSS 类 ​

消息框提供了如下 CSS 类：

类类型作用
alert实体类元素作为消息框组件
alert-icon实体类元素作为消息框内左侧图标
alert-close实体类元素作为消息框关闭按钮
alert-text实体类元素作为消息框文本内容

CSS 变量 ​

消息框提供了如下 CSS 变量：

变量名称变量含义
--alert-bg消息框默认背景色

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/lib/components/avatar-group/index.html b/dev/lib/components/avatar-group/index.html index eff29625df..9a4006d0ce 100644 --- a/dev/lib/components/avatar-group/index.html +++ b/dev/lib/components/avatar-group/index.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

头像组 ​

头像组用于将多个头像堆叠显示。

基本使用 ​

将多个头像放置在 <div class="avatar-group"> 内即可创建一个头像组。

+10

尺寸 ​

当使用不同大小的头像时，可以通过为 .avatar-group 添加同样等级的 size-* 辅助类已获得统一的堆叠间距。

堆叠间距 ​

使用工具类 gap-* 来调整堆叠间距。默认间距等同于 gap-2.5，小于 2.5 将使得间距比默认间距更小，反之则更大。

0
1
2
2.5
3
3.5

CSS 类 ​

头像组提供了如下 CSS 类：

类类型作用
avatar-group实体类元素作为头像组组件
size-xs工具类头像组使用超小号尺寸
size-sm工具类头像组使用小号尺寸
size-lg工具类头像组使用大号尺寸
size-xl工具类头像组使用超大号尺寸

参考 ​

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/lib/components/avatar/index.html b/dev/lib/components/avatar/index.html index 4a216d781b..b933ca2252 100644 --- a/dev/lib/components/avatar/index.html +++ b/dev/lib/components/avatar/index.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

头像 ​

头像是用图片、图标或者文字的形式展示用户及具有特殊标识的其他对象。

基本使用 ​

为元素并添加类 .avatar，然后将作为图像的图片、文字或图标放置在此元素内。

Z

提示

当使用文字作为头像时，建议文字数目不要超过 2 个，如果需要显示更多文字进行个性化排版，推荐使用 JavaScript 增强的头像插件。

头像形状 ​

搭配 CSS 工具类 rounded-* 为头像应用不同的圆角样式。

外观类型 ​

当使用文字或图标作为头像时，配合使用CSS 工具类来实现不同头像的外观。下面展示各种工具类的外观效果。

Z
Z
Z
Z

尺寸 ​

除了默认大小，还提供了额外的 4 种预设尺寸，通过 size-* 来为头像设置尺寸。

X
S
Z
LG
XL

CSS 类 ​

头像提供了如下 CSS 类：

类类型作用
avatar实体类元素作为头像组件
size-xs工具类头像使用超小号尺寸
size-sm工具类头像使用小号尺寸
size-lg工具类头像使用大号尺寸
size-xl工具类头像使用超大号尺寸

CSS 变量 ​

头像提供了如下 CSS 变量，可进行全局修改：

CSS 变量名作用
--avatar-radius头像默认圆角大小
--avatar-bg头像默认背景颜色

参考 ​

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/lib/components/breadcrumb/index.html b/dev/lib/components/breadcrumb/index.html index ada6b9836f..66a65dd5f5 100644 --- a/dev/lib/components/breadcrumb/index.html +++ b/dev/lib/components/breadcrumb/index.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

面包屑 ​

基本使用 ​

使用类 .breadcrumb 来实现面包屑，通常搭配 <ol>、<li> 元素使用。

  1. 首页
  2. 图书馆
  3. 数据

CSS 类 ​

面包屑提供了如下 CSS 类

类类型作用
breadcrumb实体类元素作为面包屑组件

CSS 变量 ​

变量名称变量含义
--breadcrumb-divider面包屑分割元素标签类型
--breadcrumb-divider-color面包屑分割元素颜色
--breadcrumb-color-active面包屑选中态元素颜色

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/lib/components/btn-group/index.html b/dev/lib/components/btn-group/index.html index 8506ec514e..3ef16ba26f 100644 --- a/dev/lib/components/btn-group/index.html +++ b/dev/lib/components/btn-group/index.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

按钮组 ​

按钮组可以将多个按钮成组展示。

使用方法 ​

将多个 按钮 放置在 <div class="btn-group"> 内即可创建一个按钮组。

多组按钮 ​

使用 CSS 工具类 .row 搭配 .gap-* 实现多组按钮效果。

尺寸 ​

在 .btn-group 上配合使用工具类 size-* 来获得不同大小的按钮组。

外观 ​

在按钮上加 CSS 工具类，以获得不同的按钮外观显示。

使用下拉菜单 ​

可以在按钮组中使用下拉菜单，只需要将启用下拉菜单的按钮放置于按钮组中即可。

CSS 类 ​

按钮提供了如下 CSS 类：

类类型作用
btn-group实体类元素作为按钮组组件
size-xs工具类按钮组使用超小号尺寸
size-sm工具类按钮组使用小号尺寸
size-lg工具类按钮组使用大号尺寸
size-xl工具类按钮组使用超大号尺寸

参考 ​

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- + \ No newline at end of file diff --git a/dev/lib/components/button/index.html b/dev/lib/components/button/index.html index d904813320..bc62c6c2bc 100644 --- a/dev/lib/components/button/index.html +++ b/dev/lib/components/button/index.html @@ -14,14 +14,14 @@ - - + + -
ZUI 3

Appearance

按钮 ​

按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。

使用方法 ​

使用 .btn 类来获得按钮的外观和交互体验，通常用在元素 <button> 或 <a> 上。

配合丰富的CSS 工具类来实现不同按钮的外观。

图标按钮 ​

按钮配合图标组件一起使用时，自动呈现为图标按钮。

外观 ​

外观类型 ​

配合使用CSS 工具类来实现不同按钮的外观。下面展示各种工具类的外观效果。

按钮圆角 ​

搭配 CSS 工具类 rounded-* 为按钮应用不同的圆角样式。

按钮阴影效果 ​

搭配 CSS 工具类 shadow-* 为按钮应用不同的阴影样式。

尺寸 ​

除了默认大小，按钮还提供了额外的 4 种预设尺寸。

形状 ​

正方形按钮 ​

通过工具类 square 可以让按钮获得正方形外观，通常作为图标按钮使用。

圆形按钮 ​

当与工具类 circle 与 square 一起使用时则获得圆形按钮。

状态 ​

禁用状态 ​

为按钮提供 disabled="disabled" 属性或 disabled 工具类来禁用按钮。被禁用的按钮将无法响应点击事件。

激活状态 ​

为按钮添加 active 类启用激活状态。

加载中状态 ​

为按钮提供动画图标实现加载中状态。

CSS 类 ​

按钮提供了如下 CSS 类：

类类型作用
btn实体类元素作为按钮组件
square工具类按钮使用正方形外观
size-xs工具类按钮使用超小号尺寸
size-sm工具类按钮使用小号尺寸
size-lg工具类按钮使用大号尺寸
size-xl工具类按钮使用超大号尺寸

CSS 变量 ​

变量名称变量含义
--btn-radius按钮圆角
--btn-bg按钮背景颜色
--btn-border-color按钮边框颜色

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- +
ZUI 3

Appearance

按钮 ​

按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。

使用方法 ​

使用 .btn 类来获得按钮的外观和交互体验，通常用在元素 <button> 或 <a> 上。

配合丰富的CSS 工具类来实现不同按钮的外观。

图标按钮 ​

按钮配合图标组件一起使用时，自动呈现为图标按钮。

外观 ​

外观类型 ​

配合使用CSS 工具类来实现不同按钮的外观。下面展示各种工具类的外观效果。

按钮圆角 ​

搭配 CSS 工具类 rounded-* 为按钮应用不同的圆角样式。

按钮阴影效果 ​

搭配 CSS 工具类 shadow-* 为按钮应用不同的阴影样式。

尺寸 ​

除了默认大小，按钮还提供了额外的 4 种预设尺寸。

形状 ​

正方形按钮 ​

通过工具类 square 可以让按钮获得正方形外观，通常作为图标按钮使用。

圆形按钮 ​

当与工具类 circle 与 square 一起使用时则获得圆形按钮。

状态 ​

禁用状态 ​

为按钮提供 disabled="disabled" 属性或 disabled 工具类来禁用按钮。被禁用的按钮将无法响应点击事件。

激活状态 ​

为按钮添加 active 类启用激活状态。

加载中状态 ​

为按钮提供动画图标实现加载中状态。

CSS 类 ​

按钮提供了如下 CSS 类：

类类型作用
btn实体类元素作为按钮组件
square工具类按钮使用正方形外观
size-xs工具类按钮使用超小号尺寸
size-sm工具类按钮使用小号尺寸
size-lg工具类按钮使用大号尺寸
size-xl工具类按钮使用超大号尺寸

CSS 变量 ​

变量名称变量含义
--btn-radius按钮圆角
--btn-bg按钮背景颜色
--btn-border-color按钮边框颜色

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

+ \ No newline at end of file diff --git a/dev/lib/components/color-picker/index.html b/dev/lib/components/color-picker/index.html index 3d56a48dec..a019694459 100644 --- a/dev/lib/components/color-picker/index.html +++ b/dev/lib/components/color-picker/index.html @@ -14,14 +14,14 @@ - - + + -
ZUI 3

Appearance

颜色选择器 ​

基于下拉选择器实现的颜色选择器。

基本使用 ​

在选定元素上调用初始化函数即可使用颜色选择器。

自定义颜色 ​

通过设置 colors 属性自定义颜色列表，可以指定一个表示颜色的字符串数组，也可以通过英文逗号拼接多个颜色一起指定。

自定义图标 ​

通过设置 icon 属性自定义颜色显示图标。

同步颜色 ​

通过为 syncValue、syncColor、syncBackground、syncBorder 设置选择器可实现将当前选中的颜色信息同步到相应元素。

颜色值：
文字颜色
背景色
边框色

配合使用 ​

作为按钮 ​

在输入组中使用 ​

在输入框中使用 ​

选项 ​

名称类型默认值说明
headingstringnull颜色面板标题。 colors?: string | string[]; // 颜色选项列表。 icon?: string; // 显示为图标的名称。 closeBtn?: boolean = true; // 颜色面板是否使用关闭按钮。 syncValue?: string; // 颜色值容器选择器。 syncColor?: string; // 文本色同步容器选择器。 syncBackground?: string; // 背景色同步容器选择器。 syncBorder?: string; // 边框色同步容器选择器。

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

- +
ZUI 3

Appearance

颜色选择器 ​

基于下拉选择器实现的颜色选择器。

基本使用 ​

在选定元素上调用初始化函数即可使用颜色选择器。

自定义颜色 ​

通过设置 colors 属性自定义颜色列表，可以指定一个表示颜色的字符串数组，也可以通过英文逗号拼接多个颜色一起指定。

自定义图标 ​

通过设置 icon 属性自定义颜色显示图标。

同步颜色 ​

通过为 syncValue、syncColor、syncBackground、syncBorder 设置选择器可实现将当前选中的颜色信息同步到相应元素。

颜色值：
文字颜色
背景色
边框色

配合使用 ​

作为按钮 ​

在输入组中使用 ​

在输入框中使用 ​

选项 ​

名称类型默认值说明
headingstringnull颜色面板标题。 colors?: string | string[]; // 颜色选项列表。 icon?: string; // 显示为图标的名称。 closeBtn?: boolean = true; // 颜色面板是否使用关闭按钮。 syncValue?: string; // 颜色值容器选择器。 syncColor?: string; // 文本色同步容器选择器。 syncBackground?: string; // 背景色同步容器选择器。 syncBorder?: string; // 边框色同步容器选择器。

MIT License (MIT)

Copyright (C) 2023 cnezsoft.com

+ \ No newline at end of file diff --git a/dev/lib/components/contextmenu/index.html b/dev/lib/components/contextmenu/index.html index 17bff2b492..3179584451 100644 --- a/dev/lib/components/contextmenu/index.html +++ b/dev/lib/components/contextmenu/index.html @@ -14,8 +14,8 @@ - - + + @@ -115,7 +115,7 @@ }); }); </script>

API ​

items 的单个对象属性 ​

text ​

名称。

icon ​

左侧图标。

trailingIcon ​

右侧图标。

className ​

类名。

style ​

样式。

url ​

跳转链接地址。

target ​

在何处打开链接地址。

disabled ​

是否禁用。

active ​

是否是激活状态。

type ​

单项类型。

rootClass ​

与 menu-item 同级类名。

items ​

子级操作数据。

onClick ​

点击操作菜单项的回调事件。

- + \ No newline at end of file diff --git a/dev/lib/components/dashboard/index.html b/dev/lib/components/dashboard/index.html index b34fba0e10..6d39dc5ded 100644 --- a/dev/lib/components/dashboard/index.html +++ b/dev/lib/components/dashboard/index.html @@ -14,8 +14,8 @@ - - + + @@ -82,7 +82,7 @@ blockMenu?: ContextMenuOptions; onLayoutChange?: (blocks: BlockSetting[]) => void; }; - + \ No newline at end of file diff --git a/dev/lib/components/dropdown/index.html b/dev/lib/components/dropdown/index.html index ed4aecc44b..08831bcb64 100644 --- a/dev/lib/components/dropdown/index.html +++ b/dev/lib/components/dropdown/index.html @@ -14,14 +14,14 @@ - - + +
ZUI 3

Appearance

下拉菜单 ​

将动作或菜单折叠到下拉菜单中。

使用方法 ​

为触发按钮添加属性 data-toggle="dropdown"，然后在触发按钮之后添加一个 .dropdown-menu 用于定义菜单列表。

  • 操作
  • 另一个操作
  • 更多操作

    • 关联菜单元素 ​

    你还可以在触发按钮上通过 data-target 属性来指定要打开的菜单列表元素，这样不用要求触发按钮和菜单列表元素之间必须按顺序紧邻。

  • 操作
  • 另一个操作
  • 更多操作

    • 手动初始化 ​

    你可以通过 new zui.Dropdown() 方法在触发按钮上动态初始化下拉菜单组件，这样无需为触发按钮添加属性 data-toggle="dropdown"，以及预先创建下拉菜单列表元素 .dropdown-menu。

  • 操作
  • 另一个操作
  • 更多操作

    • 显示箭头 ​

    通过给下拉菜单菜单按钮添加 data-arrow="true" 来使下拉菜单展示箭头。

  • 操作
  • 另一个操作
  • 更多操作

    • 改变箭头大小 ​

    通过给下拉菜单按钮添加 data-arrow={size} 来控制下拉菜单的箭头的大小。

    data-arrow = 4
  • 操作
  • 另一个操作
  • 更多操作
    • data-arrow = 8
  • 操作
  • 另一个操作
  • 更多操作
    • data-arrow = 12
  • 操作
  • 另一个操作
  • 更多操作

    • 鼠标悬停展开菜单 ​

    为触发按钮添加属性 data-trigger="hover" 实现鼠标悬停展开菜单。

  • 操作
  • 另一个操作
  • 更多操作

    • 浮动方向 ​

    通过 data-placement=* 属性控制弹出方向。

  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = top-start
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = top
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = top-end
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = bottom-start
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = bottom
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = bottom-end
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = left-start
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = left
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = left-end
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = right-start
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = right
  • 操作
  • 另一个操作
  • 更多操作
    • data-placement = right-end

    多级子菜单 ​

    多级子菜单仅支持通过手动初始化的方式创建。

    自定义菜单 ​

    通常情况下下拉菜单列表使用 <menu> 元素，你也可以替换为其他元素或内容

    51015202530354045505560

    禁用的菜单项 ​

    为菜单项 <li> 添加 .disabled 类即可获得禁用外观。

  • 操作
  • 被禁用的操作

    • 标题和分割线 ​

    在 .dropdown-menu 内 li 标签使用 .dropdown-header类 来显示标题，使用 .divider 来创建分割线。

  • 下拉菜单标题
  • 操作
  • 另一个操作
  • 更多操作
  • 修改

    • CSS 类 ​

    按钮提供了如下 CSS 类：

    类类型作用
    dropdown实体类元素作为下拉菜单组件
    dropdown-menu实体类元素作为下拉菜单列表
    dropdown-header实体类元素作为下拉菜单中的标题
    caret实体类元素作为下拉菜单icon图标
    divider实体类元素作为下拉菜单分割线
    dropup工具类下拉框浮动方向为上方

    CSS 变量 ​

    变量名称变量含义
    --dropmenu-radius下拉菜单圆角
    --dropmenu-border-color下拉菜单边框颜色
    --dropmenu-bg下拉菜单背景颜色
    --dropmenu-active-color下拉菜单条目激活状态文字颜色
    --dropmenu-active-bg下拉菜单条目激活状态背景颜色

    API ​

    操作菜单定义对象。

    trigger ​

    触发方式

    • 类型：click | hover | manual；
    • 必选：否。

    arrow ​

    箭头大小 为 true 则为默认12

    • 类型：boolean | number；
    • 必选：否。

    offset ​

    偏移量

    • 类型：number；
    • 必选：否。

    菜单对象 详细配置可参考 菜单。

    • 类型：object；
    • 必选：否。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/lib/components/dtable/index.html b/dev/lib/components/dtable/index.html index a92983a2a7..dd5d062dab 100644 --- a/dev/lib/components/dtable/index.html +++ b/dev/lib/components/dtable/index.html @@ -14,8 +14,8 @@ - - + + @@ -360,7 +360,7 @@ render(): void; } - + \ No newline at end of file diff --git a/dev/lib/components/dtable/plugins.html b/dev/lib/components/dtable/plugins.html index 5fee416681..b77c07e87f 100644 --- a/dev/lib/components/dtable/plugins.html +++ b/dev/lib/components/dtable/plugins.html @@ -14,8 +14,8 @@ - - + + @@ -750,7 +750,7 @@ /* 表头分组名称。 */ headerGroup?: string; }

    更多插件开发中 ​

    - + \ No newline at end of file diff --git a/dev/lib/components/file-selector/index.html b/dev/lib/components/file-selector/index.html index c4fcee50bf..7aaf54a94e 100644 --- a/dev/lib/components/file-selector/index.html +++ b/dev/lib/components/file-selector/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    文件选择 ​

    界面模式 ​

    文件选择器支持多种界面模式，包括按钮模式、方框模式和网格模式，另外还提供了单独的图片选择器用于选择图片文件。

    按钮模式 ​

    默认模式为按钮模式，点击按钮选择文件，所选择的文件会显示在按钮上方。

    方框模式 ​

    通过设置 mode 属性为 'box' 可以切换为方框模式，所选择的文件会显示在方框下方。方框模式提供了更大的拖放文件放置区域。

    网格模式 ​

    通过设置 mode 属性为 'grid' 可以切换为网格模式，所选择的文件会显示在网格中。网格模式提供了更大的文件预览区域。

    图片选择 ​

    图片选择是基于网格模式的一种预设模式，通过 ImageSelector 可以快速创建一个图片选择器。

    文件限制 ​

    限制文件类型 ​

    通过 accept 来限制文件类型，可以使用 MIME 类型、文件扩展名或通配符，定义与 HTML 的 accept 属性相同。

    限制文件大小 ​

    通过 maxFileSize 来限制单个文件大小，通过 totalFileSize 来限制总文件大小。

    限制文件数目 ​

    通过 maxFileCount 来限制文件数目，如果设置为非大于 0 的数则不限制。

    预设文件 ​

    通过设置 defaultFiles 属性可以预设文件列表，预设文件不会触发 onAdd 回调函数和 onSelect 回调函数。

    禁用 ​

    通过设置 disabled 属性为 true 可以禁用文件选择器。

    个性化配置 ​

    提示信息 ​

    通过 tip 属性可以设置提示信息，在提示信息中可以使用如下占位文本：

    • {size}：文件总大小；
    • {count}：文件数目；
    • {maxFileSize}：最大文件大小；
    • {maxFileCount}：最大文件数目。

    文件图标 ​

    通过设置 fileIcons 属性可以为不同类型的文件（根据扩展名）显示不同的图标。

    显示缩略图 ​

    默认会为图片文件显示缩略图，通过设置 thumbnail 属性为 false 可以关闭缩略图显示。

    文件拖放 ​

    默认情况下用户可以拖放文件到文件选择器中，通过设置 draggable 属性为 false 可以禁用拖放。

    一次选择一个文件 ​

    默认情况下用户可以在操作系统文件选择对话框中一次选择多个文件，通过设置 multiple 属性为 false 可以限制一次只能选择一个文件。

    网格模式配置 ​

    网格模式下可以通过设置 gridWidth、gridHeight 和 gridGap 来调整网格的宽度、高度和间距。

    自定义文件上传按钮 ​

    通过设置 uploadBtn 属性可以自定义文件上传按钮。

    文件操作 ​

    文件重命名 ​

    默认情况下支持对文件进行重命名，通过设置 renameBtn 属性为 false 可以禁用重命名按钮，通过为 renameBtn 属性设置字符串可以自定义重命名按钮的文字，通过为 renameBtn 属性设置对象可以自定义重命名按钮。

    文件移除 ​

    默认情况下支持对文件进行移除，通过设置 removeBtn 属性为 false 可以禁用移除按钮，通过为 removeBtn 属性设置字符串可以自定义移除按钮的文字，通过为 removeBtn 属性设置对象可以自定义移除按钮。

    自定义操作提示信息 ​

    通过设置 removeConfirm、duplicatedTip、exceededSizeTip、exceededTotalSizeTip 和 exceededCountTip 属性可以自定义操作提示信息。

    在提示信息中可以使用如下占位文本：

    • {name}：当前文件名；
    • {size}：当前文件大小；
    • {count}：当前已选择文件数目；
    • {maxFileSize}：最大文件大小；
    • {maxFileCount}：最大文件数目；
    • {totalFileSize}：最大文件数目，仅适用于 exceededTotalSizeTip 提示；
    • {exceededCount}：超出数量，仅适用于 exceededCountTip 提示。

    操作拦截 ​

    通过设置 onRename、onRemove、onAdd、onRemove 选项设置回调函数可以拦截文件操作，通常在回调函数中返回 false 可以阻止继续操作，相关回调函数定义参加选项和 API。

    文件限制拦截 ​

    通过设置 onDuplicated、onExceededSize、onExceededTotalSize 和 onExceededCount 选项可以在触发文件限制时拦截文件操作，通过在回调函数中返回 true 来忽略文件限制，相关回调函数定义参加选项和 API。

    选项 ​

    FileSelectorProps ​

    名称类型默认值说明
    namestringnull作为表单字段的名称。 accept?: string; // 限制文件类型。 disabled?: boolean; // 是否禁用。 mode?: 'button' | 'box' | 'grid' = "button"; // 界面模式。 tip?: string; // 提示信息。 thumbnail?: boolean=true; // 是否显示缩略图。 gridWidth?: string | number; // 网格模式的宽度。 gridHeight?: string | number; // 网格模式的高度。 gridGap?: string | number; // 网格模式的间距。 defaultFiles?: DefaltFileInfo[]; // 默认显示的文件列表。 multiple?: boolean = true; // 是否允许在文件选择对话框中一次性选择多个文件（需要操作系统支持）。 itemProps?: ButtonProps | FileButtonGenerator; // 文件项的属性。 draggable?: boolean = true; // 是否允许拖拽。 fileIcons?: IconType | Record = "file"; // 文件图标。 uploadBtn?: string | ButtonProps; // 上传按钮。 renameBtn?: boolean | string | ButtonProps | FileButtonGenerator = true; // 重命名按钮。 removeBtn?: boolean | string | ButtonProps | FileButtonGenerator = true; // 删除按钮。 removeConfirm?: string | ModalConfirmOptions; // 删除确认提示。 maxFileSize?: FileSize = "100MB"; // 限制文件大小。 maxFileCount?: number = 0; // 限制文件数目，如果设置为非大于 0 的数则不限制。 totalFileSize?: FileSize; // 限制总文件大小，如果设置为非大于 0 的数则不限制。 allowSameName?: boolean; // 是否允许同名文件。 duplicatedTip?: string | ModalAlertOptions; // 重名提示。 exceededSizeTip?: string | ModalAlertOptions; // 超出大小提示。 exceededTotalSizeTip?: string | ModalAlertOptions; // 超出总大小提示。 exceededCountTip?: string | ModalAlertOptions; // 超出数量提示。 onSelect?: FileSelectCallback; // 选择文件时的回调。 onAdd?: FileAddCallback; // 添加文件时的回调。 onRemove?: RemoveFileCallback; // 删除文件时的回调。 onRename?: RenameFileCallback; // 重命名文件时的回调，返回 false 取消重命名。 onDuplicated?: DuplicatedCallback; // 重名时的回调，返回 true 保留重复文件。 onExceededSize?: ExceededLimitCallback; // 超出大小时的回调，返回 true 保留超出大小文件。 onExceededTotalSize?: ExceededLimitCallback; // 超出总大小时的回调，返回 true 保留超出总大小文件。 onExceededCount?: ExceededLimitCallback; // 超出数量时的回调，返回 true 保留超出数量文件。

    API ​

    FileInfo ​

    文件信息对象。

    名称类型默认值说明
    namestring—文件名。 size: number; // 文件大小。 id: string; // 文件唯一标识。 type: string; // 文件类型。 ext: string; // 文件扩展名。 url?: string; // 文件地址。 file?: File; // 文件对象。

    StaticFileInfo ​

    预设文件信息对象。

    名称类型默认值说明
    namestring—文件名。 size: FileSize; // 文件大小。 type?: string; // 文件类型。 id?: string; // 文件唯一标识。 url?: string; // 文件地址。

    FileSize ​

    文件大小，字节数或带单位的大小，例如 1024 或 '1KB'。

    ts
    type FileSize = number | `${number}${'B' | 'KB' | 'MB' | 'GB' | 'TB'}`;

    DefaltFileInfo ​

    默认文件信息对象。

    ts
    type DefaltFileInfo = File | FileInfo | StaticFileInfo;

    FileButtonGenerator ​

    文件操作按钮属性生成器，返回 false 不显示按钮，返回 true 使用默认按钮，返回字符串使用默认按钮并设置文字，返回对象使用自定义按钮。

    ts
    type FileButtonGenerator = ((file: FileInfo) => (boolean | string | ButtonProps));

    FileAddCallback ​

    添加文件时的回调函数，返回 false 取消添加文件。

    ts
    type FileAddCallback = (file: FileInfo) => void | false;

    FileSelectCallback ​

    选择文件时的回调函数。

    ts
    type FileSelectCallback = (files: File[] | FileList) => void | false;

    RemoveFileCallback ​

    删除文件时的回调函数。

    ts
    (file: FileInfo) => void | false | Promise<void | false>;

    RenameFileCallback ​

    重命名文件时的回调函数，返回 false 取消重命名。

    ts
    type RenameFileCallback = (newName: string, oldName: string, file: FileInfo) => void | false | Promise<void | false>;

    DuplicatedCallback ​

    重名时的回调，返回 true 保留重复文件。

    ts
    type DuplicatedCallback = (name: string, currentFile: FileInfo, existFile: FileInfo) => void | true;

    ExceededLimitCallback ​

    超出限制时的回调函数，返回 true 忽略限制，否则取消添加文件。

    ts
    type ExceededLimitCallback = (limit: number, file: FileInfo) => void | true;

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/lib/components/kanban/index.html b/dev/lib/components/kanban/index.html index 23c7b7e343..c548d643dd 100644 --- a/dev/lib/components/kanban/index.html +++ b/dev/lib/components/kanban/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    看板 ​

    示例 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/lib/components/label/index.html b/dev/lib/components/label/index.html index b1eca8775d..ae8a680680 100644 --- a/dev/lib/components/label/index.html +++ b/dev/lib/components/label/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    标签 ​

    标签通常用于对内容进行标记。

    使用方法 ​

    使用 .label 类来获得标签的外观和交互体验，通常用在元素 <span> 上。

    标签

    外观类型 ​

    配合丰富的CSS 工具类来实现不同标签的外观。

    主要标签黑色标签描边浅色

    尺寸 ​

    除了默认大小，标签还提供了额外的 2 种预设尺寸。

    小标签普通大小大标签

    圆角 ​

    通过工具类 rounded-* 来应用不同的圆角样式。

    无圆角小圆角普通圆角中等圆角大圆角超大圆角完整圆角

    圆点标签 ​

    当与工具类 label-dot 一起使用时则获得圆点标签。

    与按钮组合使用 ​

    CSS 类 ​

    标签提供了如下 CSS 类：

    类类型作用
    label实体类元素作为标签组件
    label-dot工具类标签使用圆形外观
    size-sm工具类标签使用小号尺寸
    size-lg工具类标签使用大号尺寸

    CSS 变量 ​

    变量名称变量含义
    --label-bg标签背景色
    --label-color标签文字颜色
    --label-border-color标签边框颜色
    --label-radius标签圆角

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/lib/components/menu/index.html b/dev/lib/components/menu/index.html index 683c61a72e..e1b4d2f4b8 100644 --- a/dev/lib/components/menu/index.html +++ b/dev/lib/components/menu/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    菜单 ​

    菜单用于展示一个操作列表，也可以用于构建更复杂的组件，例如右键菜单、下拉菜单等。如果需要通过 JS 动态创建菜单，可以使用菜单生成器

    使用方法 ​

    使用类 .menu 和 .menu-item 按照如下结构来构建一个静态菜单：

  • 剪切
  • 复制
  • 粘贴

    • 标题 ​

    使用类 .menu-heading 来创建一个标题：

  • 更多操作
  • 剪切
  • 复制
  • 粘贴

    • 分割线 ​

    使用类 .divider 来添加一个分割线：

  • 剪切
  • 复制
  • 粘贴

    • 包含图标 ​

    可以在菜单项内添加图标，但如果是部分菜单项拥有图标，可以通过为 .menu 添加工具类 .has-icons 来让图标以及文本进行对齐：

  • 复制
  • 粘贴
  • 粘贴

    • 禁用的菜单项 ​

    为 .menu-item 添加工具类 .disabled 来将菜单项禁用：

  • 复制
  • 粘贴
  • 剪切

    • 标记激活项 ​

    为 .menu-item 内的 <a> 元素添加工具类 .active 来将菜单项标记为激活状态：

  • 复制
  • 粘贴
  • 剪切

    • 标记选中项 ​

    为 .menu-item 内的 <a> 元素添加工具类 .active 来将菜单项标记为选中项状态：

  • 复制
  • 粘贴
  • 剪切

    • 尾部图标 ​

    直接将图标 .icon 元素添加到菜单项 .menu-item 内尾部，图标将自动靠右侧对齐：

  • 已复制
  • 粘贴
  • 剪切
  • 更多

    • 自定义菜单项 ​

    在 .menu 内可以放置其他内容来自定义菜单项：

  • 张三
    zhangsan
  • 个人资料
  • 修改密码
  • 主题
  • 退出

    • CSS 类 ​

    头像提供了如下 CSS 类：

    类类型作用
    menu实体类元素作为菜单
    menu-item实体类元素作为菜单项
    menu-heading实体类元素作为菜单标题
    divider实体类元素作为分割线
    has-icons工具类与 menu 一起使用，标记菜单内包含图标
    active工具类标记菜单项为激活状态
    selected工具类标记菜单项为选中状态
    disabled工具类标记菜单项为禁用状态

    CSS 变量 ​

    头像提供了如下 CSS 变量，可进行全局修改：

    CSS 变量名作用默认值
    --menu-radius菜单圆角var(--radius)
    --menu-bg菜单背景颜色var(--color-canvas)
    --menu-border菜单边框1px solid var(--color-border)
    --menu-shadow菜单阴影var(--shadow-lg)
    --menu-hover-bg菜单项鼠标悬停背景色var(--color-primary-500)
    --menu-hover-color菜单项鼠标悬停文字颜色var(--color-canvas)
    --menu-active-bg菜单项激活状态背景色var(--color-primary-50)
    --menu-active-color菜单项激活状态文字颜色var(--color-primary-500)
    --menu-icon-opacity菜单项图标透明度.5
    --menu-heading-color菜单标题文字颜色var(--color-gray-500)

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/lib/components/menu/js.html b/dev/lib/components/menu/js.html index 0399e31c3c..14c4054bf9 100644 --- a/dev/lib/components/menu/js.html +++ b/dev/lib/components/menu/js.html @@ -14,8 +14,8 @@ - - + + @@ -150,7 +150,7 @@ key?: string | number, items?: MenuListItem[], }; - + \ No newline at end of file diff --git a/dev/lib/components/messager/index.html b/dev/lib/components/messager/index.html index 7c0f4367e1..509aa4103e 100644 --- a/dev/lib/components/messager/index.html +++ b/dev/lib/components/messager/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    浮动消息 ​

    通过 JS 动态创建一个浮动消息。

    基本用法 ​

    通过构造一个 messager 实例，页面上创建一个浮动消息。

    显示位置 ​

    提供 9 个预设的显示位置，通过 placement 选项进行指定。

    颜色主题 ​

    提供多种预设颜色主题，通过 type 选项指定外观工具类即可。

    禁用关闭按钮 ​

    默认会在右侧显示关闭按钮，如果需要禁用关闭按钮，将 close 选项设置为 false。

    自定义操作按钮 ​

    通过 actions 数组来自定义一组操作。详细配置可参考 工具栏。

    禁用自动隐藏 ​

    默认超过 5000ms 自动隐藏，通过设置 time 为 0 取消自动隐藏。

    禁用动画效果 ​

    设置 animation 为 false 禁用动画效果。

    选项 ​

    名称类型默认值说明
    typestringnull消息类型 placement?: string; // 浮动消息定位方式，支持 'top' | 'center' | 'bottom' | 'left-top' | 'left' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom' time?: number; // 浮动消息持续时间 content?: string; // 浮动消息内容 icon?: string; // 图标名称 actions?: object[]; // 操作按钮定义列表 margin?: number; // 外边距

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/lib/components/modal/index.html b/dev/lib/components/modal/index.html index ab68108482..4ab4acd247 100644 --- a/dev/lib/components/modal/index.html +++ b/dev/lib/components/modal/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    对话框 ​

    在保留当前页面状态的情况下，直接使用触发按钮即可展现对话框，告知用户展示相关操作。

    使用方法 ​

    使用 .modal 与 .modal-dialog 类获得对话框的外观展示，通常用在元素 <div> 上。使用 [data-toggle="modal"] 指定对话框触发按钮，在触发按钮上通过 data-target 属性指定要打开的对话框。

    点击 a 标签按钮打开

    自定义位置 ​

    使用 data-position 自定义设置对话框位置。可设置 fit、center 或其具体像素值。

    尺寸 ​

    除了默认大小，还提供了额外的 3 种预设尺寸。

    信息提示 ​

    展示各种类型的信息提示，只提供一个按钮用于关闭。

    控制遮罩层 ​

    通过 data-backdrop="false" 移除遮罩层，设置后可以操作模态框之外的交互。

    CSS 类 ​

    对话框提供了如下 CSS 类：

    类类型作用
    modal实体类元素作为对话框遮罩组件
    modal-dialog实体类元素作为对话框组件
    size-sm工具类对话框使用小号尺寸
    size-lg工具类对话框使用大号尺寸
    size-xl工具类对话框使用超大号尺寸

    CSS 变量 ​

    对话框提供了如下 CSS 变量，可进行全局修改。

    CSS 变量名作用
    --modal-radius对话框默认圆角大小
    --modal-bg对话框遮挡层颜色
    --modal-sm对话框小号尺寸宽度
    --modal-base对话框默认宽度
    --modal-lg对话框大号尺寸宽度
    --modal-xl对话框超大号尺寸宽度

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    对话框 ​

    在保留当前页面状态的情况下，直接使用触发按钮即可展现对话框，告知用户展示相关操作。

    使用方法 ​

    使用 .modal 与 .modal-dialog 类获得对话框的外观展示，通常用在元素 <div> 上。使用 [data-toggle="modal"] 指定对话框触发按钮，在触发按钮上通过 data-target 属性指定要打开的对话框。

    点击 a 标签按钮打开

    自定义位置 ​

    使用 data-position 自定义设置对话框位置。可设置 fit、center 或其具体像素值。

    尺寸 ​

    除了默认大小，还提供了额外的 3 种预设尺寸。

    信息提示 ​

    展示各种类型的信息提示，只提供一个按钮用于关闭。

    控制遮罩层 ​

    通过 data-backdrop="false" 移除遮罩层，设置后可以操作模态框之外的交互。

    CSS 类 ​

    对话框提供了如下 CSS 类：

    类类型作用
    modal实体类元素作为对话框遮罩组件
    modal-dialog实体类元素作为对话框组件
    size-sm工具类对话框使用小号尺寸
    size-lg工具类对话框使用大号尺寸
    size-xl工具类对话框使用超大号尺寸

    CSS 变量 ​

    对话框提供了如下 CSS 变量，可进行全局修改。

    CSS 变量名作用
    --modal-radius对话框默认圆角大小
    --modal-bg对话框遮挡层颜色
    --modal-sm对话框小号尺寸宽度
    --modal-base对话框默认宽度
    --modal-lg对话框大号尺寸宽度
    --modal-xl对话框超大号尺寸宽度

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/modal/trigger.html b/dev/lib/components/modal/trigger.html index a5aed2f1ee..ad98febbc7 100644 --- a/dev/lib/components/modal/trigger.html +++ b/dev/lib/components/modal/trigger.html @@ -14,8 +14,8 @@ - - + + @@ -55,7 +55,7 @@ /* 当用户点击确认或取消时的回调函数 */ onResult?: (confirmed: boolean, modal: Modal) => void; }

    该方法会通过 Promise 异步返回用户点击的按钮名称。

    下面为一个示例：

    - + \ No newline at end of file diff --git a/dev/lib/components/nav/index.html b/dev/lib/components/nav/index.html index 5d783db671..8e813f5386 100644 --- a/dev/lib/components/nav/index.html +++ b/dev/lib/components/nav/index.html @@ -14,17 +14,17 @@ - - + + -
    ZUI 3

    Appearance

    导航 ​

    基础用法 ​

    使用组件类 .nav 来获得导航外观 通常搭配 <ul>、<menu> 和 <li> 标签来使用。

  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
  • 博客
  • 项目
  • 关于我们

    • 带标题的导航 ​

    可以通过 CSS 类 nav-heading 给导航项设置标题样式。

  • 导航标题
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • html
    <menu class="nav">
+    
    ZUI 3
    Appearance
    导航 ​
    基础用法 ​
    使用组件类 .nav 来获得导航外观 通常搭配 <ul>、<menu> 和 <li> 标签来使用。
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
  • 博客
  • 项目
  • 关于我们
    • 带标题的导航 ​
    可以通过 CSS 类 nav-heading 给导航项设置标题样式。
  • 导航标题
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • html
    <menu class="nav">
   <li class="nav-heading">导航标题</li>
   ...
-</menu>
    导航样式 ​
    除了默认样式，还可以通过修饰类为导航应用不同的样式。
    主要导航 .nav-primary ​
  • 主要导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • 次要导航 .nav-secondary ​
  • 次要导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • 圆点导航 .nav-pills ​
  • 圆点导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • 标签导航 .nav-tabs ​
  • 标签导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • 步骤条 .nav-steps ​
  • 已激活步骤1
  • 已激活步骤2
  • 当前步骤
  • 已激活步骤3
  • 可点击步骤1
  • 可点击步骤2
  • 不可点击步骤
    • 垂直排列 ​
    使用修饰类 nav-stacked 使导航获得垂直排列样式，可搭配其他各种样式的导航使用。
    .nav-primary
  • 主要导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • .nav-secondary
  • 次要导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • .nav-pills
  • 圆点导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • .nav-tabs
  • 标签导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • 自适应宽度的导航 ​
    使用修饰类 nav-justified 使导航获得自适应宽度样式，可搭配其他各种样式的导航使用。
    提示
    自适应宽度修饰类不能和垂直排列修饰类混用。
    CSS 类 ​
    导航提供了如下 CSS 类
    类类型作用
    nav实体类元素导航组件
    nav-item实体类元素导航条目组件
    nav-heading实体类导航标题组件
    nav-divider实体类导航分割线组件
    active修饰类为导航元素启用选中态样式
    nav-simple修饰类为导航元素启用简单样式
    nav-primary修饰类为导航元素启用主要导航样式
    nav-secondary修饰类为导航元素启用次要导航样式
    nav-tabs修饰类为导航元素启用标签风格导航样式
    nav-pills修饰类为导航元素启用标签风格导航样式
    nav-stacked修饰类为导航元素启用垂直排列导航样式
    nav-justified修饰类为导航元素启用自适应宽度导航样式
    CSS 变量 ​
    变量名称变量含义
    --nav-heading-color导航标题字体颜色
    MIT License (MIT)
    Copyright (C) 2023 cnezsoft.com
    
-    
+</menu>

    导航样式 ​

    除了默认样式，还可以通过修饰类为导航应用不同的样式。

    主要导航 .nav-primary ​

  • 主要导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多

    • 次要导航 .nav-secondary ​

  • 次要导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多

    • 圆点导航 .nav-pills ​

  • 圆点导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多

    • 标签导航 .nav-tabs ​

  • 标签导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多

    • 步骤条 .nav-steps ​

  • 已激活步骤1
  • 已激活步骤2
  • 当前步骤
  • 已激活步骤3
  • 可点击步骤1
  • 可点击步骤2
  • 不可点击步骤

    • 垂直排列 ​

    使用修饰类 nav-stacked 使导航获得垂直排列样式，可搭配其他各种样式的导航使用。

    .nav-primary
  • 主要导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • .nav-secondary
  • 次要导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • .nav-pills
  • 圆点导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多
    • .nav-tabs
  • 标签导航
  • 首页
  • 产品
  • 价格
  • 动态
  • 更多

    • 自适应宽度的导航 ​

    使用修饰类 nav-justified 使导航获得自适应宽度样式，可搭配其他各种样式的导航使用。

    提示

    自适应宽度修饰类不能和垂直排列修饰类混用。

    CSS 类 ​

    导航提供了如下 CSS 类

    类类型作用
    nav实体类元素导航组件
    nav-item实体类元素导航条目组件
    nav-heading实体类导航标题组件
    nav-divider实体类导航分割线组件
    active修饰类为导航元素启用选中态样式
    nav-simple修饰类为导航元素启用简单样式
    nav-primary修饰类为导航元素启用主要导航样式
    nav-secondary修饰类为导航元素启用次要导航样式
    nav-tabs修饰类为导航元素启用标签风格导航样式
    nav-pills修饰类为导航元素启用标签风格导航样式
    nav-stacked修饰类为导航元素启用垂直排列导航样式
    nav-justified修饰类为导航元素启用自适应宽度导航样式

    CSS 变量 ​

    变量名称变量含义
    --nav-heading-color导航标题字体颜色

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/nav/js.html b/dev/lib/components/nav/js.html index c6b87cee87..0d8253b189 100644 --- a/dev/lib/components/nav/js.html +++ b/dev/lib/components/nav/js.html @@ -14,8 +14,8 @@ - - + + @@ -62,7 +62,7 @@ afterRender?: (info: {nav: nav, firstRender: boolean}) => void; beforeDestroy?: (info: {nav: nav}) => void; } - + \ No newline at end of file diff --git a/dev/lib/components/pager/index.html b/dev/lib/components/pager/index.html index b75d1e2cd8..2815fa1f46 100644 --- a/dev/lib/components/pager/index.html +++ b/dev/lib/components/pager/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    分页 ​

    使用方法 ​

    将多个按钮放置在 <div class="pager"> 内即可创建一个分页组件。

    简洁样式 ​

    简单的翻页。

    状态 ​

    为分页按钮添加 active 类标记选中，添加 disabled 类来禁用页码，被禁用的页码将无法响应点击事件。

    外观 ​

    分页按钮间距 ​

    使用 gap-* CSS 工具类 可获得宽松的分页组件。

    两边对齐 ​

    结合使用 justify-between CSS 工具类 可获得页面两端对齐的分页组件。

    尺寸 ​

    除了默认大小，还提供了额外的 2 种预设尺寸。可以通过为 pager 添加 size-* 类来获取其他尺寸外观。

    调整每页显示数 ​

    结合使用 dropdown 下拉菜单组件 可展示调整每页显示数的分页组件。

    前往页码 ​

    结合使用 input-group 输入组组件 可展示快速跳转到某一页的分页组件。

    CSS 类 ​

    分页提供了如下 CSS 类：

    类类型作用
    pager实体类元素作为分页组件
    pager-goto实体类元素作为分页的跳转组件
    pager-size-menu实体类元素作为分页的每页条数的下拉组件

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    分页 ​

    使用方法 ​

    将多个按钮放置在 <div class="pager"> 内即可创建一个分页组件。

    简洁样式 ​

    简单的翻页。

    状态 ​

    为分页按钮添加 active 类标记选中，添加 disabled 类来禁用页码，被禁用的页码将无法响应点击事件。

    外观 ​

    分页按钮间距 ​

    使用 gap-* CSS 工具类 可获得宽松的分页组件。

    两边对齐 ​

    结合使用 justify-between CSS 工具类 可获得页面两端对齐的分页组件。

    尺寸 ​

    除了默认大小，还提供了额外的 2 种预设尺寸。可以通过为 pager 添加 size-* 类来获取其他尺寸外观。

    调整每页显示数 ​

    结合使用 dropdown 下拉菜单组件 可展示调整每页显示数的分页组件。

    前往页码 ​

    结合使用 input-group 输入组组件 可展示快速跳转到某一页的分页组件。

    CSS 类 ​

    分页提供了如下 CSS 类：

    类类型作用
    pager实体类元素作为分页组件
    pager-goto实体类元素作为分页的跳转组件
    pager-size-menu实体类元素作为分页的每页条数的下拉组件

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/pager/js.html b/dev/lib/components/pager/js.html index e703c89f29..67cd9fdc1c 100644 --- a/dev/lib/components/pager/js.html +++ b/dev/lib/components/pager/js.html @@ -14,8 +14,8 @@ - - + + @@ -167,7 +167,7 @@ render(element, <Pager {...options} />);

    使用Jquery 扩展 ​

    js
    $(element).pager(options);
 
 const pager = $(element).data('zui.pager');

    选项 ​

    linkCreator ​

    导航链接生成器，点击页码时进行页面地址更换。

    page ​

    初始状态的当前页码。

    recTotal ​

    总记录数目。

    recPerPage ​

    每页记录数。

    pageTotal ​

    总页数。

    items ​

    定义分页项的列表，可以通过一个函数动态返回分页组件。

    基于 工具栏 选项 和 自定义 PagerItemOptions 选项。

    onClickItem ​

    指定分页按钮的点击回调事件。

    API ​

    PagerInfo ​

    参数：

    page ​

    recTotal ​

    recPerPage ​

    pageTotal ​

    PagerItemOptions ​

    参数：

    type ​

    page ​

    text ​

    count ​

    format ​

    items ​

    - + \ No newline at end of file diff --git a/dev/lib/components/panel/index.html b/dev/lib/components/panel/index.html index b4d599389c..7afe4328cc 100644 --- a/dev/lib/components/panel/index.html +++ b/dev/lib/components/panel/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    面板 ​

    基本使用 ​

    一个面板通常包含标题，内容，底部三部分。标题，底部可按需选择使用。

    面板标题

    面板内容

    面板底部

    不同主题 ​

    除默认主题外，另外提供6种主题样式。

    面板标题
    面板内容
    面板标题
    面板内容
    面板标题
    面板内容
    面板标题
    面板内容
    面板标题
    面板内容
    面板标题
    面板内容

    面板组 ​

    搭配CSS工具类 space-* 可实现面板组效果。

    面板标题
    面板内容
    面板底部
    面板标题
    面板内容
    面板底部
    面板标题
    面板内容
    面板底部

    与表格组合使用 ​

    包含表格
    项目名称负责人计划开始计划完成
    ZUI1研发今天今天
    ZUI2研发明天明天
    ZUI3研发后天后天

    CSS 类 ​

    面板提供了如下 CSS 类：

    类类型作用
    panel实体类元素作为面板组件
    panel-heading实体类元素作为面板头部组件
    panel-title实体类元素作为面板头部标题组件
    panel-body实体类元素作为面板主体组件
    panel-footer实体类元素作为面板尾部组件

    CSS 变量 ​

    面板提供了如下 CSS 变量：

    变量名称变量含义
    --panel-heading-bg标题背景色
    --panel-footer-bg底部背景色

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    面板 ​

    基本使用 ​

    一个面板通常包含标题，内容，底部三部分。标题，底部可按需选择使用。

    面板标题

    面板内容

    面板底部

    不同主题 ​

    除默认主题外，另外提供6种主题样式。

    面板标题
    面板内容
    面板标题
    面板内容
    面板标题
    面板内容
    面板标题
    面板内容
    面板标题
    面板内容
    面板标题
    面板内容

    面板组 ​

    搭配CSS工具类 space-* 可实现面板组效果。

    面板标题
    面板内容
    面板底部
    面板标题
    面板内容
    面板底部
    面板标题
    面板内容
    面板底部

    与表格组合使用 ​

    包含表格
    项目名称负责人计划开始计划完成
    ZUI1研发今天今天
    ZUI2研发明天明天
    ZUI3研发后天后天

    CSS 类 ​

    面板提供了如下 CSS 类：

    类类型作用
    panel实体类元素作为面板组件
    panel-heading实体类元素作为面板头部组件
    panel-title实体类元素作为面板头部标题组件
    panel-body实体类元素作为面板主体组件
    panel-footer实体类元素作为面板尾部组件

    CSS 变量 ​

    面板提供了如下 CSS 变量：

    变量名称变量含义
    --panel-heading-bg标题背景色
    --panel-footer-bg底部背景色

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/picker/index.html b/dev/lib/components/picker/index.html index 9c71b24924..5309d0ad28 100644 --- a/dev/lib/components/picker/index.html +++ b/dev/lib/components/picker/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    下拉选择器 ​

    用于方便用户从多个选项列表中进行选择。

    单选 ​

    多选 ​

    在输入组中使用 ​

    选择一种水果

    初始化选项 ​

    名称类型默认值说明

    列表项定义 ​

    名称类型默认值说明

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    下拉选择器 ​

    用于方便用户从多个选项列表中进行选择。

    单选 ​

    多选 ​

    在输入组中使用 ​

    选择一种水果

    初始化选项 ​

    名称类型默认值说明

    列表项定义 ​

    名称类型默认值说明

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/progress-circle/index.html b/dev/lib/components/progress-circle/index.html index ab274dc9f1..4a0505f2c4 100644 --- a/dev/lib/components/progress-circle/index.html +++ b/dev/lib/components/progress-circle/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    环形进度条 ​

    环形进度条生成器允许通过 JS 动态创建一个环形进度条。

    使用方法 ​

    简单使用 ​

    指定参数 ​

    选项 ​

    名称类型默认值说明

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    环形进度条 ​

    环形进度条生成器允许通过 JS 动态创建一个环形进度条。

    使用方法 ​

    简单使用 ​

    指定参数 ​

    选项 ​

    名称类型默认值说明

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/progress/index.html b/dev/lib/components/progress/index.html index e706916654..eb1e27712e 100644 --- a/dev/lib/components/progress/index.html +++ b/dev/lib/components/progress/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    进度条 ​

    使用方法 ​

    使用 CSS 类 .progress 和 .progress-bar 来创建进度条，通过为 .progress-bar 设置 CSS width 来展示进度。

    颜色主题 ​

    给 .progress-bar 元素添加 .* 等颜色CSS工具类，得到各种颜色的进度条。

    圆角大小 ​

    给 .progress 元素添加 .rounded-* CSS工具类，给进度条添加不同大小的圆角。

    特殊效果 ​

    条纹效果 ​

    给 .progress 元素添加 .progress-striped 工具类，给进度条添加条纹效果。

    动画效果 ​

    给使用了 progress-striped 工具类的元素添加 .active 工具类,给条纹进度条添加向左滑动的动画。

    堆叠效果 ​

    给 .progress 元素添加多个 progress-bar 元素，使多个进度条堆叠展示。

    CSS 类 ​

    进度条提供了如下 CSS 类：

    类类型作用
    progress实体类元素作为进度条容器组件
    progress-bar实体类元素作为进度条组件
    progress-striped工具类为进度条组件启用条纹样式
    active工具类为条纹样式进度条组件启用动画效果

    CSS 变量 ​

    变量名称变量含义
    --progress-bg进度条组件背景颜色
    --progress-bar-color进度条组件颜色
    --progress-radius进度条组件圆角大小
    --progress-striped-size进度条组件条纹大小

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    进度条 ​

    使用方法 ​

    使用 CSS 类 .progress 和 .progress-bar 来创建进度条，通过为 .progress-bar 设置 CSS width 来展示进度。

    颜色主题 ​

    给 .progress-bar 元素添加 .* 等颜色CSS工具类，得到各种颜色的进度条。

    圆角大小 ​

    给 .progress 元素添加 .rounded-* CSS工具类，给进度条添加不同大小的圆角。

    特殊效果 ​

    条纹效果 ​

    给 .progress 元素添加 .progress-striped 工具类，给进度条添加条纹效果。

    动画效果 ​

    给使用了 progress-striped 工具类的元素添加 .active 工具类,给条纹进度条添加向左滑动的动画。

    堆叠效果 ​

    给 .progress 元素添加多个 progress-bar 元素，使多个进度条堆叠展示。

    CSS 类 ​

    进度条提供了如下 CSS 类：

    类类型作用
    progress实体类元素作为进度条容器组件
    progress-bar实体类元素作为进度条组件
    progress-striped工具类为进度条组件启用条纹样式
    active工具类为条纹样式进度条组件启用动画效果

    CSS 变量 ​

    变量名称变量含义
    --progress-bg进度条组件背景颜色
    --progress-bar-color进度条组件颜色
    --progress-radius进度条组件圆角大小
    --progress-striped-size进度条组件条纹大小

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/scrollbar/index.html b/dev/lib/components/scrollbar/index.html index aca9415d65..acd3d8f5b4 100644 --- a/dev/lib/components/scrollbar/index.html +++ b/dev/lib/components/scrollbar/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    滚动条 ​

    滚动条样式 ​

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, accusamus.Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Explicabo asperiores recusandae qui? Aliquam similique eaque animi nemo? Fugiat.Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Pariatur sapiente laboriosam cumque itaque, id saepe commodi accusantium neque?

    Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Quidem eum, reiciendis iusto rem perspiciatis neque optio! Quae, sint!

    Maxime animi iure enim sint aperiam tempora non voluptatibus dolore.

    Suscipit cumque minus veritatis labore dolor corporis molestias. Rem, pariatur.

    Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Repellendus rerum tempora eos praesentium at placeat, quas quibusdam sunt?

    Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!

    窄滚动条样式 ​

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, accusamus.Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Explicabo asperiores recusandae qui? Aliquam similique eaque animi nemo? Fugiat.Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Pariatur sapiente laboriosam cumque itaque, id saepe commodi accusantium neque?

    Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Quidem eum, reiciendis iusto rem perspiciatis neque optio! Quae, sint!

    Maxime animi iure enim sint aperiam tempora non voluptatibus dolore.

    Suscipit cumque minus veritatis labore dolor corporis molestias. Rem, pariatur.

    Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Repellendus rerum tempora eos praesentium at placeat, quas quibusdam sunt?

    Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!

    仅鼠标悬停时显示 ​

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, accusamus.Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Explicabo asperiores recusandae qui? Aliquam similique eaque animi nemo? Fugiat.Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Pariatur sapiente laboriosam cumque itaque, id saepe commodi accusantium neque?

    Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Quidem eum, reiciendis iusto rem perspiciatis neque optio! Quae, sint!

    Maxime animi iure enim sint aperiam tempora non voluptatibus dolore.

    Suscipit cumque minus veritatis labore dolor corporis molestias. Rem, pariatur.

    Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Repellendus rerum tempora eos praesentium at placeat, quas quibusdam sunt?

    Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    滚动条 ​

    滚动条样式 ​

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, accusamus.Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Explicabo asperiores recusandae qui? Aliquam similique eaque animi nemo? Fugiat.Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Pariatur sapiente laboriosam cumque itaque, id saepe commodi accusantium neque?

    Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Quidem eum, reiciendis iusto rem perspiciatis neque optio! Quae, sint!

    Maxime animi iure enim sint aperiam tempora non voluptatibus dolore.

    Suscipit cumque minus veritatis labore dolor corporis molestias. Rem, pariatur.

    Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Repellendus rerum tempora eos praesentium at placeat, quas quibusdam sunt?

    Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!

    窄滚动条样式 ​

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, accusamus.Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Explicabo asperiores recusandae qui? Aliquam similique eaque animi nemo? Fugiat.Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Pariatur sapiente laboriosam cumque itaque, id saepe commodi accusantium neque?

    Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Quidem eum, reiciendis iusto rem perspiciatis neque optio! Quae, sint!

    Maxime animi iure enim sint aperiam tempora non voluptatibus dolore.

    Suscipit cumque minus veritatis labore dolor corporis molestias. Rem, pariatur.

    Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Repellendus rerum tempora eos praesentium at placeat, quas quibusdam sunt?

    Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!

    仅鼠标悬停时显示 ​

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, accusamus.Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Explicabo asperiores recusandae qui? Aliquam similique eaque animi nemo? Fugiat.Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Pariatur sapiente laboriosam cumque itaque, id saepe commodi accusantium neque?

    Cupiditate eaque, doloribus magnam velit ipsum maiores voluptatum eveniet rem!

    Quidem eum, reiciendis iusto rem perspiciatis neque optio! Quae, sint!

    Maxime animi iure enim sint aperiam tempora non voluptatibus dolore.

    Suscipit cumque minus veritatis labore dolor corporis molestias. Rem, pariatur.

    Commodi omnis minus quo totam, ab aspernatur sequi vero cum?

    Repellendus rerum tempora eos praesentium at placeat, quas quibusdam sunt?

    Molestiae saepe deleniti voluptas excepturi nostrum. Consequatur eius non voluptates!

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/search-box/index.html b/dev/lib/components/search-box/index.html index 4ea61c37e7..521295b0fc 100644 --- a/dev/lib/components/search-box/index.html +++ b/dev/lib/components/search-box/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    搜索框 ​

    基于 输入框 实现的搜索框组件。

    示例 ​

    简单用法 ​

    圆形外观 ​

    将搜索图标放在后面 ​

    禁用 ​

    选项 ​

    名称类型默认值说明

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    搜索框 ​

    基于 输入框 实现的搜索框组件。

    示例 ​

    简单用法 ​

    圆形外观 ​

    将搜索图标放在后面 ​

    禁用 ​

    选项 ​

    名称类型默认值说明

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/table/index.html b/dev/lib/components/table/index.html index 3e47d8af15..744f351130 100644 --- a/dev/lib/components/table/index.html +++ b/dev/lib/components/table/index.html @@ -14,16 +14,16 @@ - - + + -
    ZUI 3

    Appearance

    表格 ​

    表格用于展示二维数据。

    使用方法 ​

    为 <table> 元素添加 CSS 类 .table 来使用表格。

    组成部分元素标签说明
    表头<thead>表头通常作为表格第一行，用于展示所有数据的各个属性名称。
    主体<tbody>一个或多个行组成表格的主体，每行用于展示一个数据。
    表尾<tfoot>表尾通常用于展示一些数据的汇总信息。
    总计3 个部分

    斑马纹表格 ​

    在 <table class="table"> 上使用工具类 .table-striped 斑马纹表格外观（隔行变色）效果。

    :: tabs

    == 示例

    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！

    == HTML

    html
    <table class="table table-striped">
+    
    ZUI 3
    Appearance
    表格 ​
    表格用于展示二维数据。
    使用方法 ​
    为 <table> 元素添加 CSS 类 .table 来使用表格。
    组成部分元素标签说明
    表头<thead>表头通常作为表格第一行，用于展示所有数据的各个属性名称。
    主体<tbody>一个或多个行组成表格的主体，每行用于展示一个数据。
    表尾<tfoot>表尾通常用于展示一些数据的汇总信息。
    总计3 个部分
    斑马纹表格 ​
    在 <table class="table"> 上使用工具类 .table-striped 斑马纹表格外观（隔行变色）效果。
    :: tabs
    == 示例
    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！
    == HTML
    html
    <table class="table table-striped">
   ...
-</table>
    :::
    鼠标悬停变色 ​
    在 <table class="table"> 上使用工具类 .table-hover，当鼠标悬停在行上时显示不一样的背景。
    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！
    完整边框 ​
    在 <table class="table"> 上使用工具类 .bordered，为表格添加所有边框。
    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！
    无边框 ​
    在 <table class="table"> 上使用工具类 .borderless，为表格移除所有边框。
    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！
    紧凑的表格 ​
    在 <table class="table"> 上使用工具类 .condensed 来获得更紧凑的表格。表格中的单元格拥有更小的间距，整体行高减少。
    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！
    固定布局的表格 ​
    在 <table class="table"> 上使用工具类 .table-fixed 来将表格布局方式设置为 fixed。
    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观。
    3.02021-07-31这一次说说关于表格的固定布局，当启用固定布局时，后续行中的单元格内容将不会对表格布局产生影响，当单元格内的文本过长时会被截断隐藏。
    关于表格的固定布局
    表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。
    使用“fixed”布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于“automatic”自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。
    参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout
    自动宽度 ​
    通常表格宽度为 100%，与表格所属的父级元素宽度保持一致，但有时希望表格的宽度能够按照实际内容宽度展示。此时可以通过配合使用 CSS 工具类 w-auto 来设置表格宽度为自动，同时推荐使用工具类 max-w-full 来限制表格最大宽度不超过父级元素宽度（100%）。
    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！
    特殊外观 ​
    为行元素 <tr> 或单元格 <td>、<th> 应用 CSS 工具类 来获得特殊外观。
    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！
    CSS 类 ​
    按钮提供了如下 CSS 类：
    类类型作用
    table实体类元素作为表格组件
    table-striped工具类为表格启用斑马纹效果
    table-hover工具类为表格启用行悬停变色效果
    table-fixed工具类为表格启用固定布局
    borderless工具类移除表格所有边框
    bordered工具类为表格添加完整边框
    condensed工具类为表格启用紧凑布局
    CSS 变量 ​
    变量名称变量含义
    --table-head-bg表头背景色
    --table-striped-color表格斑马纹行背景色
    --table-hover-color表格行响应鼠标悬停变化背景颜色
    --table-border-color表格边框颜色
    MIT License (MIT)
    Copyright (C) 2023 cnezsoft.com
    
-    
+</table>

    :::

    鼠标悬停变色 ​

    在 <table class="table"> 上使用工具类 .table-hover，当鼠标悬停在行上时显示不一样的背景。

    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！

    完整边框 ​

    在 <table class="table"> 上使用工具类 .bordered，为表格添加所有边框。

    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！

    无边框 ​

    在 <table class="table"> 上使用工具类 .borderless，为表格移除所有边框。

    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！

    紧凑的表格 ​

    在 <table class="table"> 上使用工具类 .condensed 来获得更紧凑的表格。表格中的单元格拥有更小的间距，整体行高减少。

    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！

    固定布局的表格 ​

    在 <table class="table"> 上使用工具类 .table-fixed 来将表格布局方式设置为 fixed。

    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观。
    3.02021-07-31这一次说说关于表格的固定布局，当启用固定布局时，后续行中的单元格内容将不会对表格布局产生影响，当单元格内的文本过长时会被截断隐藏。

    关于表格的固定布局

    表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

    使用“fixed”布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于“automatic”自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。

    参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout

    自动宽度 ​

    通常表格宽度为 100%，与表格所属的父级元素宽度保持一致，但有时希望表格的宽度能够按照实际内容宽度展示。此时可以通过配合使用 CSS 工具类 w-auto 来设置表格宽度为自动，同时推荐使用工具类 max-w-full 来限制表格最大宽度不超过父级元素宽度（100%）。

    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！

    特殊外观 ​

    为行元素 <tr> 或单元格 <td>、<th> 应用 CSS 工具类 来获得特殊外观。

    版本发布时间主要特性
    1.02021-03-01第一个版本发布！
    1.12021-04-12修复了大量已知问题。
    1.22021-05-18新的编辑器，让创意更容易展现。
    2.02021-06-05这次版本带来全新的界面外观
    2.12021-07-31新的预览功能，更方便的提前查看最终效果！

    CSS 类 ​

    按钮提供了如下 CSS 类：

    类类型作用
    table实体类元素作为表格组件
    table-striped工具类为表格启用斑马纹效果
    table-hover工具类为表格启用行悬停变色效果
    table-fixed工具类为表格启用固定布局
    borderless工具类移除表格所有边框
    bordered工具类为表格添加完整边框
    condensed工具类为表格启用紧凑布局

    CSS 变量 ​

    变量名称变量含义
    --table-head-bg表头背景色
    --table-striped-color表格斑马纹行背景色
    --table-hover-color表格行响应鼠标悬停变化背景颜色
    --table-border-color表格边框颜色

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/tabs/index.html b/dev/lib/components/tabs/index.html index bb46966a32..f085f6f01c 100644 --- a/dev/lib/components/tabs/index.html +++ b/dev/lib/components/tabs/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    标签页 ​

    使用方法 ​

    标签页一般配合导航使用，通过 .nav 来定义切换的触发器，通过 .tab-content 来定义切换的内容。标签页内容使用 .tab-pane 作为容器元素，所有供切换显示的 .tab-pane 放置在 .tab-content 容器元素内。

    提示

    为确保在页面显示的时候标签页能够指示正确的标签和显示正确的内容，在初始状态需要为当前选中的导航项目 li.nav-item > a 元素添加 .active 类，并且为当前显示的标签页内容元素 .tab-pane 添加 .active 类。

    为导航上每个用于切换标签内容的链接添加 href 或 data-target 属性指向当前标签页内容 .tab-pane 的 id ，并添加 data-toggle="tab" 属性。

    我是标签1。

    我是标签2。

    我是标签3。

    动画效果 ​

    为每个 .tab-pane 添加 .fade 类，可以使得标签内容在显示时获得渐变动画效果。在初始状态要显示的标签页内容 .tab-pane 不仅需要添加 .active 类，还需要添加 .in 类。

    我是标签1。

    我是标签2。

    我是标签3。

    垂直标签页 ​

    使用 .nav-tabs.nav-stacked 获得垂直排列的标签导航，使用 flex 布局来使得导航和标签页内容水平排列。

    我是标签1。

    我是标签2。

    我是标签3。

    事件 ​

    当显示一个新的标签页时，这些事件会被触发：

    • show: 当前标签页在显示时触发；
    • shown: 当前标签页在显示后（动画执行完毕）触发。

    通过为 [data-toggle="tab"] 链接添加 data-name 属性，这样事件触发时会传递该属性值作为参数，如果不指定则使用 [data-target] 的值作为参数。

    我是标签1。

    我是标签2。

    我是标签3。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    标签页 ​

    使用方法 ​

    标签页一般配合导航使用，通过 .nav 来定义切换的触发器，通过 .tab-content 来定义切换的内容。标签页内容使用 .tab-pane 作为容器元素，所有供切换显示的 .tab-pane 放置在 .tab-content 容器元素内。

    提示

    为确保在页面显示的时候标签页能够指示正确的标签和显示正确的内容，在初始状态需要为当前选中的导航项目 li.nav-item > a 元素添加 .active 类，并且为当前显示的标签页内容元素 .tab-pane 添加 .active 类。

    为导航上每个用于切换标签内容的链接添加 href 或 data-target 属性指向当前标签页内容 .tab-pane 的 id ，并添加 data-toggle="tab" 属性。

    我是标签1。

    我是标签2。

    我是标签3。

    动画效果 ​

    为每个 .tab-pane 添加 .fade 类，可以使得标签内容在显示时获得渐变动画效果。在初始状态要显示的标签页内容 .tab-pane 不仅需要添加 .active 类，还需要添加 .in 类。

    我是标签1。

    我是标签2。

    我是标签3。

    垂直标签页 ​

    使用 .nav-tabs.nav-stacked 获得垂直排列的标签导航，使用 flex 布局来使得导航和标签页内容水平排列。

    我是标签1。

    我是标签2。

    我是标签3。

    事件 ​

    当显示一个新的标签页时，这些事件会被触发：

    • show: 当前标签页在显示时触发；
    • shown: 当前标签页在显示后（动画执行完毕）触发。

    通过为 [data-toggle="tab"] 链接添加 data-name 属性，这样事件触发时会传递该属性值作为参数，如果不指定则使用 [data-target] 的值作为参数。

    我是标签1。

    我是标签2。

    我是标签3。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/toolbar/index.html b/dev/lib/components/toolbar/index.html index b2bac28760..f576e4b24c 100644 --- a/dev/lib/components/toolbar/index.html +++ b/dev/lib/components/toolbar/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    工具栏 ​

    使用方法 ​

    图标工具栏 ​

    CSS 类 ​

    头像提供了如下 CSS 类：

    类类型作用
    toolbar实体类元素作为工具栏

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    工具栏 ​

    使用方法 ​

    图标工具栏 ​

    CSS 类 ​

    头像提供了如下 CSS 类：

    类类型作用
    toolbar实体类元素作为工具栏

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/toolbar/js.html b/dev/lib/components/toolbar/js.html index 0d000ba5e5..d0b04439f4 100644 --- a/dev/lib/components/toolbar/js.html +++ b/dev/lib/components/toolbar/js.html @@ -14,8 +14,8 @@ - - + + @@ -152,7 +152,7 @@ render(element, <Toolbar {...options} />);

    使用 jQuery 扩展 ​

    js
    $(element).toolbar(options);
 
 const toolbar = $(element).data('zui.toolbar');

    选项 ​

    在 操作菜单 选项基础上添加新的参数选项。

    wrap ​

    限制工具栏按钮过多超出时是否换行。

    gap ​

    自定义工具栏按钮的间距，与 .toolbar 同级生成 .gap-* 的工具类控制按钮间距。

    items ​

    继承了 操作菜单 选项和按钮选项，同时添加了其他选项。

    btnProps ​

    继承按钮组件的属性， 统一处理工具栏按钮属性外观等。

    itemRender ​

    指定一个回调函数用于对组件渲染进行自定义。

    参数：items 选项的单个配置；

    返回值：items 选项的单个配置。

    beforeRender ​

    指定一个回调函数在渲染之前调用，可重新配置组件选项。

    参数：用户为按钮组组件件设置的 options；

    返回值：组件选项数据。

    afterRender ​

    指定一个回调函数在渲染之后调用。

    参数：

    beforeDestroy ​

    指定一个回调函数在组件销毁之前调用，无参数。

    API ​

    ToolbarItemOptions ​

    ts
    type ToolbarItemOptions = ToolbarItemProps | ToolbarDropdownProps | ToolbarBtnGroupProps | ToolbarDividerProps | ToolbarSpaceProps;

    ToolbarItemProps ​

    选项：

    继承了操作菜单的 ActionItemProps 选项和按钮的 ButtonProps ，同时添加了其他选项 btnType，用来设置按钮外观类型。

    btnType ​

    设置工具栏单个按钮的外观类型。

    ToolbarDropdownProps ​

    选项：

    在原有属性基础上固定 type 属性，并继承了下拉菜单的 DropdownButtonOptions 选项，同时添加了其他选项。

    type ​
    children ​

    ToolbarBtnGroupProps ​

    选项：

    在原有属性基础上固定 type 属性，并继承了操作菜单的 ActionBasicProps 选项和按钮组的 BtnGroupOptions选项，同时添加了其他选项。

    type ​

    ToolbarDividerProps ​

    选项：

    继承了工具栏的 ActionDividerProps 选项。

    ToolbarSpaceProps ​

    选项：

    继承了工具栏的 ActionSpaceProps 选项。

    type ​
    space ​
    flex ​
    - + \ No newline at end of file diff --git a/dev/lib/components/tooltip/index.html b/dev/lib/components/tooltip/index.html index 4434e98f2b..4ebe5b0f4d 100644 --- a/dev/lib/components/tooltip/index.html +++ b/dev/lib/components/tooltip/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    提示消息 ​

    提示消息又称“工具提示”，在鼠标悬停在元素上时及时显示额外的内容。

    使用方法 ​

    组件提供多种不同方向的展示方式，可以根据需求选择你要的效果。

    触发方式 ​

    除了默认的鼠标悬浮展示信息外，组件也提供了点击触发的方式。

    外观 ​

    指定 type 选项来更改外观类型。

    选项 ​

    名称类型默认值说明
    titlestringnull提示消息内容 placement?: string; // 弹出方向，可选值包括：'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' trigger?: string; // 触发方式，可选值包括：'click' | 'hover' className?: string; // 类名 type?: string; // 外观类型，可选值包括：'primary' | 'secondary' | 'warning' | 'success' | 'danger' | 'important' | 'gray' animation?: boolean; // 是否应用淡入淡出动画 arrow?: number | number; // 箭头大小 delay?: boolean | number; // 延迟显示，可选值包括：true | false | number hideOthers?: boolean; // 显示时隐藏其他已经显示的提示消息

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    提示消息 ​

    提示消息又称“工具提示”，在鼠标悬停在元素上时及时显示额外的内容。

    使用方法 ​

    组件提供多种不同方向的展示方式，可以根据需求选择你要的效果。

    触发方式 ​

    除了默认的鼠标悬浮展示信息外，组件也提供了点击触发的方式。

    外观 ​

    指定 type 选项来更改外观类型。

    选项 ​

    名称类型默认值说明
    titlestringnull提示消息内容 placement?: string; // 弹出方向，可选值包括：'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' trigger?: string; // 触发方式，可选值包括：'click' | 'hover' className?: string; // 类名 type?: string; // 外观类型，可选值包括：'primary' | 'secondary' | 'warning' | 'success' | 'danger' | 'important' | 'gray' animation?: boolean; // 是否应用淡入淡出动画 arrow?: number | number; // 箭头大小 delay?: boolean | number; // 延迟显示，可选值包括：true | false | number hideOthers?: boolean; // 显示时隐藏其他已经显示的提示消息

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/components/tree/index.html b/dev/lib/components/tree/index.html index c58e8cbdfe..8e9080a0d7 100644 --- a/dev/lib/components/tree/index.html +++ b/dev/lib/components/tree/index.html @@ -14,8 +14,8 @@ - - + + @@ -181,7 +181,7 @@ /** 工具栏定义。 */ actions?: ToolbarOptions | ToolbarItemOptions[]; }; - + \ No newline at end of file diff --git a/dev/lib/components/upload-imgs/index.html b/dev/lib/components/upload-imgs/index.html index 1f660f644a..fe3052eb76 100644 --- a/dev/lib/components/upload-imgs/index.html +++ b/dev/lib/components/upload-imgs/index.html @@ -14,8 +14,8 @@ - - + + @@ -40,7 +40,7 @@ tip: '可点击添加或拖拽上传，图片格式支持jpg、jpeg', accept: 'image/jpg, image/jpeg' });

    选项 ​

    name ​

    表单字段名。

    showSize ​

    是否显示文件大小。

    multiple ​

    是否开启多文件上传。

    uploadText ​

    上传按钮文本。

    uploadIcon ​

    上传按钮图标。

    renameBtn ​

    是否启用重命名按钮。

    renameIcon ​

    重命名按钮图标。

    renameText ​

    重命名按钮文本。

    renameClass ​

    重命名按钮类。

    deleteBtn ​

    是否启用删除按钮。

    deleteIcon ​

    删除按钮图标。

    deleteText ​

    删除按钮文本。

    deleteClass ​

    删除按钮类。

    tip ​

    文件上传提示。

    btnClass ​

    上传按钮类。

    onAdd ​

    文件变更回调。

    onDelete ​

    删除文件回调。

    onRename ​

    重命名文件回调。

    onSizeChange ​

    文件大小变更回调。

    limitCount ​

    上传文件最大数量限制。

    accept ​

    上传文件类型。

    defaultFileList ​

    默认文件列表。

    limitSize ​

    上传文件最大大小限制。

    duplicatedHint ​

    重复文件提示。

    onDuplicated ​

    文件重复回调。

    exceededSizeHint ​

    超出大小限制提示。

    onExceededSize ​

    超出大小限制回调。

    exceededCountHint ​

    超过数量限制提示。

    onExceededCount ​

    超过数量限制回调

    totalCountText ​

    文件数量提示。

    - + \ No newline at end of file diff --git a/dev/lib/components/upload/index.html b/dev/lib/components/upload/index.html index 0f67e1f160..5b1e0b79aa 100644 --- a/dev/lib/components/upload/index.html +++ b/dev/lib/components/upload/index.html @@ -14,8 +14,8 @@ - - + + @@ -56,7 +56,7 @@ name: 'files8', defaultFileList: [file1, file2] });

    选项 ​

    name ​

    表单字段名。

    icon ​

    文件图标。

    showIcon ​

    是否显示文件图标。

    showSize ​

    是否显示文件大小。

    multiple ​

    是否开启多文件上传。

    listPosition ​

    文件列表位置。

    uploadText ​

    上传按钮文本。

    uploadIcon ​

    上传按钮图标。

    renameBtn ​

    是否启用重命名按钮。

    renameIcon ​

    重命名按钮图标。

    renameText ​

    重命名按钮文本。

    renameClass ​

    重命名按钮类。

    deleteBtn ​

    是否启用删除按钮。

    deleteIcon ​

    删除按钮图标。

    deleteText ​

    删除按钮文本。

    deleteClass ​

    删除按钮类。

    confirmText ​

    确认重命名按钮文本。

    cancelText ​

    取消重命名按钮文本。

    useIconBtn ​

    是否使用图标按钮。

    tip ​

    文件上传提示。

    btnClass ​

    上传按钮类。

    onAdd ​

    文件变更回调。

    onDelete ​

    删除文件回调。

    onRename ​

    重命名文件回调。

    onSizeChange ​

    文件大小变更回调。

    draggable ​

    是否启用拖拽功能。

    limitCount ​

    上传文件最大数量限制。

    accept ​

    上传文件类型。

    defaultFileList ​

    默认文件列表。

    limitSize ​

    上传文件最大大小限制。

    duplicatedHint ​

    重复文件提示。

    onDuplicated ​

    文件重复回调。

    exceededSizeHint ​

    超出大小限制提示。

    onExceededSize ​

    超出大小限制回调。

    exceededCountHint ​

    超过数量限制提示。

    onExceededCount ​

    超过数量限制回调

    - + \ No newline at end of file diff --git a/dev/lib/forms/checkbox/index.html b/dev/lib/forms/checkbox/index.html index 47135da753..eaf59b1ed1 100644 --- a/dev/lib/forms/checkbox/index.html +++ b/dev/lib/forms/checkbox/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    复选框和单选框 ​

    复选框（checkbox）允许用户选择多个选项，不同于 <select>，这些选项是直接展示的。为 <input type="checkbox"> 设置 disabled 属性来应用禁用样式，如果为 .checkbox 添加 disabled 类，则整个复选框包括文字部分都会应用禁用样式。将多个复选框堆叠形成一个复选框组。

    基本使用 ​

    复选框 ​

    单选框列表 ​

    单选框通常多个一起使用组成列表，将多个单选框放在 .check-list 中即可。

    复选框列表 ​

    复选框也支持多个一起使用组成列表，将多个复选框放在 .check-list 中即可。

    不包含文字样式 ​

    复选框 ​

    单选框 ​

    内联形式 ​

    为让多个复选框或单选框内联显示，可以将他们放置在一个 .check-list-inline 中。

    内联多选框 ​

    内联单选框 ​

    内联间距 ​

    可以通过工具类 gap-* 来设置内联的复选框和单选框间的间距。

    高级外观 ​

    高级外观的多选框和单选框使用自定义的外观代替原生外观，在所有浏览器都具有一致的体验。

    高级外观的复选框 ​

    高级外观的单选框 ​

    无 <input> 选择框 ​

    高级外观还可以不使用 <input> 元素，在此种情况下，为 .checkbox-primary 或 .radio-primary 添加 .checked 类标记为选中状态，通过 focus 类来标记激活状态，用户无法通过点击来切换选中状态，但可以通过程序手动添加或移除 .checked 来更改选中状态。

    设置高级外观颜色 ​

    通过设置 CSS 变量 --checkbox-color 可以设置高级外观颜色。

    CSS 类 ​

    单选框和复选框提供了如下 CSS 类：

    类类型作用
    checkbox实体类复选框组件
    radio实体类单选框组件
    check-list实体类复选框或单选框列表组件
    check-list-inline实体类复选框或单选框内联列表组件
    checkbox-primary实体类高级外观的复选框组件
    radio-primary实体类高级外观的单选框组件
    checked修饰类强制使用选中外观
    focus修饰类强制使用激活外观
    disabled修饰类强制使用禁用外观
    indeterminate修饰类强制使用 Indeterminate 外观

    CSS 变量 ​

    单选框和复选框提供了如下 CSS 变量：

    CSS 变量名作用
    --checkbox-size复选框或单选框大小，仅当使用高级外观时有效
    --checkbox-color复选框或单选框颜色，仅当使用高级外观时有效

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    复选框和单选框 ​

    复选框（checkbox）允许用户选择多个选项，不同于 <select>，这些选项是直接展示的。为 <input type="checkbox"> 设置 disabled 属性来应用禁用样式，如果为 .checkbox 添加 disabled 类，则整个复选框包括文字部分都会应用禁用样式。将多个复选框堆叠形成一个复选框组。

    基本使用 ​

    复选框 ​

    单选框列表 ​

    单选框通常多个一起使用组成列表，将多个单选框放在 .check-list 中即可。

    复选框列表 ​

    复选框也支持多个一起使用组成列表，将多个复选框放在 .check-list 中即可。

    不包含文字样式 ​

    复选框 ​

    单选框 ​

    内联形式 ​

    为让多个复选框或单选框内联显示，可以将他们放置在一个 .check-list-inline 中。

    内联多选框 ​

    内联单选框 ​

    内联间距 ​

    可以通过工具类 gap-* 来设置内联的复选框和单选框间的间距。

    高级外观 ​

    高级外观的多选框和单选框使用自定义的外观代替原生外观，在所有浏览器都具有一致的体验。

    高级外观的复选框 ​

    高级外观的单选框 ​

    无 <input> 选择框 ​

    高级外观还可以不使用 <input> 元素，在此种情况下，为 .checkbox-primary 或 .radio-primary 添加 .checked 类标记为选中状态，通过 focus 类来标记激活状态，用户无法通过点击来切换选中状态，但可以通过程序手动添加或移除 .checked 来更改选中状态。

    设置高级外观颜色 ​

    通过设置 CSS 变量 --checkbox-color 可以设置高级外观颜色。

    CSS 类 ​

    单选框和复选框提供了如下 CSS 类：

    类类型作用
    checkbox实体类复选框组件
    radio实体类单选框组件
    check-list实体类复选框或单选框列表组件
    check-list-inline实体类复选框或单选框内联列表组件
    checkbox-primary实体类高级外观的复选框组件
    radio-primary实体类高级外观的单选框组件
    checked修饰类强制使用选中外观
    focus修饰类强制使用激活外观
    disabled修饰类强制使用禁用外观
    indeterminate修饰类强制使用 Indeterminate 外观

    CSS 变量 ​

    单选框和复选框提供了如下 CSS 变量：

    CSS 变量名作用
    --checkbox-size复选框或单选框大小，仅当使用高级外观时有效
    --checkbox-color复选框或单选框颜色，仅当使用高级外观时有效

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/forms/checkbox/switch.html b/dev/lib/forms/checkbox/switch.html index c99a9e0d90..dd6974a9a3 100644 --- a/dev/lib/forms/checkbox/switch.html +++ b/dev/lib/forms/checkbox/switch.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    开关 ​

    基本使用 ​

    与单选框和复选框的高级外观一样，通过 .switch 类来启用开关外观。

    开关颜色 ​

    通过设置 CSS 变量 --checkbox-color 可以设置高级外观颜色。

    开关列表 ​

    垂直列表 ​

    通过将多个开关放置在 .check-list 中，可以实现一个开关列表：

    内联列表 ​

    通过将多个开关放置在 .check-list 中，可以实现一个开关内联列表：

    列表联动 ​

    通过开关内部使用的 input[type="checkbox"] 更换为 input[type="radio"]，并指定为相同的 name 属性，即可实现多个开关单选联动：

    CSS 类 ​

    开关提供了如下 CSS 类：

    类类型作用
    switch实体类开关组件
    check-list实体类开关列表组件
    check-list-inline实体类开关内联列表组件
    checked修饰类强制使用选中外观
    focus修饰类强制使用激活外观
    disabled修饰类强制使用禁用外观

    CSS 变量 ​

    单选框和复选框提供了如下 CSS 变量：

    CSS 变量名作用
    --checkbox-color开关颜色，仅当使用高级外观时有效

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    开关 ​

    基本使用 ​

    与单选框和复选框的高级外观一样，通过 .switch 类来启用开关外观。

    开关颜色 ​

    通过设置 CSS 变量 --checkbox-color 可以设置高级外观颜色。

    开关列表 ​

    垂直列表 ​

    通过将多个开关放置在 .check-list 中，可以实现一个开关列表：

    内联列表 ​

    通过将多个开关放置在 .check-list 中，可以实现一个开关内联列表：

    列表联动 ​

    通过开关内部使用的 input[type="checkbox"] 更换为 input[type="radio"]，并指定为相同的 name 属性，即可实现多个开关单选联动：

    CSS 类 ​

    开关提供了如下 CSS 类：

    类类型作用
    switch实体类开关组件
    check-list实体类开关列表组件
    check-list-inline实体类开关内联列表组件
    checked修饰类强制使用选中外观
    focus修饰类强制使用激活外观
    disabled修饰类强制使用禁用外观

    CSS 变量 ​

    单选框和复选框提供了如下 CSS 变量：

    CSS 变量名作用
    --checkbox-color开关颜色，仅当使用高级外观时有效

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/forms/datetime-picker/date.html b/dev/lib/forms/datetime-picker/date.html index 8d3ef6b160..d55314386b 100644 --- a/dev/lib/forms/datetime-picker/date.html +++ b/dev/lib/forms/datetime-picker/date.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    日期选择器 ​

    用法 ​

    设置默认值 ​

    通过 defaultValue 选项设置默认值，设置为 'today' 可以将默认值设置为当天。

    格式化 ​

    通过 format 选项设置日期格式化形式，支持日期辅助方法 formatDate 中的所有格式。

    限制日期范围 ​

    通过 minDate 和 maxDate 来限制可选的日期范围。

    自定义菜单 ​

    通过 menu 选项可以在弹出面板侧面显示一个自定义菜单，通过 actions 可以自定义底部工具栏上的按钮。在菜单项和按钮上通过 [data-set-date] 属性指定点击按钮时要设定的日期。

    自定义侧边菜单 ​

    通过 menu 选项可以在弹出面板左侧显示一个自定义菜单，在菜单项配置上通过 [data-set-date] 属性指定点击菜单项时要设定的日期。

    自定义底部按钮 ​

    通过 actions 可以自定义底部工具栏上的按钮，在菜单项和按钮上通过 [data-set-date] 属性指定点击按钮时要设定的日期。

    选项 ​

    名称类型默认值说明
    classNameanynull组件根元素的类名。 style?: object; // 组件根元素的样式。 tagName?: string; // 组件根元素的标签名。 attrs?: object; // 附加到组件根元素上的属性。 clickType?: 'toggle' | 'open'; // 点击类型，toggle 表示点击按钮时切换显示隐藏，open 表示点击按钮时只打开。 name?: string; // 作为表单项的名称。 defaultValue?: 'today' | string; // 默认值。 onChange?: function; // 值变更时的回调函数。 disabled?: boolean; // 是否禁用。 readonly?: boolean; // 是否只读，不允许手动修改。 required?: boolean; // 是否必须提供值（不能清除和选择空值）。 placeholder?: string; // 输入框上占位文本。 format?: string; // 日期格式，默认 yyyy-MM-dd。 icon?: string | object; // 在输入框右侧显示的图标。 weekNames?: string[]; // 星期名称，索引为 0 表示周日。 monthNames?: string[]; // 月份名称，索引为 0 表示一月份。 yearText?: string; // 用于显示年份的格式化文本。 todayText?: string; // 用于显示“今天”的文本。 clearText?: string; // 用于显示“清除”的文本。 weekStart?: number; // 一周从星期几开始，默认 1。 minDate?: DateLike; // 最小可选的日期。 maxDate?: DateLike; // 最大可选的日期。 menu?: object[] | object; // 左侧显示的菜单设置。 actions?: object[] | object; // 底部工具栏设置。 onInvalid?: function; // 日期值无效时的回调函数。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    日期选择器 ​

    用法 ​

    设置默认值 ​

    通过 defaultValue 选项设置默认值，设置为 'today' 可以将默认值设置为当天。

    格式化 ​

    通过 format 选项设置日期格式化形式，支持日期辅助方法 formatDate 中的所有格式。

    限制日期范围 ​

    通过 minDate 和 maxDate 来限制可选的日期范围。

    自定义菜单 ​

    通过 menu 选项可以在弹出面板侧面显示一个自定义菜单，通过 actions 可以自定义底部工具栏上的按钮。在菜单项和按钮上通过 [data-set-date] 属性指定点击按钮时要设定的日期。

    自定义侧边菜单 ​

    通过 menu 选项可以在弹出面板左侧显示一个自定义菜单，在菜单项配置上通过 [data-set-date] 属性指定点击菜单项时要设定的日期。

    自定义底部按钮 ​

    通过 actions 可以自定义底部工具栏上的按钮，在菜单项和按钮上通过 [data-set-date] 属性指定点击按钮时要设定的日期。

    选项 ​

    名称类型默认值说明
    classNameanynull组件根元素的类名。 style?: object; // 组件根元素的样式。 tagName?: string; // 组件根元素的标签名。 attrs?: object; // 附加到组件根元素上的属性。 clickType?: 'toggle' | 'open'; // 点击类型，toggle 表示点击按钮时切换显示隐藏，open 表示点击按钮时只打开。 name?: string; // 作为表单项的名称。 defaultValue?: 'today' | string; // 默认值。 onChange?: function; // 值变更时的回调函数。 disabled?: boolean; // 是否禁用。 readonly?: boolean; // 是否只读，不允许手动修改。 required?: boolean; // 是否必须提供值（不能清除和选择空值）。 placeholder?: string; // 输入框上占位文本。 format?: string; // 日期格式，默认 yyyy-MM-dd。 icon?: string | object; // 在输入框右侧显示的图标。 weekNames?: string[]; // 星期名称，索引为 0 表示周日。 monthNames?: string[]; // 月份名称，索引为 0 表示一月份。 yearText?: string; // 用于显示年份的格式化文本。 todayText?: string; // 用于显示“今天”的文本。 clearText?: string; // 用于显示“清除”的文本。 weekStart?: number; // 一周从星期几开始，默认 1。 minDate?: DateLike; // 最小可选的日期。 maxDate?: DateLike; // 最大可选的日期。 menu?: object[] | object; // 左侧显示的菜单设置。 actions?: object[] | object; // 底部工具栏设置。 onInvalid?: function; // 日期值无效时的回调函数。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/forms/datetime-picker/datetime.html b/dev/lib/forms/datetime-picker/datetime.html index 6e60508daf..252d56cd68 100644 --- a/dev/lib/forms/datetime-picker/datetime.html +++ b/dev/lib/forms/datetime-picker/datetime.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    日期时间选择器 ​

    日期时间选择器允许用户通过下拉面板同时选择日期和时间。

    用法 ​

    设置默认值 ​

    通过 defaultValue 选项设置默认值，设置为 'today' 可以将默认值设置为现在时间。

    格式化 ​

    通过 format 选项设置日期和时间的格式化形式。

    限制日期范围 ​

    通过 minDate 和 maxDate 来限制可选的日期范围。

    自定义菜单 ​

    通过 menu 选项可以在弹出面板左侧显示一个自定义菜单，通过 actions 可以自定义底部工具栏上的按钮。在菜单项和按钮上通过 [data-set-date] 属性指定点击按钮时要设定的日期。

    自定义左侧菜单 ​

    通过 menu 选项可以在弹出面板左侧显示一个自定义菜单，在菜单项配置上通过 [data-set-date] 属性指定点击菜单项时要设定的日期。

    自定义底部按钮 ​

    通过 actions 可以自定义底部工具栏上的按钮，在菜单项和按钮上通过 [data-set-date] 属性指定点击按钮时要设定的日期。

    选项 ​

    名称类型默认值说明
    classNameanynull组件根元素的类名。 style?: object; // 组件根元素的样式。 tagName?: string; // 组件根元素的标签名。 attrs?: object; // 附加到组件根元素上的属性。 clickType?: 'toggle' | 'open'; // 点击类型，toggle 表示点击按钮时切换显示隐藏，open 表示点击按钮时只打开。 name?: string; // 作为表单项的名称。 defaultValue?: 'today' | string; // 默认值。 onChange?: function; // 值变更时的回调函数。 disabled?: boolean; // 是否禁用。 readonly?: boolean; // 是否只读，不允许手动修改。 required?: boolean; // 是否必须提供值（不能清除和选择空值）。 placeholder?: string; // 输入框上占位文本。 format?: string; // 日期格式，默认 yyyy-MM-dd。 icon?: string | object; // 在输入框右侧显示的图标。 weekNames?: string[]; // 星期名称，索引为 0 表示周日。 monthNames?: string[]; // 月份名称，索引为 0 表示一月份。 yearText?: string; // 用于显示年份的格式化文本。 todayText?: string; // 用于显示“今天”的文本。 clearText?: string; // 用于显示“清除”的文本。 weekStart?: number; // 一周从星期几开始，默认 1。 minDate?: DateLike; // 最小可选的日期。 maxDate?: DateLike; // 最大可选的日期。 menu?: object[] | object; // 左侧显示的菜单设置。 actions?: object[] | object; // 底部工具栏设置。 onInvalid?: function; // 日期值无效时的回调函数。 minuteStep?: number; // 分钟选择间隔，默认 5（分钟）。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    日期时间选择器 ​

    日期时间选择器允许用户通过下拉面板同时选择日期和时间。

    用法 ​

    设置默认值 ​

    通过 defaultValue 选项设置默认值，设置为 'today' 可以将默认值设置为现在时间。

    格式化 ​

    通过 format 选项设置日期和时间的格式化形式。

    限制日期范围 ​

    通过 minDate 和 maxDate 来限制可选的日期范围。

    自定义菜单 ​

    通过 menu 选项可以在弹出面板左侧显示一个自定义菜单，通过 actions 可以自定义底部工具栏上的按钮。在菜单项和按钮上通过 [data-set-date] 属性指定点击按钮时要设定的日期。

    自定义左侧菜单 ​

    通过 menu 选项可以在弹出面板左侧显示一个自定义菜单，在菜单项配置上通过 [data-set-date] 属性指定点击菜单项时要设定的日期。

    自定义底部按钮 ​

    通过 actions 可以自定义底部工具栏上的按钮，在菜单项和按钮上通过 [data-set-date] 属性指定点击按钮时要设定的日期。

    选项 ​

    名称类型默认值说明
    classNameanynull组件根元素的类名。 style?: object; // 组件根元素的样式。 tagName?: string; // 组件根元素的标签名。 attrs?: object; // 附加到组件根元素上的属性。 clickType?: 'toggle' | 'open'; // 点击类型，toggle 表示点击按钮时切换显示隐藏，open 表示点击按钮时只打开。 name?: string; // 作为表单项的名称。 defaultValue?: 'today' | string; // 默认值。 onChange?: function; // 值变更时的回调函数。 disabled?: boolean; // 是否禁用。 readonly?: boolean; // 是否只读，不允许手动修改。 required?: boolean; // 是否必须提供值（不能清除和选择空值）。 placeholder?: string; // 输入框上占位文本。 format?: string; // 日期格式，默认 yyyy-MM-dd。 icon?: string | object; // 在输入框右侧显示的图标。 weekNames?: string[]; // 星期名称，索引为 0 表示周日。 monthNames?: string[]; // 月份名称，索引为 0 表示一月份。 yearText?: string; // 用于显示年份的格式化文本。 todayText?: string; // 用于显示“今天”的文本。 clearText?: string; // 用于显示“清除”的文本。 weekStart?: number; // 一周从星期几开始，默认 1。 minDate?: DateLike; // 最小可选的日期。 maxDate?: DateLike; // 最大可选的日期。 menu?: object[] | object; // 左侧显示的菜单设置。 actions?: object[] | object; // 底部工具栏设置。 onInvalid?: function; // 日期值无效时的回调函数。 minuteStep?: number; // 分钟选择间隔，默认 5（分钟）。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/forms/datetime-picker/time.html b/dev/lib/forms/datetime-picker/time.html index 33055f91cf..5ad6b4c644 100644 --- a/dev/lib/forms/datetime-picker/time.html +++ b/dev/lib/forms/datetime-picker/time.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    时间选择器 ​

    用法 ​

    设置默认值 ​

    通过 defaultValue 选项设置默认值，设置为 'now' 可以将默认值设置为页面显示的时刻。

    格式化 ​

    通过 format 选项设置日期格式化形式，支持日期辅助方法 formatDate 中的所有格式。

    选项 ​

    名称类型默认值说明

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    时间选择器 ​

    用法 ​

    设置默认值 ​

    通过 defaultValue 选项设置默认值，设置为 'now' 可以将默认值设置为页面显示的时刻。

    格式化 ​

    通过 format 选项设置日期格式化形式，支持日期辅助方法 formatDate 中的所有格式。

    选项 ​

    名称类型默认值说明

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/forms/form-control/index.html b/dev/lib/forms/form-control/index.html index f0cc709441..4777cdad38 100644 --- a/dev/lib/forms/form-control/index.html +++ b/dev/lib/forms/form-control/index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    表单控件 ​

    输入框 ​

    输入框通过为 <input> 元素添加类 form-control 实现，支持通过 type 属性设置输入框类型。

    选择框 ​

    通过为 <select> 元素添加 form-control 类来使用选择框，包括单选和多选模式。

    单选框 ​

    多选框 ​

    TIP

    使用多选框时通常需要指定多选框高度。

    多行文本框 ​

    通过为 <textarea> 元素添加 form-control 类来使用多行文本框。

    特殊表单控件 ​

    在浏览器支持的情况下，还可以为 type 设置一些特殊类型。

    日期 ​

    设置 <input type="date">。

    时间 ​

    设置 <input type="time">。

    日期时间 ​

    设置 <input type="datetime-local">。

    月份 ​

    设置 <input type="month">。

    周数 ​

    设置 <input type="week">。

    范围 ​

    设置 <input type="range">。

    颜色 ​

    设置 <input type="color">。

    文件 ​

    设置 <input type="file">。

    尺寸 ​

    通过为表单控件添加 size-* 工具类来设置尺寸。

    禁用 ​

    通过为表单控件添加 disabled 属性来禁用表单控件。

    只读 ​

    通过为表单控件添加 readonly 属性来表单控件只读。

    特殊状态 ​

    通过为表单控件或者其直接父级元素添加工具类 has-error、has-warning 和 has-error 来让其拥有特殊语义的状态。

    CSS 类 ​

    表单控件提供了如下 CSS 类：

    类类型作用
    form-control实体类元素作为表单控件组件
    size-sm工具类表单控件使用小号尺寸
    size-lg工具类表单控件使用大号尺寸

    CSS 变量 ​

    表单控件提供了如下 CSS 变量，可进行全局修改。

    CSS 变量名作用
    --form-control-radius圆角
    --form-control-border边框颜色
    --form-control-focus激活颜色
    --form-control-disabled禁用颜色
    --form-control-readonly只读颜色

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    表单控件 ​

    输入框 ​

    输入框通过为 <input> 元素添加类 form-control 实现，支持通过 type 属性设置输入框类型。

    选择框 ​

    通过为 <select> 元素添加 form-control 类来使用选择框，包括单选和多选模式。

    单选框 ​

    多选框 ​

    TIP

    使用多选框时通常需要指定多选框高度。

    多行文本框 ​

    通过为 <textarea> 元素添加 form-control 类来使用多行文本框。

    特殊表单控件 ​

    在浏览器支持的情况下，还可以为 type 设置一些特殊类型。

    日期 ​

    设置 <input type="date">。

    时间 ​

    设置 <input type="time">。

    日期时间 ​

    设置 <input type="datetime-local">。

    月份 ​

    设置 <input type="month">。

    周数 ​

    设置 <input type="week">。

    范围 ​

    设置 <input type="range">。

    颜色 ​

    设置 <input type="color">。

    文件 ​

    设置 <input type="file">。

    尺寸 ​

    通过为表单控件添加 size-* 工具类来设置尺寸。

    禁用 ​

    通过为表单控件添加 disabled 属性来禁用表单控件。

    只读 ​

    通过为表单控件添加 readonly 属性来表单控件只读。

    特殊状态 ​

    通过为表单控件或者其直接父级元素添加工具类 has-error、has-warning 和 has-error 来让其拥有特殊语义的状态。

    CSS 类 ​

    表单控件提供了如下 CSS 类：

    类类型作用
    form-control实体类元素作为表单控件组件
    size-sm工具类表单控件使用小号尺寸
    size-lg工具类表单控件使用大号尺寸

    CSS 变量 ​

    表单控件提供了如下 CSS 变量，可进行全局修改。

    CSS 变量名作用
    --form-control-radius圆角
    --form-control-border边框颜色
    --form-control-focus激活颜色
    --form-control-disabled禁用颜色
    --form-control-readonly只读颜色

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/lib/forms/form/index.html b/dev/lib/forms/form/index.html index 79fa721693..3562227170 100644 --- a/dev/lib/forms/form/index.html +++ b/dev/lib/forms/form/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    表单 ​

    基本用法 ​

    为 <form> 元素使用类 .form 类来获得表单外观，将表单控件放置在表单控件组 .form-group 内，将表单操作按钮放置在表单操作栏 .form-actions 中。

    水平布局的表单 ​

    为 <form> 元素使用类 .form-horz 类来让表单实现水平布局。

    在水平布局表单中，如果需要在一行包含多个表单控件，可以使用 .form-row 类，下面是一个更复杂的例子：

    可以放在同一行的字段满足：可连着填写，字段意义上有相似性
    至
    此表单项为必填
    强关联字段，有灰色底色进行连接，3个以上框的自适应宽度

    网格布局 ​

    为 <form> 元素使用类 .form-grid 类来让表单实现网格布局。

    为 .form-group 添加 w-* 辅助类来设置宽度
    项目类型
    -

    帮助性文本 ​

    使用 form-tip 来显示帮助性的文本并添加到表单控件组中。

    校验状态 ​

    通过为表单控件组添加 has-warning、has-error、has-success 类即可应用相应的效验状态样式。这些样式会影响到表单控件组内的 label、.form-control 和 .form-tip 元素。

    表单分组 ​

    使用fieldset 将多个表单控件放置在一起进行分组。在<fieldset> 内使用 <legend> 来定义分组标题。

    账号信息
    额外内容

    标记必填项 ​

    标记必填项的一种通用方法是在标签上添加星标 * , 在表单控件组中只需要为表单组标签 .form-label 添加 required 类。

    水平布局的表单中也可以使用：

    CSS 类 ​

    表单提供了如下 CSS 类

    类类型作用
    form-group实体类元素作为表单组件
    form-label实体类元素作为表单组标签
    form-control实体类元素作为表单控件组件
    form-tip实体类元素作为表单控件的提示性文本
    form-actions实体类元素作为表单按钮容器
    form-grid修饰类为表单启用水平排列样式
    required修饰类为表单控件启用必填标记样式
    has-error修饰类为表单控件启用报错样式
    has-warning修饰类为表单控件启用警告样式
    has-success修饰类为表单控件启用成功样式

    CSS 变量 ​

    变量名称变量含义
    --form-label-color表单组标签颜色
    --form-tip-color帮助性文本默认颜色
    --form-grid-label-width水平布局时表单表单组标签宽度

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/lib/forms/input-control/index.html b/dev/lib/forms/input-control/index.html index 2b15bbd1af..8f18b03100 100644 --- a/dev/lib/forms/input-control/index.html +++ b/dev/lib/forms/input-control/index.html @@ -14,19 +14,19 @@ - - + + -
    ZUI 3

    Appearance

    输入框 ​

    通过鼠标或键盘输入内容，可以在输入框前后位置包含额外的文本或图标，通常用在表单、对话框上面。

    基本使用 ​

    使用 input-control 类来获得输入框的外观和交互体验。

    用户名
    用户名验证失败

    包含图标和按钮 ​

    前缀和后缀 ​

    通过结合类 has-prefix has-suffix 在输入框上添加前缀或后缀图标或字符。

    除了预设的前 / 后缀宽度，还预设了其他两种尺寸，结合 has-prefix-* 和 has-suffix-* 类进行不同宽度展示。

    用户名
    有效身份证号码

    尺寸 ​

    除了默认大小，输入框还提供了额外的 2 种预设尺寸。

    小号尺寸

    用户名
    有效身份证号码

    默认尺寸

    用户名
    有效身份证号码

    大号尺寸

    用户名
    有效身份证号码

    外观类型 ​

    配合使用CSS 工具类来实现不同输入框的外观。下面展示各种工具类的外观效果。

    html
    <div class="input-control">
+    
    ZUI 3
    Appearance
    输入框 ​
    通过鼠标或键盘输入内容，可以在输入框前后位置包含额外的文本或图标，通常用在表单、对话框上面。
    基本使用 ​
    使用 input-control 类来获得输入框的外观和交互体验。
    用户名
    用户名验证失败
    包含图标和按钮 ​
    前缀和后缀 ​
    通过结合类 has-prefix has-suffix 在输入框上添加前缀或后缀图标或字符。
    除了预设的前 / 后缀宽度，还预设了其他两种尺寸，结合 has-prefix-* 和 has-suffix-* 类进行不同宽度展示。
    用户名
    有效身份证号码
    尺寸 ​
    除了默认大小，输入框还提供了额外的 2 种预设尺寸。
    小号尺寸
    用户名
    有效身份证号码
    默认尺寸
    用户名
    有效身份证号码
    大号尺寸
    用户名
    有效身份证号码
    外观类型 ​
    配合使用CSS 工具类来实现不同输入框的外观。下面展示各种工具类的外观效果。
    html
    <div class="input-control">
   <input type="text" class="form-control circle" placeholder="请填写" />
 </div>
 <div class="input-control">
   <input type="text" class="form-control shadow" placeholder="请填写" />
 </div>
    CSS 类 ​
    输入框提供了如下 CSS 类：
    类类型作用
    input-control实体类元素作为输入框组件
    input-control-prefix工具类输入框前缀元素样式
    input-control-suffix工具类输入框后缀元素样式
    has-prefix工具类标记输入框拥有前缀元素
    has-suffix工具类标记输入框拥有后缀元素
    has-prefix-icon工具类标记输入框拥有前缀图标
    has-suffix-icon工具类标记输入框拥有后缀图标
    size-sm工具类输入框使用小号尺寸
    size-lg工具类输入框使用大号尺寸
    CSS 变量 ​
    输入框提供了如下 CSS 变量，可进行全局修改。
    CSS 变量名作用
    --input-fix-width输入框前/后缀的默认宽度
    --input-fix-width-sm输入框前/后缀的小号宽度
    --input-fix-width-lg输入框前/后缀的大号宽度
    MIT License (MIT)
    Copyright (C) 2023 cnezsoft.com
    
-    
+    
     
   
 
\ No newline at end of file
diff --git a/dev/lib/forms/input-group/index.html b/dev/lib/forms/input-group/index.html
index 85347697e0..60162f1410 100644
--- a/dev/lib/forms/input-group/index.html
+++ b/dev/lib/forms/input-group/index.html
@@ -14,14 +14,14 @@
     
     
     
-    
-    
+    
+    
     
     
   
   
-    
    ZUI 3
    Appearance
    输入组 ​
    通过在文本输入框 <input> 前面、后面或是两边加上文字、图标或按钮，可以实现对表单控件的扩展。
    使用方法 ​
    在元素使用工具类 .input-group 作为输入组容器，然后在内部添加表单控件、按钮或附加文本（.input-group-addon）。
    账号
    密码
    组合方式 ​
    在输入组内部可以将不同的内容按需组合使用，包括附加文本（.input-group-addon）、表单控件（.form-control）、按钮（.btn）。
    登录
    尺寸 ​
    除了默认大小，输入组还提供了额外的 2 种预设尺寸，通过修饰类 .size-* 来应用尺寸。
    登录
    登录
    登录
    CSS 类 ​
    输入组提供了如下 CSS 类：
    类类型作用
    input-group实体类元素作为输入组组件
    input-group-addon实体类元素作为输入组内部额外元素
    size-sm工具类输入组使用小号尺寸
    size-lg工具类输入组使用大号尺寸
    CSS 变量 ​
    变量名称变量含义
    --input-group-addon-bg输入组附加部分背景颜色
    MIT License (MIT)
    Copyright (C) 2023 cnezsoft.com
    
-    
+    
    ZUI 3
    Appearance
    输入组 ​
    通过在文本输入框 <input> 前面、后面或是两边加上文字、图标或按钮，可以实现对表单控件的扩展。
    使用方法 ​
    在元素使用工具类 .input-group 作为输入组容器，然后在内部添加表单控件、按钮或附加文本（.input-group-addon）。
    账号
    密码
    组合方式 ​
    在输入组内部可以将不同的内容按需组合使用，包括附加文本（.input-group-addon）、表单控件（.form-control）、按钮（.btn）。
    登录
    尺寸 ​
    除了默认大小，输入组还提供了额外的 2 种预设尺寸，通过修饰类 .size-* 来应用尺寸。
    登录
    登录
    登录
    CSS 类 ​
    输入组提供了如下 CSS 类：
    类类型作用
    input-group实体类元素作为输入组组件
    input-group-addon实体类元素作为输入组内部额外元素
    size-sm工具类输入组使用小号尺寸
    size-lg工具类输入组使用大号尺寸
    CSS 变量 ​
    变量名称变量含义
    --input-group-addon-bg输入组附加部分背景颜色
    MIT License (MIT)
    Copyright (C) 2023 cnezsoft.com
    
+    
     
   
 
\ No newline at end of file
diff --git a/dev/lib/helpers/core/cash.html b/dev/lib/helpers/core/cash.html
index 29facc3a4e..8faffc1407 100644
--- a/dev/lib/helpers/core/cash.html
+++ b/dev/lib/helpers/core/cash.html
@@ -14,14 +14,14 @@
     
     
     
-    
-    
+    
+    
     
     
   
   
     
    ZUI 3
    Appearance
    Cash（jQuery）扩展 ​
    在 ZUI3 一些 JS 组件依赖了 Cash，这是一个轻量级的 jQuery 替代品，它的 API 与 jQuery 保持一致，但体积更小，性能更好。需要注意的是 Cash 与 jQuery 存在一些差异，详情参考 Migration Guide。
    MIT License (MIT)
    Copyright (C) 2023 cnezsoft.com
    
-    
+    
     
   
 
\ No newline at end of file
diff --git a/dev/lib/helpers/core/component.html b/dev/lib/helpers/core/component.html
index 7dfee07892..644b6b0d06 100644
--- a/dev/lib/helpers/core/component.html
+++ b/dev/lib/helpers/core/component.html
@@ -14,8 +14,8 @@
     
     
     
-    
-    
+    
+    
     
     
   
@@ -82,7 +82,7 @@
 
 /* 销毁。 */
 datePicker.destroy();

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/lib/helpers/helpers/date-helper.html b/dev/lib/helpers/helpers/date-helper.html index 9989faa71b..689de089b6 100644 --- a/dev/lib/helpers/helpers/date-helper.html +++ b/dev/lib/helpers/helpers/date-helper.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    日期辅助方法 ​

    createDate ​

    创建日期时间对象。

    定义：

    ts
    function createDate(dateLike: string | number | Date): Date;

    参数：

    • dateLike：日期时间对象或者日期时间字符串或者时间戳。

    返回值：Date：日期时间对象。

    addDate ​

    在一个日期时间对象上增加指定的时间。

    定义：

    ts
    function addDate(dateLike: string | number | Date, value: number, unit: string): Date;

    参数：

    • dateLike：日期时间对象或者日期时间字符串或者时间戳；
    • value：增加的时间值；
    • unit：增加的时间单位，可选值为：year、month、day、hour、minute、second。

    返回值： Date：日期时间对象。

    formatDate ​

    格式化日期时间对象。

    定义：

    ts
    function formatDate(dateLike: string | number | Date, format = 'yyyy-MM-dd hh:mm', invalidDateValue = ''): string;

    参数：

    • dateLike：日期时间对象或者日期时间字符串或者时间戳；
    • format：格式化字符串，可选值为：yyyy、MM、dd、hh、mm、ss、SSS；
    • invalidDateValue：无效日期时间对象时的返回值。

    返回值： string：格式化后的日期时间字符串。

    所有支持的格式化占位符包括：

      • yyyy，例如：2018，表示四位数字表示的年份
      • yy，例如：18，表示两位数字表示的年份
      • MM，例如：07，表示两位数字表示的月份，不足两位在起始用 0 填充
      • M，例如：10，表示一位或两位数字表示的月份
      • dd，例如：05，表示两位数字表示的日期，不足两位在起始用 0 填充
      • d，例如：5，表示一位或两位数字表示的日期
      • hh，例如：08，表示两位数字表示的小时，不足两位在起始用 0 填充
      • h，例如：8，表示一位或两位数字表示的小时
      • mm，例如：03，表示两位数字表示的分钟，不足两位在起始用 0 填充
      • m，例如：3，表示一位或两位数字表示的分钟
      • ss，例如：05，表示两位数字表示的秒数，不足两位在起始用 0 填充
      • s，例如：5，表示一位或两位数字表示的秒数
      • S，例如：236，表示毫秒数
      • SSS，例如：036，表示毫秒数，不足3位在起始用 0 填充

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/lib/helpers/helpers/string-helper.html b/dev/lib/helpers/helpers/string-helper.html index 90b61f1fcd..693a8ee1d7 100644 --- a/dev/lib/helpers/helpers/string-helper.html +++ b/dev/lib/helpers/helpers/string-helper.html @@ -14,8 +14,8 @@ - - + + @@ -25,7 +25,7 @@ /** 通过映射对象的形式格式化字符串。 */ function formatString(str: string, map: Record<string, unknown>): string;

    参数：

    返回值：string：格式化后的字符串。

    - + \ No newline at end of file diff --git a/dev/lib/helpers/store/index.html b/dev/lib/helpers/store/index.html index 9b9d6069b1..a982e22b3e 100644 --- a/dev/lib/helpers/store/index.html +++ b/dev/lib/helpers/store/index.html @@ -14,8 +14,8 @@ - - + + @@ -41,7 +41,7 @@ store.get('mySecretCode'); // 返回 1 myStore.get('mySecretCode'); // 返回 2 mySessionStore.get('mySecretCode'); // 返回 3 - + \ No newline at end of file diff --git a/dev/lib/index.html b/dev/lib/index.html index 4b67567e05..f631ea3874 100644 --- a/dev/lib/index.html +++ b/dev/lib/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    组件库 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/public/zui/icons/fontawesome-license.html b/dev/public/zui/icons/fontawesome-license.html index eb9945c293..198b4564c5 100644 --- a/dev/public/zui/icons/fontawesome-license.html +++ b/dev/public/zui/icons/fontawesome-license.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    License ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/themes/index.html b/dev/themes/index.html index ae002c4e5f..ab7e5c7d80 100644 --- a/dev/themes/index.html +++ b/dev/themes/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    主题 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/backgrounds/utilities/index.html b/dev/utilities/backgrounds/utilities/index.html index 223943afde..a31df3cfe9 100644 --- a/dev/utilities/backgrounds/utilities/index.html +++ b/dev/utilities/backgrounds/utilities/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    背景色 ​

    效果 ​

    使用工具类 bg-* 给元素添加背景色。

    语义化
    bg-primary
    bg-secondary
    bg-success
    bg-warning
    bg-danger
    bg-important
    bg-special
    主色系列
    bg-primary-50
    bg-primary-100
    bg-primary-200
    bg-primary-300
    bg-primary-400
    bg-primary-500
    bg-primary-600
    bg-primary-700
    bg-primary-800
    bg-primary-900
    bg-primary-950
    次要系列
    bg-secondary-50
    bg-secondary-100
    bg-secondary-200
    bg-secondary-300
    bg-secondary-400
    bg-secondary-500
    bg-secondary-600
    bg-secondary-700
    bg-secondary-800
    bg-secondary-900
    bg-secondary-950
    灰度
    bg-gray-50
    bg-gray-100
    bg-gray-200
    bg-gray-300
    bg-gray-400
    gray
    bg-gray-500 别名: bg-gray
    bg-gray-600
    bg-gray-700
    bg-gray-800
    bg-gray-900
    bg-gray-950
    界面
    bg-white
    纯白
    bg-black
    纯黑
    bg-transparent
    透明
    bg-canvas
    画布
    bg-inverse
    反色
    bg-surface-light
    加重的控件
    bg-surface
    控件
    bg-surface-strong
    轻量的控件
    bg-fore
    前景色作为背景
    bg-focus
    焦点色作为背景
    特殊
    bg-current
    CSS 值 currentColor
    bg-inherit
    CSS 值 inherit
    bg-none
    无背景

    背景色透明度 ​

    使用工具类 bg-opacity-* 给元素设置背景色透明度。

    bg-opacity-0
    透明度：0%
    bg-opacity-5
    透明度：5%
    bg-opacity-10
    透明度：10%
    bg-opacity-20
    透明度：20%
    bg-opacity-25
    透明度：25%
    bg-opacity-30
    透明度：30%
    bg-opacity-40
    透明度：40%
    bg-opacity-50
    透明度：60%
    bg-opacity-60
    透明度：60%
    bg-opacity-70
    透明度：70%
    bg-opacity-75
    透明度：75%
    bg-opacity-80
    透明度：80%
    bg-opacity-90
    透明度：90%
    bg-opacity-95
    透明度：95%
    bg-opacity-100
    透明度：0%

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/borders/utilities/border-color.html b/dev/utilities/borders/utilities/border-color.html index e71d06e3ab..a333eda6f3 100644 --- a/dev/utilities/borders/utilities/border-color.html +++ b/dev/utilities/borders/utilities/border-color.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    边框颜色 ​

    效果 ​

    使用工具类 border-* 给元素添加边框颜色。

    默认
    border-light
    border
    border-strong
    语义化
    border-primary
    border-secondary
    border-success
    border-warning
    border-danger
    border-important
    border-special
    灰度
    border-gray-50
    border-gray-100
    border-gray-200
    border-gray-300
    border-gray-400
    gray
    border-gray-500 别名: border-gray
    border-gray-600
    border-gray-700
    border-gray-800
    border-gray-900
    border-gray-950
    界面
    border-white
    纯白
    border-black
    纯黑
    border-transparent
    透明
    border-canvas
    画布
    border-inverse
    反色
    border-surface-light
    加重的控件
    border-surface
    控件
    border-surface-strong
    轻量的控件
    border-fore
    前景色作为边框颜
    border-focus
    焦点色作为边框颜
    特殊
    border-current
    CSS 值 currentColor
    border-inherit
    CSS 值 inherit

    提示

    除 border 外，其他工具类只设置边框颜色，如果需要启用边框，需要将 border-* 和 border 类一起使用，例如 border border-primary。

    边框颜色透明度 ​

    使用工具类 border-opacity-* 给元素添加边框颜色透明度。

    border-opacity-0
    透明度：0%
    border-opacity-5
    透明度：5%
    border-opacity-10
    透明度：10%
    border-opacity-20
    透明度：20%
    border-opacity-25
    透明度：25%
    border-opacity-30
    透明度：30%
    border-opacity-40
    透明度：40%
    border-opacity-50
    透明度：60%
    border-opacity-60
    透明度：60%
    border-opacity-70
    透明度：70%
    border-opacity-75
    透明度：75%
    border-opacity-80
    透明度：80%
    border-opacity-90
    透明度：90%
    border-opacity-95
    透明度：95%
    border-opacity-100
    透明度：0%

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/borders/utilities/border-radius.html b/dev/utilities/borders/utilities/border-radius.html index d724b744bf..3ebdb5e98d 100644 --- a/dev/utilities/borders/utilities/border-radius.html +++ b/dev/utilities/borders/utilities/border-radius.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    边框圆角 ​

    效果 ​

    使用 'rounded-* 设置元素边框圆角大小。

    所有边
    rounded-none
    rounded-sm
    rounded
    rounded-lg
    rounded-xl
    rounded-2xl
    rounded-3xl
    rounded-full
    禁用特定边
    rounded-t-none
    rounded-r-none
    rounded-b-none
    rounded-l-none
    rounded-br-none
    rounded-bl-none
    rounded-tr-none
    rounded-tl-none

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/borders/utilities/border-width.html b/dev/utilities/borders/utilities/border-width.html index aeac1b6745..8bbff7b99a 100644 --- a/dev/utilities/borders/utilities/border-width.html +++ b/dev/utilities/borders/utilities/border-width.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    边框大小 ​

    效果 ​

    使用 'rounded-* 设置元素边框大小。

    所有边
    border-0
    border
    border-2
    border-4
    上边框
    border-t-0
    border-t
    border-t-2
    border-t-4
    右边框
    border-r-0
    border-r
    border-r-2
    border-r-4
    下边框
    border-b-0
    border-b
    border-b-2
    border-b-4
    左边框
    border-l-0
    border-l
    border-l-2
    border-l-4

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/borders/utilities/divider.html b/dev/utilities/borders/utilities/divider.html index 19dd42c1b2..9ecf253462 100644 --- a/dev/utilities/borders/utilities/divider.html +++ b/dev/utilities/borders/utilities/divider.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    分割线 ​

    通过 .divider 类来定义一个分割线，可以用于 Flex 元素中。

    示例 ​

    Flex 方向：水平
    1
    2
    Flex 方向：垂直
    1
    2

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/borders/utilities/ring-color.html b/dev/utilities/borders/utilities/ring-color.html index 5336304db2..e4354fd216 100644 --- a/dev/utilities/borders/utilities/ring-color.html +++ b/dev/utilities/borders/utilities/ring-color.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    环颜色 ​

    效果 ​

    通过 ring-* 来为元素添加通过 box-shadow 实现的环边框颜色。

    作为边框
    ring-border-light
    ring-border
    ring-border-strong
    透明度反色
    ring-light
    ring-gray
    ring-dark
    ring-darker
    ring-darkest
    语义化
    ring-primary
    ring-secondary
    ring-success
    ring-warning
    ring-danger
    ring-important
    ring-special
    灰度
    ring-gray-50
    ring-gray-100
    ring-gray-200
    ring-gray-300
    ring-gray-400
    ring-gray-500
    ring-gray-600
    ring-gray-700
    ring-gray-800
    ring-gray-900
    ring-gray-950
    界面
    ring-white
    纯白
    ring-black
    纯黑
    ring-canvas
    画布
    ring-inverse
    反色
    ring-surface
    控件
    ring-fore
    前景色
    ring-focus
    焦点色
    特殊
    ring-current
    CSS 值 currentColor
    ring-inherit
    CSS 值 inherit

    环颜色透明度 ​

    使用工具类 ring-opacity-* 给元素添加背景色透明度。

    ring-opacity-0
    透明度：0%
    ring-opacity-5
    透明度：5%
    ring-opacity-10
    透明度：10%
    ring-opacity-20
    透明度：20%
    ring-opacity-25
    透明度：25%
    ring-opacity-30
    透明度：30%
    ring-opacity-40
    透明度：40%
    ring-opacity-50
    透明度：60%
    ring-opacity-60
    透明度：60%
    ring-opacity-70
    透明度：70%
    ring-opacity-75
    透明度：75%
    ring-opacity-80
    透明度：80%
    ring-opacity-90
    透明度：90%
    ring-opacity-95
    透明度：95%
    ring-opacity-100
    透明度：0%

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/borders/utilities/ring-offset.html b/dev/utilities/borders/utilities/ring-offset.html index e0064a17ed..0bbad3f00a 100644 --- a/dev/utilities/borders/utilities/ring-offset.html +++ b/dev/utilities/borders/utilities/ring-offset.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    环偏移 ​

    效果 ​

    通过 ring-offset-* 来为元素环偏移大小。

    默认
    ring-offset-0
    ring-offset-1
    ring-offset-2
    ring-offset-4
    ring-offset-8

    环位置 ​

    使用工具类 ring-inset 设置元素的环显示在元素内部。

    默认
    ring-inset

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/borders/utilities/ring-width.html b/dev/utilities/borders/utilities/ring-width.html index a6ff6349e7..9219e7b75e 100644 --- a/dev/utilities/borders/utilities/ring-width.html +++ b/dev/utilities/borders/utilities/ring-width.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    环大小 ​

    效果 ​

    通过 ring-* 来为元素环大小。

    ring-0
    ring
    默认
    ring-2
    ring-3
    ring-4
    ring-8

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/effects/utilities/animation.html b/dev/utilities/effects/utilities/animation.html index cdaa7d498e..3577950fa1 100644 --- a/dev/utilities/effects/utilities/animation.html +++ b/dev/utilities/effects/utilities/animation.html @@ -14,8 +14,8 @@ - - + + @@ -35,7 +35,7 @@ </div>

    弹跳 ​

    使用 animate-bounce 给元素添加弹跳动画。

    html
    <button type="button" class="btn primary">
   <i class="bounce icon icon-arrow-down"></i> 下载
 </button>
    - + \ No newline at end of file diff --git a/dev/utilities/effects/utilities/filter.html b/dev/utilities/effects/utilities/filter.html index 38c1881e78..562b997ec3 100644 --- a/dev/utilities/effects/utilities/filter.html +++ b/dev/utilities/effects/utilities/filter.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    CSS 滤镜 ​

    高斯模糊 ​

    通过 blur-* 给图片添加高斯模糊样式。

    原始
    blur-none
    blur-sm
    blur
    blur-md
    blur-lg
    blur-xl

    灰度和反色 ​

    通过 grayscale 将图像转为灰度图像；通过 invert 将图像设置为反色。

    原始
    grayscale
    invert

    形状阴影 ​

    通过 drop-shadow-* 给元素设置形状阴影效果，通常用在图片上。

    原始
    drop-shadow-none
    drop-shadow-sm
    drop-shadow
    drop-shadow-md
    drop-shadow-lg
    drop-shadow-xl
    drop-shadow-2xl

    背景模糊 ​

    通过 backdrop-blur-* 添加覆盖区域模糊样式。

    原始
    backdrop-blur-none
    backdrop-blur-sm
    backdrop-blur
    backdrop-blur-md
    backdrop-blur-lg
    backdrop-blur-xl
    backdrop-blur-2xl
    backdrop-blur-3xl

    禁用滤镜 ​

    通过 filter-none 来禁用之前添加的滤镜效果。

    filter-none

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/effects/utilities/opacity.html b/dev/utilities/effects/utilities/opacity.html index b445a291c0..48eb0aa8e7 100644 --- a/dev/utilities/effects/utilities/opacity.html +++ b/dev/utilities/effects/utilities/opacity.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    透明度 ​

    使用 opacity-* 设置元素的透明度。

    opacity-0
    opacity-5
    opacity-10
    opacity-20
    opacity-25
    opacity-30
    opacity-40
    opacity-50
    opacity-60
    opacity-70
    opacity-75
    opacity-80
    opacity-90
    opacity-95
    opacity-100

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/effects/utilities/shadow.html b/dev/utilities/effects/utilities/shadow.html index e595bd953a..8f3279e4f4 100644 --- a/dev/utilities/effects/utilities/shadow.html +++ b/dev/utilities/effects/utilities/shadow.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    阴影 ​

    阴影大小 ​

    使用 shadow-* 设置不同大小的阴影。

    shadow-none
    shadow-sm
    shadow
    shadow-md
    shadow-lg
    shadow-xl
    shadow-2xl
    shadow-inner

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/effects/utilities/transform.html b/dev/utilities/effects/utilities/transform.html index bd7c84422a..5f4460cecf 100644 --- a/dev/utilities/effects/utilities/transform.html +++ b/dev/utilities/effects/utilities/transform.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    变换 ​

    使用 CSS transform 对元素应用变换效果。

    缩放 ​

    通过 scale-* 为元素应用缩放效果。

    原始
    scale-0
    scale-50
    scale-75
    scale-90
    scale-95
    scale-100
    scale-105
    scale-110
    scale-125
    scale-150

    旋转 ​

    通过 rotate-* 为元素应用旋转效果。

    原始
    rotate-0
    rotate-1
    rotate-2
    rotate-3
    rotate-6
    rotate-12
    rotate-45
    rotate-90
    rotate-135
    rotate-180
    rotate-270

    翻转 ​

    添加 flip-* 给元素添加翻转效果。

    原始
    flip-x
    flip-y

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/effects/utilities/transition.html b/dev/utilities/effects/utilities/transition.html index 541c4314e3..e5c815b3f1 100644 --- a/dev/utilities/effects/utilities/transition.html +++ b/dev/utilities/effects/utilities/transition.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    过渡动画 ​

    过渡属性 ​

    通过 transition-* 为元素应用过渡动画，并制定过渡目标属性。

    transition
    transition
    all
    transition-all
    colors
    transition-colors
    opacity
    transition-opacity
    shadow
    transition-shadow
    transform
    transition-transform

    过渡时间 ​

    通过 duration-* 为元素应用过渡动画时间。

    75ms
    duration-75
    100ms
    duration-100
    200ms
    duration-200
    300ms
    duration-300
    500ms
    duration-500
    1000ms
    duration-1000

    渐隐渐显 ​

    通过 fade-* 来为元素设置渐隐渐显动画效果，默认元素不显示，通过控制添加 in 类让元素渐显。

    默认
    默认
    fade
    从中心显示
    从中心显示
    fade-from-center
    从下方显示
    从下方显示
    fade-from-bottom
    从上方显示
    从上方显示
    fade-from-top
    从左侧显示
    从左侧显示
    fade-from-left
    从右侧显示
    从右侧显示
    fade-from-right

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/align-content.html b/dev/utilities/flex/utilities/align-content.html index ab5c82e6c7..77e8bb38d6 100644 --- a/dev/utilities/flex/utilities/align-content.html +++ b/dev/utilities/flex/utilities/align-content.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    align-content ​

    使用 content-* 应用CSS align-content 属性设置 Flex 容器中多行子元素沿交叉轴的对齐方式。

    效果展示 ​

    content-center

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-start

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-end

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-between

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-around

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    content-evenly

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/align-items.html b/dev/utilities/flex/utilities/align-items.html index ae01b2b22d..3589ec7cfc 100644 --- a/dev/utilities/flex/utilities/align-items.html +++ b/dev/utilities/flex/utilities/align-items.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    align-items ​

    使用 items-* 应用CSS align-items 属性 属性设置 Flex 容器中的交叉轴方向上的对齐方式。

    items-center

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    items-start

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    items-end

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    items-baseline

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    items-stretch

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/align-self.html b/dev/utilities/flex/utilities/align-self.html index a87019fb1c..c2e5be609c 100644 --- a/dev/utilities/flex/utilities/align-self.html +++ b/dev/utilities/flex/utilities/align-self.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    align-self ​

    使用 self-* 应用 CSS align-self 属性设置当前元素在 Grid 或 Flex 容器中的交叉轴方向上的对齐方式。

    self-auto

    self-auto
    default
    default
    default
    default

    self-start

    self-start
    default
    default
    default
    default

    self-end

    self-end
    default
    default
    default
    default

    self-center

    self-center
    default
    default
    default
    default

    self-stretch

    self-stretch
    default
    default
    default
    default

    self-baseline

    self-baseline
    default
    default
    default
    default

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/basis.html b/dev/utilities/flex/utilities/basis.html index 07d4e7b349..f2c5d02cf1 100644 --- a/dev/utilities/flex/utilities/basis.html +++ b/dev/utilities/flex/utilities/basis.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    basis ​

    效果 ​

    使用 basis-* 应用 CSS flex-basis 属性设置当前元素在 Grid 或 Flex 容器中弹性盒伸缩的基准值。

    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    14
    16
    20
    24
    28
    32
    36
    40
    44
    48
    52
    56
    60
    64
    72
    80
    96
    full
    auto
    px

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/direction.html b/dev/utilities/flex/utilities/direction.html index e899b968cc..03b4a9bf08 100644 --- a/dev/utilities/flex/utilities/direction.html +++ b/dev/utilities/flex/utilities/direction.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    direction ​

    效果 ​

    应用 CSS flex-direction 属性设置 Flex 容器中主轴的展开方向。

    row

    1
    2
    3

    row-reverse

    1
    2
    3

    col

    1
    2
    3

    col-reverse

    1
    2
    3

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/flex.html b/dev/utilities/flex/utilities/flex.html index 82c49296d3..4f5a308fea 100644 --- a/dev/utilities/flex/utilities/flex.html +++ b/dev/utilities/flex/utilities/flex.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    flex ​

    效果 ​

    使用 flex-* 应用CSS flex 属性设置当前元素在 Grid 或 Flex 容器中的伸缩方式。

    flex-auto

    24 × 8
    24 × 8
    24 × 8

    flex-1

    24 × 8
    24 × 8
    24 × 8

    flex-initial

    24 × 8
    24 × 8
    24 × 8

    flex-none

    24 × 8
    24 × 8
    24 × 8

    混合使用 ​

    flex-auto
    flex-1
    flex-initial
    flex-none

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/gap.html b/dev/utilities/flex/utilities/gap.html index c465c34036..6bfc7a5f3b 100644 --- a/dev/utilities/flex/utilities/gap.html +++ b/dev/utilities/flex/utilities/gap.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    gap ​

    效果 ​

    使用 gap-* 应用CSS属性 gap 设置 Flex 容器中元素间距。

    gap-0

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-0

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-0

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-4

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-4

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-4

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-6

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-6

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-6

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-7

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-7

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-7

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-x-8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    gap-y-8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/grow.html b/dev/utilities/flex/utilities/grow.html index c09a606b54..5482faa975 100644 --- a/dev/utilities/flex/utilities/grow.html +++ b/dev/utilities/flex/utilities/grow.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    grow ​

    使用grow应用CSSflex-grow属性设置Flex容器中元素是否能放大。

    grow-0
    grow

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/justify-content.html b/dev/utilities/flex/utilities/justify-content.html index ab5849f7fe..1218301371 100644 --- a/dev/utilities/flex/utilities/justify-content.html +++ b/dev/utilities/flex/utilities/justify-content.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    justify-content ​

    效果 ​

    使用 justify-* 应用 CSS justify-content 属性设置Flex容器中元素沿水平轴的对齐方式。

    justify-start

    1
    2
    3
    4

    justify-end

    1
    2
    3
    4

    justify-center

    1
    2
    3
    4

    justify-between

    1
    2
    3
    4

    justify-around

    1
    2
    3
    4

    justify-evenly

    1
    2
    3
    4

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/order.html b/dev/utilities/flex/utilities/order.html index 303fbc070b..19329de89a 100644 --- a/dev/utilities/flex/utilities/order.html +++ b/dev/utilities/flex/utilities/order.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    order ​

    效果 ​

    使用 order-* 应用CSS属性 order 设置当前元素在 Flex 容器中的排列顺序。

    1
    order-12
    2
    order-11
    3
    order-10
    4
    order-9
    5
    order-8
    6
    order-7
    7
    order-6
    8
    order-5
    9
    order-4
    10
    order-3
    11
    order-2
    12
    order-1

    使用 order-first、order-last、order-none 也可以改变 Flex 子元素排列顺序。

    0
    order-last
    1
    order-first
    2
    order-none

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/shrink.html b/dev/utilities/flex/utilities/shrink.html index 9663bedc0e..0edc00f996 100644 --- a/dev/utilities/flex/utilities/shrink.html +++ b/dev/utilities/flex/utilities/shrink.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    shrink ​

    使用 shrink 和 shrink-0 应用 CSS flex-shrink 属性设置 Flex 容器中元素是否缩小。

    shrink
    shrink-0

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/flex/utilities/wrap.html b/dev/utilities/flex/utilities/wrap.html index 23184d4fbd..72785bac54 100644 --- a/dev/utilities/flex/utilities/wrap.html +++ b/dev/utilities/flex/utilities/wrap.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    wrap ​

    添加 flex-* 应用 CSS flex-wrap 相关属性设置 Flex 容器中换行方式。

    flex-wrap

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    flex-wrap-reverse

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    flex-nowrap

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/index.html b/dev/utilities/index.html index 4ec79a0822..ad991987b4 100644 --- a/dev/utilities/index.html +++ b/dev/utilities/index.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    CSS 工具类 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/interactivity/utilities/cursor.html b/dev/utilities/interactivity/utilities/cursor.html index 9069f050cc..37c05521de 100644 --- a/dev/utilities/interactivity/utilities/cursor.html +++ b/dev/utilities/interactivity/utilities/cursor.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    光标 ​

    效果 ​

    通过 cursor-* 类可以改变光标的样式。

    cursor-auto
    cursor-auto
    cursor-default
    cursor-default
    cursor-pointer
    cursor-pointer
    cursor-wait
    cursor-wait
    cursor-text
    cursor-text
    cursor-move
    cursor-move
    cursor-help
    cursor-help
    cursor-not-allowed
    cursor-not-allowed

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    光标 ​

    效果 ​

    通过 cursor-* 类可以改变光标的样式。

    cursor-auto
    cursor-auto
    cursor-default
    cursor-default
    cursor-pointer
    cursor-pointer
    cursor-wait
    cursor-wait
    cursor-text
    cursor-text
    cursor-move
    cursor-move
    cursor-help
    cursor-help
    cursor-not-allowed
    cursor-not-allowed

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/interactivity/utilities/disabled.html b/dev/utilities/interactivity/utilities/disabled.html index 90a3ecfa0c..ebce424c4f 100644 --- a/dev/utilities/interactivity/utilities/disabled.html +++ b/dev/utilities/interactivity/utilities/disabled.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    禁用 ​

    效果 ​

    使用 disabled 类设置元素为禁用，禁用的元素会以半透明的形式显示，并强制使用灰度显示。

    注意

    禁用元素仍然响应鼠标事件，如果需要完全禁用鼠标事件，需要添加 pointer-events-none，如果是表单元素或按钮则可以添加 disabled="disabled" 属性实现完全禁用。

    禁用的链接禁用展示

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    禁用 ​

    效果 ​

    使用 disabled 类设置元素为禁用，禁用的元素会以半透明的形式显示，并强制使用灰度显示。

    注意

    禁用元素仍然响应鼠标事件，如果需要完全禁用鼠标事件，需要添加 pointer-events-none，如果是表单元素或按钮则可以添加 disabled="disabled" 属性实现完全禁用。

    禁用的链接禁用展示

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/interactivity/utilities/loading.html b/dev/utilities/interactivity/utilities/loading.html index 1b95223f26..c75a402575 100644 --- a/dev/utilities/interactivity/utilities/loading.html +++ b/dev/utilities/interactivity/utilities/loading.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    加载指示器 ​

    用法 ​

    通过为元素添加 load-indicator 来让其拥有加载指示器的能力，通过添加或移除 loading 类来控制加载指示器的显示与隐藏。

    Hello ZUI!

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    加载指示器 ​

    用法 ​

    通过为元素添加 load-indicator 来让其拥有加载指示器的能力，通过添加或移除 loading 类来控制加载指示器的显示与隐藏。

    Hello ZUI!

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/interactivity/utilities/pointer-events.html b/dev/utilities/interactivity/utilities/pointer-events.html index 7bc6960997..d02c7d7a6f 100644 --- a/dev/utilities/interactivity/utilities/pointer-events.html +++ b/dev/utilities/interactivity/utilities/pointer-events.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    指针事件 ​

    效果 ​

    通过工具类 pointer-events-* 来控制元素是否响应指向事件。

    启用指针事件
    pointer-events-auto
    禁用指针事件
    pointer-events-none

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    指针事件 ​

    效果 ​

    通过工具类 pointer-events-* 来控制元素是否响应指向事件。

    启用指针事件
    pointer-events-auto
    禁用指针事件
    pointer-events-none

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/interactivity/utilities/scroll.html b/dev/utilities/interactivity/utilities/scroll.html index 1cbd7ce35c..a4608897c8 100644 --- a/dev/utilities/interactivity/utilities/scroll.html +++ b/dev/utilities/interactivity/utilities/scroll.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    滚动 ​

    平滑滚动 ​

    使用 scroll-smooth 工具类来为元素应用 scroll-behavior: smooth 属性，指定其进行平滑滚动。

    1
    2
    3
    4
    滚动到：

    立即滚动 ​

    使用 scroll-auto 工具类来为元素应用 scroll-behavior: auto 属性，指定其进行立即滚动。

    1
    2
    3
    4
    滚动到：

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/interactivity/utilities/state.html b/dev/utilities/interactivity/utilities/state.html index ccf6bbfcf9..f2fb6ecd64 100644 --- a/dev/utilities/interactivity/utilities/state.html +++ b/dev/utilities/interactivity/utilities/state.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    状态响应 ​

    效果 ​

    通过为元素添加工具类 state 让按钮响应用户的鼠标交互，包括鼠标悬停、鼠标按下、获得焦点时拥有不同的样式。

    普通链接State 链接
    普通 DIV
    State DIV
    State DisabledState Active

    提示

    在按钮（.btn）和导航中的链接（.item > a ）已经默认应用了 state 工具类，无需再次添加。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    状态响应 ​

    效果 ​

    通过为元素添加工具类 state 让按钮响应用户的鼠标交互，包括鼠标悬停、鼠标按下、获得焦点时拥有不同的样式。

    普通链接State 链接
    普通 DIV
    State DIV
    State DisabledState Active

    提示

    在按钮（.btn）和导航中的链接（.item > a ）已经默认应用了 state 工具类，无需再次添加。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/interactivity/utilities/user-select.html b/dev/utilities/interactivity/utilities/user-select.html index 89fc121954..60dac54e14 100644 --- a/dev/utilities/interactivity/utilities/user-select.html +++ b/dev/utilities/interactivity/utilities/user-select.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    文本选择 ​

    用于控制用户能否选中文本的工具类。

    效果 ​

    通过工具类 select-* 来控制用户能否选中元素中的文本。

    禁止选择文本
    select-none
    允许选择文本
    select-text
    点击自动选择所有文本
    select-all
    浏览器默认行为
    select-auto

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    文本选择 ​

    用于控制用户能否选中文本的工具类。

    效果 ​

    通过工具类 select-* 来控制用户能否选中元素中的文本。

    禁止选择文本
    select-none
    允许选择文本
    select-text
    点击自动选择所有文本
    select-all
    浏览器默认行为
    select-auto

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/aspect-ratio.html b/dev/utilities/layout/utilities/aspect-ratio.html index d99d90e590..ef941e37d1 100644 --- a/dev/utilities/layout/utilities/aspect-ratio.html +++ b/dev/utilities/layout/utilities/aspect-ratio.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    宽高比 ​

    效果 ​

    通过 aspect-* 类来控制元素显示的比例。

    w-32
    aspect-auto
    aspect-ratio: auto;
    w-32
    aspect-square
    aspect-ratio: 1 / 1;
    w-32
    aspect-video
    aspect-ratio: 16 / 9;

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    宽高比 ​

    效果 ​

    通过 aspect-* 类来控制元素显示的比例。

    w-32
    aspect-auto
    aspect-ratio: auto;
    w-32
    aspect-square
    aspect-ratio: 1 / 1;
    w-32
    aspect-video
    aspect-ratio: 16 / 9;

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/container.html b/dev/utilities/layout/utilities/container.html index 3b3aab9f3f..75c3b802f2 100644 --- a/dev/utilities/layout/utilities/container.html +++ b/dev/utilities/layout/utilities/container.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    容器 ​

    定义 ​

    使用 container 类将元素宽度限制为当前屏幕断点，具体规则如下：

    屏幕断点CSS 属性
    默认width: 100%;
    @media (min-width: --screen-sm)max-width: --screen-sm;
    @media (min-width: --screen-md)max-width: --screen-sm;
    @media (min-width: --screen-lg)max-width: --screen-sm;
    @media (min-width: --screen-xl)max-width: --screen-sm;
    @media (min-width: --screen-2xl)max-width: --screen-sm;

    提示

    .container 还会为元素添加 margin-left: auto; margin-right: auto;，使得元素默认居中显示。

    用法 ​

    .container

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    容器 ​

    定义 ​

    使用 container 类将元素宽度限制为当前屏幕断点，具体规则如下：

    屏幕断点CSS 属性
    默认width: 100%;
    @media (min-width: --screen-sm)max-width: --screen-sm;
    @media (min-width: --screen-md)max-width: --screen-sm;
    @media (min-width: --screen-lg)max-width: --screen-sm;
    @media (min-width: --screen-xl)max-width: --screen-sm;
    @media (min-width: --screen-2xl)max-width: --screen-sm;

    提示

    .container 还会为元素添加 margin-left: auto; margin-right: auto;，使得元素默认居中显示。

    用法 ​

    .container

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/display.html b/dev/utilities/layout/utilities/display.html index b770c1fd6b..cc07f746f0 100644 --- a/dev/utilities/layout/utilities/display.html +++ b/dev/utilities/layout/utilities/display.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    显示类型 ​

    定义 ​

    在 ZUI 中提供了各种工具类来设置 CSS display 属性，主要包括：

    工具类属性
    blockdisplay: block;
    inline-blockdisplay: inline-block;
    inlinedisplay: inline;
    flexdisplay: flex;
    inline-flexdisplay: inline-flex;
    tabledisplay: table;
    table-celldisplay: table-cell;
    table-rowdisplay: table-row;
    list-itemdisplay: list-item;
    hiddendisplay: hidden;

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/floats.html b/dev/utilities/layout/utilities/floats.html index dc8b4851a5..5a6315b070 100644 --- a/dev/utilities/layout/utilities/floats.html +++ b/dev/utilities/layout/utilities/floats.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    浮动 ​

    定义 ​

    用于设置元素浮动或清除浮动影响的工具类。

    工具类属性
    pull-rightfloat: right;
    pull-leftfloat: left;
    clearfix.clearfix::after {content: ""; display: block; clear: both;}

    提示

    浮动应当仅适用于实现文字环绕效果，布局请使用 Flex 工具类。

    效果展示 ​

    向右浮动 ​

    使用工具类 pull-right 将一个元素浮动到其容器的右边。

    So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

    月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。

    向左浮动 ​

    使用工具类 pull-left 将一个元素浮动到其容器的左边。

    So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

    月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/object-fit.html b/dev/utilities/layout/utilities/object-fit.html index 1f9097ca45..2dfe9e5b70 100644 --- a/dev/utilities/layout/utilities/object-fit.html +++ b/dev/utilities/layout/utilities/object-fit.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    内容适配 ​

    定义 ​

    元素的内容应该如何去适应指定容器的高度与宽度。

    工具类属性
    object-containobject-fit: contain;
    object-coverobject-fit: cover;
    object-fillobject-fit: fill;
    object-noneobject-fit: none;
    object-scale-downobject-fit: scale-down;

    效果展示 ​

    包含 ​

    使用工具类 object-contain 调整元素内容的大小，使其保持在容器内。

    覆盖 ​

    使用工具类 object-cover 调整元素内容的大小以覆盖其容器。

    充满 ​

    使用工具类 object-fill 拉伸元素的内容以适应其容器。

    无 ​

    使用工具类 object-none 以原始大小显示元素的内容，忽略容器大小。

    缩小 ​

    以原始大小显示元素的内容，但必要时使用 object-scale-down 将其缩小以适应其容器。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/overflow.html b/dev/utilities/layout/utilities/overflow.html index 24121ed4bb..f3a48221e5 100644 --- a/dev/utilities/layout/utilities/overflow.html +++ b/dev/utilities/layout/utilities/overflow.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    溢出 ​

    定义 ​

    用于控制元素如何处理超出容器的内容的工具类。

    工具类属性
    overflow-autooverflow: auto;
    overflow-hiddenoverflow: hidden;
    overflow-cliptext-overflow: clip;
    overflow-visibleoverflow: visible;
    overflow-scrolloverflow: scroll;
    overflow-x-autooverflow-x: auto;
    overflow-y-autooverflow-y: auto;
    overflow-x-hiddenoverflow-x: hidden;
    overflow-y-hiddenoverflow-y: hidden;
    overflow-x-visibleoverflow-x: visible;
    overflow-y-visibleoverflow-y: visible;
    overflow-x-scrolloverflow-x: scroll;
    overflow-y-scrolloverflow-y: scroll;

    效果展示 ​

    自动 ​

    使用工具类 overflow-auto 在一个元素的内容溢出该元素的边界时为其添加滚动条。不像 overflow-scroll 总是显示滚动条，这个工具类只在需要滚动时才会显示。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。
    小楼昨夜又东风，故国不堪回首月明中。
    雕栏玉砌应犹在，只是朱颜改。
    问君能有几多愁？恰似一江春水向东流

    隐藏 ​

    使用工具类 overflow-hidden 来剪切元素中任何溢出该元素边界的内容。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。
    小楼昨夜又东风，故国不堪回首月明中。
    雕栏玉砌应犹在，只是朱颜改。
    问君能有几多愁？恰似一江春水向东流

    可见 ​

    使用工具类 overflow-visible 来防止元素内的内容被剪切。请注意，任何溢出元素边界的内容都将是可见的。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。
    小楼昨夜又东风，故国不堪回首月明中。
    雕栏玉砌应犹在，只是朱颜改。
    问君能有几多愁？恰似一江春水向东流

    需要时水平滚动 ​

    如果需要，使用工具类 overflow-x-auto 来允许水平滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    需要时垂直滚动 ​

    如果需要，使用工具类 overflow-y-auto 来允许垂直滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    始终水平滚动 ​

    如果需要，使用工具类 overflow-x-scroll 来允许水平滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    始终垂直滚动 ​

    如果需要，使用工具类 overflow-y-scroll 来允许水平滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    在所有方向上滚动 ​

    如果需要，使用工具类 overflow-scroll 来允许水平滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    溢出 ​

    定义 ​

    用于控制元素如何处理超出容器的内容的工具类。

    工具类属性
    overflow-autooverflow: auto;
    overflow-hiddenoverflow: hidden;
    overflow-cliptext-overflow: clip;
    overflow-visibleoverflow: visible;
    overflow-scrolloverflow: scroll;
    overflow-x-autooverflow-x: auto;
    overflow-y-autooverflow-y: auto;
    overflow-x-hiddenoverflow-x: hidden;
    overflow-y-hiddenoverflow-y: hidden;
    overflow-x-visibleoverflow-x: visible;
    overflow-y-visibleoverflow-y: visible;
    overflow-x-scrolloverflow-x: scroll;
    overflow-y-scrolloverflow-y: scroll;

    效果展示 ​

    自动 ​

    使用工具类 overflow-auto 在一个元素的内容溢出该元素的边界时为其添加滚动条。不像 overflow-scroll 总是显示滚动条，这个工具类只在需要滚动时才会显示。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。
    小楼昨夜又东风，故国不堪回首月明中。
    雕栏玉砌应犹在，只是朱颜改。
    问君能有几多愁？恰似一江春水向东流

    隐藏 ​

    使用工具类 overflow-hidden 来剪切元素中任何溢出该元素边界的内容。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。
    小楼昨夜又东风，故国不堪回首月明中。
    雕栏玉砌应犹在，只是朱颜改。
    问君能有几多愁？恰似一江春水向东流

    可见 ​

    使用工具类 overflow-visible 来防止元素内的内容被剪切。请注意，任何溢出元素边界的内容都将是可见的。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。
    小楼昨夜又东风，故国不堪回首月明中。
    雕栏玉砌应犹在，只是朱颜改。
    问君能有几多愁？恰似一江春水向东流

    需要时水平滚动 ​

    如果需要，使用工具类 overflow-x-auto 来允许水平滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    需要时垂直滚动 ​

    如果需要，使用工具类 overflow-y-auto 来允许垂直滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    始终水平滚动 ​

    如果需要，使用工具类 overflow-x-scroll 来允许水平滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    始终垂直滚动 ​

    如果需要，使用工具类 overflow-y-scroll 来允许水平滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    在所有方向上滚动 ​

    如果需要，使用工具类 overflow-scroll 来允许水平滚动。

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    虞美人·春花秋月何时了

    五代·李煜

    春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/position.html b/dev/utilities/layout/utilities/position.html index f0394612b2..43c1b98f1f 100644 --- a/dev/utilities/layout/utilities/position.html +++ b/dev/utilities/layout/utilities/position.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    定位 ​

    定义 ​

    用于控制元素在DOM中的位置的工具类。

    工具类属性
    staticposition: static;
    fixedposition: fixed;
    absoluteposition: absolute;
    relativeposition: relative;
    stickyposition: sticky;

    使用方法 ​

    static 与 absolute ​

    使用 static 根据常规的文档流来定位元素，浏览器默认 position 取值就是 static。任何偏移都将被忽略，而且该元素不会作为绝对定位的子元素的位置参考。

    Static 父元素

    Absolute 子元素

    relative 与 absolute ​

    使用 relative 根据常规的文档流来定位元素。偏移量是相对于元素的正常位置计算的，并且该元素将作为绝对定位的子元素的位置参考。

    使用 absolute 将一个元素定位在文档常规流之外，使相邻元素的行为就像该元素不存在一样。偏移量是相对于最近的位置不是 static 的父元素计算的，而且该元素将作为其他绝对定位的子元素的位置参考。

    Relative 父元素

    Absolute 子元素

    sticky ​

    sticky 元素根据正常文档流进行定位，然后相对它的最近滚动祖先和 containing block，包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

    黄鹤楼送孟浩然之广陵

    故人西辞黄鹤楼，

    烟花三月下扬州。

    孤帆远影碧空尽，

    唯见长江天际流。

    闻王昌龄左迁龙标遥有此寄

    杨花落尽子规啼，

    闻道龙标过五溪。

    我寄愁心与明月，

    随君直到夜郎西。

    宣州谢朓楼饯别校书叔云

    弃我去者，昨日之日不可留；

    乱我心者，今日之日多烦忧。

    长风万里送秋雁，对此可以酣高楼。

    蓬莱文章建安骨，中间小谢又清发。

    俱怀逸兴壮思飞，欲上青天揽明月。

    抽刀断水水更流，举杯消愁愁更愁。

    人生在世不称意，明朝散发弄扁舟。

    fixed ​

    使用 fixed 来定位一个元素相对于浏览器窗视口的位置。偏移量是相对于视口计算的，且该元素将作为绝对定位的子元素的位置参考。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    定位 ​

    定义 ​

    用于控制元素在DOM中的位置的工具类。

    工具类属性
    staticposition: static;
    fixedposition: fixed;
    absoluteposition: absolute;
    relativeposition: relative;
    stickyposition: sticky;

    使用方法 ​

    static 与 absolute ​

    使用 static 根据常规的文档流来定位元素，浏览器默认 position 取值就是 static。任何偏移都将被忽略，而且该元素不会作为绝对定位的子元素的位置参考。

    Static 父元素

    Absolute 子元素

    relative 与 absolute ​

    使用 relative 根据常规的文档流来定位元素。偏移量是相对于元素的正常位置计算的，并且该元素将作为绝对定位的子元素的位置参考。

    使用 absolute 将一个元素定位在文档常规流之外，使相邻元素的行为就像该元素不存在一样。偏移量是相对于最近的位置不是 static 的父元素计算的，而且该元素将作为其他绝对定位的子元素的位置参考。

    Relative 父元素

    Absolute 子元素

    sticky ​

    sticky 元素根据正常文档流进行定位，然后相对它的最近滚动祖先和 containing block，包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

    黄鹤楼送孟浩然之广陵

    故人西辞黄鹤楼，

    烟花三月下扬州。

    孤帆远影碧空尽，

    唯见长江天际流。

    闻王昌龄左迁龙标遥有此寄

    杨花落尽子规啼，

    闻道龙标过五溪。

    我寄愁心与明月，

    随君直到夜郎西。

    宣州谢朓楼饯别校书叔云

    弃我去者，昨日之日不可留；

    乱我心者，今日之日多烦忧。

    长风万里送秋雁，对此可以酣高楼。

    蓬莱文章建安骨，中间小谢又清发。

    俱怀逸兴壮思飞，欲上青天揽明月。

    抽刀断水水更流，举杯消愁愁更愁。

    人生在世不称意，明朝散发弄扁舟。

    fixed ​

    使用 fixed 来定位一个元素相对于浏览器窗视口的位置。偏移量是相对于视口计算的，且该元素将作为绝对定位的子元素的位置参考。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/top-right-bottom-left.html b/dev/utilities/layout/utilities/top-right-bottom-left.html index aafa9df5df..2a125eb333 100644 --- a/dev/utilities/layout/utilities/top-right-bottom-left.html +++ b/dev/utilities/layout/utilities/top-right-bottom-left.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    上下左右 ​

    定义 ​

    用于控制定位元素的位置的工具类。

    工具类属性
    inset-0top: 0px; right: 0px; bottom: 0px; left: 0px;
    inset-autotop: auto; right: auto; bottom: auto; left: auto;
    inset-x-0left: 0px; right: 0px;
    inset-y-0top: 0px; bottom: 0px;
    top-0top: 0px;
    right-0right: 0px;
    bottom-0bottom: 0px;
    left-0left: 0px;
    top-pxtop: 1px;
    right-pxright: 1px;
    bottom-pxbottom: 1px;
    left-pxleft: 1px;
    top-0.5top: 2px;
    right-0.5right: 2px;
    bottom-0.5bottom: 2px;
    left-0.5left: 2px;
    top-1top: 4px;
    right-1right: 4px;
    bottom-1bottom: 4px;
    left-1left: 4px;
    top-1.5top: 6px;
    right-1.5right: 6px;
    bottom-1.5bottom: 6px;
    left-1.5left: 6px;
    top-2top: 8px;
    right-2right: 8px;
    bottom-2bottom: 8px;
    left-2left: 8px;
    top-fulltop: 100%;
    right-fullright: 100%;
    bottom-fullbottom: 100%;
    left-fullleft: 100%;
    top-autotop: auto;
    right-autoright: auto;
    bottom-autobottom: auto;
    left-autoleft: auto;

    效果展示 ​

    1
    2
    3
    4
    5
    6
    7
    8

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    上下左右 ​

    定义 ​

    用于控制定位元素的位置的工具类。

    工具类属性
    inset-0top: 0px; right: 0px; bottom: 0px; left: 0px;
    inset-autotop: auto; right: auto; bottom: auto; left: auto;
    inset-x-0left: 0px; right: 0px;
    inset-y-0top: 0px; bottom: 0px;
    top-0top: 0px;
    right-0right: 0px;
    bottom-0bottom: 0px;
    left-0left: 0px;
    top-pxtop: 1px;
    right-pxright: 1px;
    bottom-pxbottom: 1px;
    left-pxleft: 1px;
    top-0.5top: 2px;
    right-0.5right: 2px;
    bottom-0.5bottom: 2px;
    left-0.5left: 2px;
    top-1top: 4px;
    right-1right: 4px;
    bottom-1bottom: 4px;
    left-1left: 4px;
    top-1.5top: 6px;
    right-1.5right: 6px;
    bottom-1.5bottom: 6px;
    left-1.5left: 6px;
    top-2top: 8px;
    right-2right: 8px;
    bottom-2bottom: 8px;
    left-2left: 8px;
    top-fulltop: 100%;
    right-fullright: 100%;
    bottom-fullbottom: 100%;
    left-fullleft: 100%;
    top-autotop: auto;
    right-autoright: auto;
    bottom-autobottom: auto;
    left-autoleft: auto;

    效果展示 ​

    1
    2
    3
    4
    5
    6
    7
    8

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/visibility.html b/dev/utilities/layout/utilities/visibility.html index 4c9b3f8a79..1dc3fe235b 100644 --- a/dev/utilities/layout/utilities/visibility.html +++ b/dev/utilities/layout/utilities/visibility.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    可见性 ​

    定义 ​

    用于控制元素可见性的工具类。

    工具类属性
    visiblevisibility: visible;
    invisiblevisibility: hidden;

    效果展示 ​

    可见
    不可见

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    可见性 ​

    定义 ​

    用于控制元素可见性的工具类。

    工具类属性
    visiblevisibility: visible;
    invisiblevisibility: hidden;

    效果展示 ​

    可见
    不可见

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/layout/utilities/z-index.html b/dev/utilities/layout/utilities/z-index.html index 33eb62e649..59f7c09ccd 100644 --- a/dev/utilities/layout/utilities/z-index.html +++ b/dev/utilities/layout/utilities/z-index.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    层级 ​

    定义 ​

    用于控制元素的堆叠层级的工具类。

    工具类属性
    z-0z-index: 0;
    z-10z-index: 10;
    z-20z-index: 20;
    z-30z-index: 30;
    z-40z-index: 40;
    z-50z-index: 50;
    z-autoz-index: auto;

    效果展示 ​

    z-50
    z-40
    z-30
    z-20
    z-10
    z-0
    z-auto

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    层级 ​

    定义 ​

    用于控制元素的堆叠层级的工具类。

    工具类属性
    z-0z-index: 0;
    z-10z-index: 10;
    z-20z-index: 20;
    z-30z-index: 30;
    z-40z-index: 40;
    z-50z-index: 50;
    z-autoz-index: auto;

    效果展示 ​

    z-50
    z-40
    z-30
    z-20
    z-10
    z-0
    z-auto

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/sizing/utilities/height.html b/dev/utilities/sizing/utilities/height.html index 955e3bc2b7..1e8338f44a 100644 --- a/dev/utilities/sizing/utilities/height.html +++ b/dev/utilities/sizing/utilities/height.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    高度 ​

    固定值 ​

    通过工具类 h-* 设置高度为固定值，包含如下工具类：

    工具类CSS 属性
    h-0height: 0px;
    h-pxheight: 1px;
    h-0.5height: 2px;
    h-1height: 4px;
    h-1.5height: 6px;
    h-2height: 8px;
    h-2.5height: 10px;
    h-3height: 12px;
    h-3.5height: 14px;
    h-4height: 16px;
    h-5height: 20px;
    h-6height: 24px;
    h-7height: 28px;
    h-8height: 32px;
    h-9height: 36px;
    h-10height: 40px;
    h-11height: 44px;
    h-12height: 48px;
    h-14height: 56px;
    h-16height: 64px;
    h-20height: 80px;
    h-24height: 96px;
    h-28height: 112px;
    h-32height: 128px;
    h-36height: 144px;
    h-40height: 160px;
    h-44height: 176px;
    h-48height: 192px;
    h-52height: 208px;
    h-56height: 224px;
    h-60height: 240px;
    h-64height: 256px;
    h-72height: 288px;
    h-80height: 320px;
    h-96height: 384px;

    百分比 ​

    通过工具类 h-* 设置高度为百分比，包含如下工具类：

    工具类CSS 属性
    h-1/2height: 50%;
    h-1/3height: 33.3333333%;
    h-2/3height: 66.6666667%;
    h-1/4height: 25%;
    h-2/4height: 50%;
    h-3/4height: 75%;
    h-1/5height: 20%;
    h-2/5height: 40%;
    h-3/5height: 60%;
    h-4/5height: 80%;
    h-1/6height: 16.6666667%;
    h-2/6height: 33.3333333%;
    h-3/6height: 50%;
    h-4/6height: 66.6666667%;
    h-5/6height: 83.3333333%;
    h-fullheight: 100%;

    特殊值 ​

    通过工具类 h-* 设置高度为特殊值，包含如下工具类：

    工具类CSS 属性
    h-autoheight: auto;
    h-screenheight: 100vh;
    h-fitheight: fit-content;
    h-minheight: min-content;
    h-maxheight: max-content;

    限制最大高度 ​

    通过工具类 max-h-* 设置限制元素最大高度，包含如下工具类：

    工具类CSS 属性
    max-h-0max-height: 0px;
    max-h-fullmax-height: 100%;
    max-h-screenmax-height: 100vh;
    max-h-nonemax-height: none;
    max-h-minmax-height: min-content;
    max-h-maxmax-height: max-content;
    max-h-fitmax-height: fit-content;

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/sizing/utilities/width.html b/dev/utilities/sizing/utilities/width.html index aef7db582d..325183f714 100644 --- a/dev/utilities/sizing/utilities/width.html +++ b/dev/utilities/sizing/utilities/width.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    宽度 ​

    固定值 ​

    通过工具类 w-* 设置宽度为固定值，包含如下工具类：

    工具类CSS 属性
    w-0width: 0px;
    w-pxwidth: 1px;
    w-0.5width: 2px;
    w-1width: 4px;
    w-1.5width: 6px;
    w-2width: 8px;
    w-2.5width: 10px;
    w-3width: 12px;
    w-3.5width: 14px;
    w-4width: 16px;
    w-5width: 20px;
    w-6width: 24px;
    w-7width: 28px;
    w-8width: 32px;
    w-9width: 36px;
    w-10width: 40px;
    w-11width: 44px;
    w-12width: 48px;
    w-14width: 56px;
    w-16width: 64px;
    w-20width: 80px;
    w-24width: 96px;
    w-28width: 112px;
    w-32width: 128px;
    w-36width: 144px;
    w-40width: 160px;
    w-44width: 176px;
    w-48width: 192px;
    w-52width: 208px;
    w-56width: 224px;
    w-60width: 240px;
    w-64width: 256px;
    w-72width: 288px;
    w-80width: 320px;
    w-96width: 384px;

    百分比 ​

    通过工具类 w-* 设置宽度为百分比，包含如下工具类：

    工具类CSS 属性
    w-1/2width: 50%;
    w-1/3width: 33.3333333%;
    w-2/3width: 66.6666667%;
    w-1/4width: 25%;
    w-2/4width: 50%;
    w-3/4width: 75%;
    w-1/5width: 20%;
    w-2/5width: 40%;
    w-3/5width: 60%;
    w-4/5width: 80%;
    w-1/6width: 16.6666667%;
    w-2/6width: 33.3333333%;
    w-3/6width: 50%;
    w-4/6width: 66.6666667%;
    w-5/6width: 83.3333333%;
    w-fullwidth: 100%;

    特殊值 ​

    通过工具类 w-* 设置宽度为特殊值，包含如下工具类：

    工具类CSS 属性
    w-autowidth: auto;
    w-screenwidth: 100vw;
    w-fitwidth: fit-content;
    w-minwidth: min-content;
    w-maxwidth: max-content;

    限制最大宽度 ​

    通过工具类 max-w-* 设置限制元素最大宽度，包含如下工具类：

    工具类CSS 属性
    max-w-0max-width: 0px;
    max-w-fullmax-width: 100%;
    max-w-screenmax-width: 100vw;
    max-w-nonemax-width: none;
    max-w-minmax-width: min-content;
    max-w-maxmax-width: max-content;
    max-w-fitmax-width: fit-content;

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/skin/utilities/ghost.html b/dev/utilities/skin/utilities/ghost.html index 7594596566..14eb8be2ec 100644 --- a/dev/utilities/skin/utilities/ghost.html +++ b/dev/utilities/skin/utilities/ghost.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    透明 ​

    用于快速为元素或组件实现特定文字颜色带透明背景外观。

    效果 ​

    默认
    ghost
    语义化
    primary-ghost
    secondary-ghost
    success-ghost
    warning-ghost
    danger-ghost
    important-ghost
    special-ghost

    示例 ​

    Ghost Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    透明 ​

    用于快速为元素或组件实现特定文字颜色带透明背景外观。

    效果 ​

    默认
    ghost
    语义化
    primary-ghost
    secondary-ghost
    success-ghost
    warning-ghost
    danger-ghost
    important-ghost
    special-ghost

    示例 ​

    Ghost Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/skin/utilities/outline.html b/dev/utilities/skin/utilities/outline.html index 49d9e622f0..1d2a8f60eb 100644 --- a/dev/utilities/skin/utilities/outline.html +++ b/dev/utilities/skin/utilities/outline.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    轮廓 ​

    用于快速为元素或组件实现特定颜色的轮廓描边外观。

    效果 ​

    默认
    outline
    语义化
    primary-outline
    secondary-outline
    success-outline
    warning-outline
    danger-outline
    important-outline
    special-outline
    灰度
    gray-outline

    提示

    轮廓的描边效果使用 box-shadow 实现。

    示例 ​

    Success Label
    Gray Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    轮廓 ​

    用于快速为元素或组件实现特定颜色的轮廓描边外观。

    效果 ​

    默认
    outline
    语义化
    primary-outline
    secondary-outline
    success-outline
    warning-outline
    danger-outline
    important-outline
    special-outline
    灰度
    gray-outline

    提示

    轮廓的描边效果使用 box-shadow 实现。

    示例 ​

    Success Label
    Gray Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/skin/utilities/pale.html b/dev/utilities/skin/utilities/pale.html index 1731ce8e64..56e56a50e2 100644 --- a/dev/utilities/skin/utilities/pale.html +++ b/dev/utilities/skin/utilities/pale.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    浅色 ​

    用于快速为元素或组件实现特定颜色的浅色填充外观，包含语义化和灰度工具类。

    效果 ​

    语义化
    primary-pale
    secondary-pale
    success-pale
    warning-pale
    danger-pale
    important-pale
    special-pale
    灰度
    gray-50-pale
    gray-100-pale
    gray-200-pale
    gray-300-pale
    gray-400-pale
    gray-pale
    gray-500-pale 别名: gray-pale
    gray-600-pale
    gray-700-pale
    gray-800-pale
    gray-900-pale
    gray-950-pale

    示例 ​

    Success Label
    Gray Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    浅色 ​

    用于快速为元素或组件实现特定颜色的浅色填充外观，包含语义化和灰度工具类。

    效果 ​

    语义化
    primary-pale
    secondary-pale
    success-pale
    warning-pale
    danger-pale
    important-pale
    special-pale
    灰度
    gray-50-pale
    gray-100-pale
    gray-200-pale
    gray-300-pale
    gray-400-pale
    gray-pale
    gray-500-pale 别名: gray-pale
    gray-600-pale
    gray-700-pale
    gray-800-pale
    gray-900-pale
    gray-950-pale

    示例 ​

    Success Label
    Gray Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/skin/utilities/solid.html b/dev/utilities/skin/utilities/solid.html index 6c6a6bd050..e96b0da313 100644 --- a/dev/utilities/skin/utilities/solid.html +++ b/dev/utilities/skin/utilities/solid.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    实心 ​

    用于快速为元素或组件实现特定颜色的实心填充外观，包含语义化和灰度工具类。

    效果 ​

    语义化
    primary
    secondary
    success
    warning
    danger
    important
    special
    灰度
    gray-50
    gray-100
    gray-200
    gray-300
    gray-400
    gray
    gray-500 别名: gray
    gray-600
    gray-700
    gray-800
    gray-900
    gray-950

    示例 ​

    Success Label
    Gray Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    实心 ​

    用于快速为元素或组件实现特定颜色的实心填充外观，包含语义化和灰度工具类。

    效果 ​

    语义化
    primary
    secondary
    success
    warning
    danger
    important
    special
    灰度
    gray-50
    gray-100
    gray-200
    gray-300
    gray-400
    gray
    gray-500 别名: gray
    gray-600
    gray-700
    gray-800
    gray-900
    gray-950

    示例 ​

    Success Label
    Gray Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/skin/utilities/surface.html b/dev/utilities/skin/utilities/surface.html index a88a052f14..d47f6b1433 100644 --- a/dev/utilities/skin/utilities/surface.html +++ b/dev/utilities/skin/utilities/surface.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    界面 ​

    用于快速为元素或组件实现特定功能界面颜色外观。

    效果 ​

    white
    纯白
    black
    纯黑
    transparent
    透明
    canvas
    画布
    inverse
    反色
    surface-light
    加重的控件
    surface
    控件
    surface-strong
    轻量的控件

    示例 ​

    Surface Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    界面 ​

    用于快速为元素或组件实现特定功能界面颜色外观。

    效果 ​

    white
    纯白
    black
    纯黑
    transparent
    透明
    canvas
    画布
    inverse
    反色
    surface-light
    加重的控件
    surface
    控件
    surface-strong
    轻量的控件

    示例 ​

    Surface Element

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/spacing/utilities/margin.html b/dev/utilities/spacing/utilities/margin.html index f375e13ff4..be6fb92077 100644 --- a/dev/utilities/spacing/utilities/margin.html +++ b/dev/utilities/spacing/utilities/margin.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    外边距 ​

    定义 ​

    通过 m-* 工具类设置外边距，可用的工具类包括：

    工具类CSS 属性
    m-automargin: auto;
    mx-automargin-left: auto; margin-right: auto;
    my-automargin-top: auto; margin-bottom: auto;
    mt-automargin-top: auto;
    mr-automargin-right: auto;
    mb-automargin-bottom: auto;
    ml-automargin-left: auto;
    m-0margin: 0px;
    m-pxmargin: 1px;
    m-0.5margin: 2px;
    m-1margin: 4px;
    m-1.5margin: 6px;
    m-2margin: 8px;
    m-2.5margin: 10px;
    m-3margin: 12px;
    m-3.5margin: 14px;
    m-4margin: 16px;
    m-5margin: 20px;
    m-6margin: 24px;
    m-7margin: 28px;
    m-8margin: 32px;
    m-9margin: 36px;
    m-10margin: 40px;
    mx-0margin-left: 0px; margin-right: 0px;
    my-0margin-top: 0px; margin-bottom: 0px;
    mt-0margin-top: 0px;
    mr-0margin-right: 0px;
    mb-0margin-bottom: 0px;
    ml-0margin-left: 0px;
    mx-pxmargin-left: 1px; margin-right: 1px;
    my-pxmargin-top: 1px; margin-bottom: 1px;
    mt-pxmargin-top: 1px;
    mr-pxmargin-right: 1px;
    mb-pxmargin-bottom: 1px;
    ml-pxmargin-left: 1px;
    mx-0.5margin-left: 2px; margin-right: 2px;
    my-0.5margin-top: 2px; margin-bottom: 2px;
    mt-0.5margin-top: 2px;
    mr-0.5margin-right: 2px;
    mb-0.5margin-bottom: 2px;
    ml-0.5margin-left: 2px;
    mx-1margin-left: 4px; margin-right: 4px;
    my-1margin-top: 4px; margin-bottom: 4px;
    mt-1margin-top: 4px;
    mr-1margin-right: 4px;
    mb-1margin-bottom: 4px;
    ml-1margin-left: 4px;
    mx-1.5margin-left: 6px; margin-right: 6px;
    my-1.5margin-top: 6px; margin-bottom: 6px;
    mt-1.5margin-top: 6px;
    mr-1.5margin-right: 6px;
    mb-1.5margin-bottom: 6px;
    ml-1.5margin-left: 6px;
    mx-2margin-left: 8px; margin-right: 8px;
    my-2margin-top: 8px; margin-bottom: 8px;
    mt-2margin-top: 8px;
    mr-2margin-right: 8px;
    mb-2margin-bottom: 8px;
    ml-2margin-left: 8px;
    mx-2.5margin-left: 10px; margin-right: 10px;
    my-2.5margin-top: 10px; margin-bottom: 10px;
    mt-2.5margin-top: 10px;
    mr-2.5margin-right: 10px;
    mb-2.5margin-bottom: 10px;
    ml-2.5margin-left: 10px;
    mx-3margin-left: 12px; margin-right: 12px;
    my-3margin-top: 12px; margin-bottom: 12px;
    mt-3margin-top: 12px;
    mr-3margin-right: 12px;
    mb-3margin-bottom: 12px;
    ml-3margin-left: 12px;
    mx-3.5margin-left: 14px; margin-right: 14px;
    my-3.5margin-top: 14px; margin-bottom: 14px;
    mt-3.5margin-top: 14px;
    mr-3.5margin-right: 14px;
    mb-3.5margin-bottom: 14px;
    ml-3.5margin-left: 14px;
    mx-4margin-left: 16px; margin-right: 16px;
    my-4margin-top: 16px; margin-bottom: 16px;
    mt-4margin-top: 16px;
    mr-4margin-right: 16px;
    mb-4margin-bottom: 16px;
    ml-4margin-left: 16px;
    mx-5margin-left: 20px; margin-right: 20px;
    my-5margin-top: 20px; margin-bottom: 20px;
    mt-5margin-top: 20px;
    mr-5margin-right: 20px;
    mb-5margin-bottom: 20px;
    ml-5margin-left: 20px;
    mx-6margin-left: 24px; margin-right: 24px;
    my-6margin-top: 24px; margin-bottom: 24px;
    mt-6margin-top: 24px;
    mr-6margin-right: 24px;
    mb-6margin-bottom: 24px;
    ml-6margin-left: 24px;
    mx-7margin-left: 28px; margin-right: 28px;
    my-7margin-top: 28px; margin-bottom: 28px;
    mt-7margin-top: 28px;
    mr-7margin-right: 28px;
    mb-7margin-bottom: 28px;
    ml-7margin-left: 28px;
    mx-8margin-left: 32px; margin-right: 32px;
    my-8margin-top: 32px; margin-bottom: 32px;
    mt-8margin-top: 32px;
    mr-8margin-right: 32px;
    mb-8margin-bottom: 32px;
    ml-8margin-left: 32px;
    mx-9margin-left: 36px; margin-right: 36px;
    my-9margin-top: 36px; margin-bottom: 36px;
    mt-9margin-top: 36px;
    mr-9margin-right: 36px;
    mb-9margin-bottom: 36px;
    ml-9margin-left: 36px;
    mx-10margin-left: 40px; margin-right: 40px;
    my-10margin-top: 40px; margin-bottom: 40px;
    mt-10margin-top: 40px;
    mr-10margin-right: 40px;
    mb-10margin-bottom: 40px;
    ml-10margin-left: 40px;

    示例 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    外边距 ​

    定义 ​

    通过 m-* 工具类设置外边距，可用的工具类包括：

    工具类CSS 属性
    m-automargin: auto;
    mx-automargin-left: auto; margin-right: auto;
    my-automargin-top: auto; margin-bottom: auto;
    mt-automargin-top: auto;
    mr-automargin-right: auto;
    mb-automargin-bottom: auto;
    ml-automargin-left: auto;
    m-0margin: 0px;
    m-pxmargin: 1px;
    m-0.5margin: 2px;
    m-1margin: 4px;
    m-1.5margin: 6px;
    m-2margin: 8px;
    m-2.5margin: 10px;
    m-3margin: 12px;
    m-3.5margin: 14px;
    m-4margin: 16px;
    m-5margin: 20px;
    m-6margin: 24px;
    m-7margin: 28px;
    m-8margin: 32px;
    m-9margin: 36px;
    m-10margin: 40px;
    mx-0margin-left: 0px; margin-right: 0px;
    my-0margin-top: 0px; margin-bottom: 0px;
    mt-0margin-top: 0px;
    mr-0margin-right: 0px;
    mb-0margin-bottom: 0px;
    ml-0margin-left: 0px;
    mx-pxmargin-left: 1px; margin-right: 1px;
    my-pxmargin-top: 1px; margin-bottom: 1px;
    mt-pxmargin-top: 1px;
    mr-pxmargin-right: 1px;
    mb-pxmargin-bottom: 1px;
    ml-pxmargin-left: 1px;
    mx-0.5margin-left: 2px; margin-right: 2px;
    my-0.5margin-top: 2px; margin-bottom: 2px;
    mt-0.5margin-top: 2px;
    mr-0.5margin-right: 2px;
    mb-0.5margin-bottom: 2px;
    ml-0.5margin-left: 2px;
    mx-1margin-left: 4px; margin-right: 4px;
    my-1margin-top: 4px; margin-bottom: 4px;
    mt-1margin-top: 4px;
    mr-1margin-right: 4px;
    mb-1margin-bottom: 4px;
    ml-1margin-left: 4px;
    mx-1.5margin-left: 6px; margin-right: 6px;
    my-1.5margin-top: 6px; margin-bottom: 6px;
    mt-1.5margin-top: 6px;
    mr-1.5margin-right: 6px;
    mb-1.5margin-bottom: 6px;
    ml-1.5margin-left: 6px;
    mx-2margin-left: 8px; margin-right: 8px;
    my-2margin-top: 8px; margin-bottom: 8px;
    mt-2margin-top: 8px;
    mr-2margin-right: 8px;
    mb-2margin-bottom: 8px;
    ml-2margin-left: 8px;
    mx-2.5margin-left: 10px; margin-right: 10px;
    my-2.5margin-top: 10px; margin-bottom: 10px;
    mt-2.5margin-top: 10px;
    mr-2.5margin-right: 10px;
    mb-2.5margin-bottom: 10px;
    ml-2.5margin-left: 10px;
    mx-3margin-left: 12px; margin-right: 12px;
    my-3margin-top: 12px; margin-bottom: 12px;
    mt-3margin-top: 12px;
    mr-3margin-right: 12px;
    mb-3margin-bottom: 12px;
    ml-3margin-left: 12px;
    mx-3.5margin-left: 14px; margin-right: 14px;
    my-3.5margin-top: 14px; margin-bottom: 14px;
    mt-3.5margin-top: 14px;
    mr-3.5margin-right: 14px;
    mb-3.5margin-bottom: 14px;
    ml-3.5margin-left: 14px;
    mx-4margin-left: 16px; margin-right: 16px;
    my-4margin-top: 16px; margin-bottom: 16px;
    mt-4margin-top: 16px;
    mr-4margin-right: 16px;
    mb-4margin-bottom: 16px;
    ml-4margin-left: 16px;
    mx-5margin-left: 20px; margin-right: 20px;
    my-5margin-top: 20px; margin-bottom: 20px;
    mt-5margin-top: 20px;
    mr-5margin-right: 20px;
    mb-5margin-bottom: 20px;
    ml-5margin-left: 20px;
    mx-6margin-left: 24px; margin-right: 24px;
    my-6margin-top: 24px; margin-bottom: 24px;
    mt-6margin-top: 24px;
    mr-6margin-right: 24px;
    mb-6margin-bottom: 24px;
    ml-6margin-left: 24px;
    mx-7margin-left: 28px; margin-right: 28px;
    my-7margin-top: 28px; margin-bottom: 28px;
    mt-7margin-top: 28px;
    mr-7margin-right: 28px;
    mb-7margin-bottom: 28px;
    ml-7margin-left: 28px;
    mx-8margin-left: 32px; margin-right: 32px;
    my-8margin-top: 32px; margin-bottom: 32px;
    mt-8margin-top: 32px;
    mr-8margin-right: 32px;
    mb-8margin-bottom: 32px;
    ml-8margin-left: 32px;
    mx-9margin-left: 36px; margin-right: 36px;
    my-9margin-top: 36px; margin-bottom: 36px;
    mt-9margin-top: 36px;
    mr-9margin-right: 36px;
    mb-9margin-bottom: 36px;
    ml-9margin-left: 36px;
    mx-10margin-left: 40px; margin-right: 40px;
    my-10margin-top: 40px; margin-bottom: 40px;
    mt-10margin-top: 40px;
    mr-10margin-right: 40px;
    mb-10margin-bottom: 40px;
    ml-10margin-left: 40px;

    示例 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/spacing/utilities/padding.html b/dev/utilities/spacing/utilities/padding.html index 8dc4a5a93c..a24c08b691 100644 --- a/dev/utilities/spacing/utilities/padding.html +++ b/dev/utilities/spacing/utilities/padding.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    内边距 ​

    定义 ​

    通过 p-* 工具类设置内边距，可用的工具类包括：

    工具类CSS 属性
    p-autopadding: auto;
    px-autopadding-left: auto; padding-right: auto;
    py-autopadding-top: auto; padding-bottom: auto;
    pt-autopadding-top: auto;
    pr-autopadding-right: auto;
    pb-autopadding-bottom: auto;
    pl-autopadding-left: auto;
    p-0padding: 0px;
    p-pxpadding: 1px;
    p-0.5padding: 2px;
    p-1padding: 4px;
    p-1.5padding: 6px;
    p-2padding: 8px;
    p-2.5padding: 10px;
    p-3padding: 12px;
    p-3.5padding: 14px;
    p-4padding: 16px;
    p-5padding: 20px;
    p-6padding: 24px;
    p-7padding: 28px;
    p-8padding: 32px;
    p-9padding: 36px;
    p-10padding: 40px;
    px-0padding-left: 0px; padding-right: 0px;
    py-0padding-top: 0px; padding-bottom: 0px;
    pt-0padding-top: 0px;
    pr-0padding-right: 0px;
    pb-0padding-bottom: 0px;
    pl-0padding-left: 0px;
    px-pxpadding-left: 1px; padding-right: 1px;
    py-pxpadding-top: 1px; padding-bottom: 1px;
    pt-pxpadding-top: 1px;
    pr-pxpadding-right: 1px;
    pb-pxpadding-bottom: 1px;
    pl-pxpadding-left: 1px;
    px-0.5padding-left: 2px; padding-right: 2px;
    py-0.5padding-top: 2px; padding-bottom: 2px;
    pt-0.5padding-top: 2px;
    pr-0.5padding-right: 2px;
    pb-0.5padding-bottom: 2px;
    pl-0.5padding-left: 2px;
    px-1padding-left: 4px; padding-right: 4px;
    py-1padding-top: 4px; padding-bottom: 4px;
    pt-1padding-top: 4px;
    pr-1padding-right: 4px;
    pb-1padding-bottom: 4px;
    pl-1padding-left: 4px;
    px-1.5padding-left: 6px; padding-right: 6px;
    py-1.5padding-top: 6px; padding-bottom: 6px;
    pt-1.5padding-top: 6px;
    pr-1.5padding-right: 6px;
    pb-1.5padding-bottom: 6px;
    pl-1.5padding-left: 6px;
    px-2padding-left: 8px; padding-right: 8px;
    py-2padding-top: 8px; padding-bottom: 8px;
    pt-2padding-top: 8px;
    pr-2padding-right: 8px;
    pb-2padding-bottom: 8px;
    pl-2padding-left: 8px;
    px-2.5padding-left: 10px; padding-right: 10px;
    py-2.5padding-top: 10px; padding-bottom: 10px;
    pt-2.5padding-top: 10px;
    pr-2.5padding-right: 10px;
    pb-2.5padding-bottom: 10px;
    pl-2.5padding-left: 10px;
    px-3padding-left: 12px; padding-right: 12px;
    py-3padding-top: 12px; padding-bottom: 12px;
    pt-3padding-top: 12px;
    pr-3padding-right: 12px;
    pb-3padding-bottom: 12px;
    pl-3padding-left: 12px;
    px-3.5padding-left: 14px; padding-right: 14px;
    py-3.5padding-top: 14px; padding-bottom: 14px;
    pt-3.5padding-top: 14px;
    pr-3.5padding-right: 14px;
    pb-3.5padding-bottom: 14px;
    pl-3.5padding-left: 14px;
    px-4padding-left: 16px; padding-right: 16px;
    py-4padding-top: 16px; padding-bottom: 16px;
    pt-4padding-top: 16px;
    pr-4padding-right: 16px;
    pb-4padding-bottom: 16px;
    pl-4padding-left: 16px;
    px-5padding-left: 20px; padding-right: 20px;
    py-5padding-top: 20px; padding-bottom: 20px;
    pt-5padding-top: 20px;
    pr-5padding-right: 20px;
    pb-5padding-bottom: 20px;
    pl-5padding-left: 20px;
    px-6padding-left: 24px; padding-right: 24px;
    py-6padding-top: 24px; padding-bottom: 24px;
    pt-6padding-top: 24px;
    pr-6padding-right: 24px;
    pb-6padding-bottom: 24px;
    pl-6padding-left: 24px;
    px-7padding-left: 28px; padding-right: 28px;
    py-7padding-top: 28px; padding-bottom: 28px;
    pt-7padding-top: 28px;
    pr-7padding-right: 28px;
    pb-7padding-bottom: 28px;
    pl-7padding-left: 28px;
    px-8padding-left: 32px; padding-right: 32px;
    py-8padding-top: 32px; padding-bottom: 32px;
    pt-8padding-top: 32px;
    pr-8padding-right: 32px;
    pb-8padding-bottom: 32px;
    pl-8padding-left: 32px;
    px-9padding-left: 36px; padding-right: 36px;
    py-9padding-top: 36px; padding-bottom: 36px;
    pt-9padding-top: 36px;
    pr-9padding-right: 36px;
    pb-9padding-bottom: 36px;
    pl-9padding-left: 36px;
    px-10padding-left: 40px; padding-right: 40px;
    py-10padding-top: 40px; padding-bottom: 40px;
    pt-10padding-top: 40px;
    pr-10padding-right: 40px;
    pb-10padding-bottom: 40px;
    pl-10padding-left: 40px;

    示例 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    内边距 ​

    定义 ​

    通过 p-* 工具类设置内边距，可用的工具类包括：

    工具类CSS 属性
    p-autopadding: auto;
    px-autopadding-left: auto; padding-right: auto;
    py-autopadding-top: auto; padding-bottom: auto;
    pt-autopadding-top: auto;
    pr-autopadding-right: auto;
    pb-autopadding-bottom: auto;
    pl-autopadding-left: auto;
    p-0padding: 0px;
    p-pxpadding: 1px;
    p-0.5padding: 2px;
    p-1padding: 4px;
    p-1.5padding: 6px;
    p-2padding: 8px;
    p-2.5padding: 10px;
    p-3padding: 12px;
    p-3.5padding: 14px;
    p-4padding: 16px;
    p-5padding: 20px;
    p-6padding: 24px;
    p-7padding: 28px;
    p-8padding: 32px;
    p-9padding: 36px;
    p-10padding: 40px;
    px-0padding-left: 0px; padding-right: 0px;
    py-0padding-top: 0px; padding-bottom: 0px;
    pt-0padding-top: 0px;
    pr-0padding-right: 0px;
    pb-0padding-bottom: 0px;
    pl-0padding-left: 0px;
    px-pxpadding-left: 1px; padding-right: 1px;
    py-pxpadding-top: 1px; padding-bottom: 1px;
    pt-pxpadding-top: 1px;
    pr-pxpadding-right: 1px;
    pb-pxpadding-bottom: 1px;
    pl-pxpadding-left: 1px;
    px-0.5padding-left: 2px; padding-right: 2px;
    py-0.5padding-top: 2px; padding-bottom: 2px;
    pt-0.5padding-top: 2px;
    pr-0.5padding-right: 2px;
    pb-0.5padding-bottom: 2px;
    pl-0.5padding-left: 2px;
    px-1padding-left: 4px; padding-right: 4px;
    py-1padding-top: 4px; padding-bottom: 4px;
    pt-1padding-top: 4px;
    pr-1padding-right: 4px;
    pb-1padding-bottom: 4px;
    pl-1padding-left: 4px;
    px-1.5padding-left: 6px; padding-right: 6px;
    py-1.5padding-top: 6px; padding-bottom: 6px;
    pt-1.5padding-top: 6px;
    pr-1.5padding-right: 6px;
    pb-1.5padding-bottom: 6px;
    pl-1.5padding-left: 6px;
    px-2padding-left: 8px; padding-right: 8px;
    py-2padding-top: 8px; padding-bottom: 8px;
    pt-2padding-top: 8px;
    pr-2padding-right: 8px;
    pb-2padding-bottom: 8px;
    pl-2padding-left: 8px;
    px-2.5padding-left: 10px; padding-right: 10px;
    py-2.5padding-top: 10px; padding-bottom: 10px;
    pt-2.5padding-top: 10px;
    pr-2.5padding-right: 10px;
    pb-2.5padding-bottom: 10px;
    pl-2.5padding-left: 10px;
    px-3padding-left: 12px; padding-right: 12px;
    py-3padding-top: 12px; padding-bottom: 12px;
    pt-3padding-top: 12px;
    pr-3padding-right: 12px;
    pb-3padding-bottom: 12px;
    pl-3padding-left: 12px;
    px-3.5padding-left: 14px; padding-right: 14px;
    py-3.5padding-top: 14px; padding-bottom: 14px;
    pt-3.5padding-top: 14px;
    pr-3.5padding-right: 14px;
    pb-3.5padding-bottom: 14px;
    pl-3.5padding-left: 14px;
    px-4padding-left: 16px; padding-right: 16px;
    py-4padding-top: 16px; padding-bottom: 16px;
    pt-4padding-top: 16px;
    pr-4padding-right: 16px;
    pb-4padding-bottom: 16px;
    pl-4padding-left: 16px;
    px-5padding-left: 20px; padding-right: 20px;
    py-5padding-top: 20px; padding-bottom: 20px;
    pt-5padding-top: 20px;
    pr-5padding-right: 20px;
    pb-5padding-bottom: 20px;
    pl-5padding-left: 20px;
    px-6padding-left: 24px; padding-right: 24px;
    py-6padding-top: 24px; padding-bottom: 24px;
    pt-6padding-top: 24px;
    pr-6padding-right: 24px;
    pb-6padding-bottom: 24px;
    pl-6padding-left: 24px;
    px-7padding-left: 28px; padding-right: 28px;
    py-7padding-top: 28px; padding-bottom: 28px;
    pt-7padding-top: 28px;
    pr-7padding-right: 28px;
    pb-7padding-bottom: 28px;
    pl-7padding-left: 28px;
    px-8padding-left: 32px; padding-right: 32px;
    py-8padding-top: 32px; padding-bottom: 32px;
    pt-8padding-top: 32px;
    pr-8padding-right: 32px;
    pb-8padding-bottom: 32px;
    pl-8padding-left: 32px;
    px-9padding-left: 36px; padding-right: 36px;
    py-9padding-top: 36px; padding-bottom: 36px;
    pt-9padding-top: 36px;
    pr-9padding-right: 36px;
    pb-9padding-bottom: 36px;
    pl-9padding-left: 36px;
    px-10padding-left: 40px; padding-right: 40px;
    py-10padding-top: 40px; padding-bottom: 40px;
    pt-10padding-top: 40px;
    pr-10padding-right: 40px;
    pb-10padding-bottom: 40px;
    pl-10padding-left: 40px;

    示例 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/spacing/utilities/space.html b/dev/utilities/spacing/utilities/space.html index dec0462e79..bf8e3df2a7 100644 --- a/dev/utilities/spacing/utilities/space.html +++ b/dev/utilities/spacing/utilities/space.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    子元素间距 ​

    定义 ​

    通过工具类 space-x-* 来为元素内的所有子元素之间设置水平间距；通过工具类 space-y-* 来为元素内的所有子元素之间设置水平间距，所有可用的工具类定义如下：

    工具类CSS 属性
    space-x-0 > * + *margin-left: 0px;
    space-y-0 > * + *margin-top: 0px;
    space-x-0.5 > * + *margin-left: 2px;
    space-y-0.5 > * + *margin-top: 2px;
    space-x-1 > * + *margin-left: 4px;
    space-y-1 > * + *margin-top: 4px;
    space-x-1.5 > * + *margin-left: 6px;
    space-y-1.5 > * + *margin-top: 6px;
    space-x-2 > * + *margin-left: 8px;
    space-y-2 > * + *margin-top: 8px;
    space-x-2.5 > * + *margin-left: 10px;
    space-y-2.5 > * + *margin-top: 10px;
    space-x-3 > * + *margin-left: 12px;
    space-y-3 > * + *margin-top: 12px;
    space-x-3.5 > * + *margin-left: 14px;
    space-y-3.5 > * + *margin-top: 14px;
    space-x-4 > * + *margin-left: 16px;
    space-y-4 > * + *margin-top: 16px;
    space-x-5 > * + *margin-left: 20px;
    space-y-5 > * + *margin-top: 20px;
    space-x-6 > * + *margin-left: 24px;
    space-y-6 > * + *margin-top: 24px;
    space-x-7 > * + *margin-left: 28px;
    space-y-7 > * + *margin-top: 28px;
    space-x-8 > * + *margin-left: 32px;
    space-y-8 > * + *margin-top: 32px;
    space-x-9 > * + *margin-left: 36px;
    space-y-9 > * + *margin-top: 36px;
    space-x-10 > * + *margin-left: 40px;
    space-y-10 > * + *margin-top: 40px;
    space-x-px > * + *margin-left: 1px;
    space-y-px > * + *margin-top: 1px;

    示例 ​

    水平间距 ​

    1
    2
    3

    垂直间距 ​

    1
    2
    3

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    子元素间距 ​

    定义 ​

    通过工具类 space-x-* 来为元素内的所有子元素之间设置水平间距；通过工具类 space-y-* 来为元素内的所有子元素之间设置水平间距，所有可用的工具类定义如下：

    工具类CSS 属性
    space-x-0 > * + *margin-left: 0px;
    space-y-0 > * + *margin-top: 0px;
    space-x-0.5 > * + *margin-left: 2px;
    space-y-0.5 > * + *margin-top: 2px;
    space-x-1 > * + *margin-left: 4px;
    space-y-1 > * + *margin-top: 4px;
    space-x-1.5 > * + *margin-left: 6px;
    space-y-1.5 > * + *margin-top: 6px;
    space-x-2 > * + *margin-left: 8px;
    space-y-2 > * + *margin-top: 8px;
    space-x-2.5 > * + *margin-left: 10px;
    space-y-2.5 > * + *margin-top: 10px;
    space-x-3 > * + *margin-left: 12px;
    space-y-3 > * + *margin-top: 12px;
    space-x-3.5 > * + *margin-left: 14px;
    space-y-3.5 > * + *margin-top: 14px;
    space-x-4 > * + *margin-left: 16px;
    space-y-4 > * + *margin-top: 16px;
    space-x-5 > * + *margin-left: 20px;
    space-y-5 > * + *margin-top: 20px;
    space-x-6 > * + *margin-left: 24px;
    space-y-6 > * + *margin-top: 24px;
    space-x-7 > * + *margin-left: 28px;
    space-y-7 > * + *margin-top: 28px;
    space-x-8 > * + *margin-left: 32px;
    space-y-8 > * + *margin-top: 32px;
    space-x-9 > * + *margin-left: 36px;
    space-y-9 > * + *margin-top: 36px;
    space-x-10 > * + *margin-left: 40px;
    space-y-10 > * + *margin-top: 40px;
    space-x-px > * + *margin-left: 1px;
    space-y-px > * + *margin-top: 1px;

    示例 ​

    水平间距 ​

    1
    2
    3

    垂直间距 ​

    1
    2
    3

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/font-family.html b/dev/utilities/typography/utilities/font-family.html index c3bb9fc7fa..341a907236 100644 --- a/dev/utilities/typography/utilities/font-family.html +++ b/dev/utilities/typography/utilities/font-family.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    字体风格 ​

    定义 ​

    在 ZUI 中提供了一些 CSS 工具类方便为元素设置不同风格的字体，包括：

    工具类CSS 属性
    font-sansfont-family
    font-seriffont-family
    font-monofont-family

    无衬线字体 font-sans ​

    The quick brown fox jumps over the lazy dog.

    白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    衬线字体 font-serif ​

    The quick brown fox jumps over the lazy dog.

    白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    等宽字体 font-mono ​

    The quick brown fox jumps over the lazy dog.

    白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    参考 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    字体风格 ​

    定义 ​

    在 ZUI 中提供了一些 CSS 工具类方便为元素设置不同风格的字体，包括：

    工具类CSS 属性
    font-sansfont-family
    font-seriffont-family
    font-monofont-family

    无衬线字体 font-sans ​

    The quick brown fox jumps over the lazy dog.

    白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    衬线字体 font-serif ​

    The quick brown fox jumps over the lazy dog.

    白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    等宽字体 font-mono ​

    The quick brown fox jumps over the lazy dog.

    白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    参考 ​

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/font-size.html b/dev/utilities/typography/utilities/font-size.html index e866586f4c..c2ad48da2a 100644 --- a/dev/utilities/typography/utilities/font-size.html +++ b/dev/utilities/typography/utilities/font-size.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    字体大小 ​

    定义 ​

    使用 text-* 工具类控制元素的字体大小。

    工具类CSS 属性
    text-rootfont-size
    text-smfont-size
    text-basefont-size
    text-mdfont-size
    text-lgfont-size
    text-xlfont-size
    text-2xlfont-size
    text-3xlfont-size
    text-4xlfont-size

    示例 ​

    text-root 字体大小
    text-xs 字体大小
    text-sm 字体大小
    text-base 字体大小
    text-md 字体大小
    text-lg 字体大小
    text-xl 字体大小
    text-2xl 字体大小
    text-3xl 字体大小
    text-4xl 字体大小

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    字体大小 ​

    定义 ​

    使用 text-* 工具类控制元素的字体大小。

    工具类CSS 属性
    text-rootfont-size
    text-smfont-size
    text-basefont-size
    text-mdfont-size
    text-lgfont-size
    text-xlfont-size
    text-2xlfont-size
    text-3xlfont-size
    text-4xlfont-size

    示例 ​

    text-root 字体大小
    text-xs 字体大小
    text-sm 字体大小
    text-base 字体大小
    text-md 字体大小
    text-lg 字体大小
    text-xl 字体大小
    text-2xl 字体大小
    text-3xl 字体大小
    text-4xl 字体大小

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/font-weight.html b/dev/utilities/typography/utilities/font-weight.html index 97d8d7e639..a6bd30b6ab 100644 --- a/dev/utilities/typography/utilities/font-weight.html +++ b/dev/utilities/typography/utilities/font-weight.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    字体粗细 ​

    定义 ​

    使用 font-* 工具类来控制元素字体粗细。

    工具类CSS 属性
    font-thinfont-weight
    font-lightfont-weight
    font-mediumfont-weight
    font-semiboldfont-weight
    font-boldfont-weight
    font-blackfont-weight

    示例 ​

    font-thin 字体粗细
    font-light 字体粗细
    font-medium 字体粗细
    font-semibold 字体粗细
    font-bold 字体粗细
    font-black 字体粗细

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    字体粗细 ​

    定义 ​

    使用 font-* 工具类来控制元素字体粗细。

    工具类CSS 属性
    font-thinfont-weight
    font-lightfont-weight
    font-mediumfont-weight
    font-semiboldfont-weight
    font-boldfont-weight
    font-blackfont-weight

    示例 ​

    font-thin 字体粗细
    font-light 字体粗细
    font-medium 字体粗细
    font-semibold 字体粗细
    font-bold 字体粗细
    font-black 字体粗细

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/leading.html b/dev/utilities/typography/utilities/leading.html index 942db1e5e2..f29b6c7fb9 100644 --- a/dev/utilities/typography/utilities/leading.html +++ b/dev/utilities/typography/utilities/leading.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    行高 ​

    定义 ​

    使用 leading-* 工具类来控制元素文字行高。

    工具类CSS 属性
    leading-3line-height: .75rem;
    leading-4line-height: 1rem;
    leading-5line-height: 1.25rem;
    leading-6line-height: 1.5rem;
    leading-7line-height: 1.75rem;
    leading-8line-height: 2rem;
    leading-9line-height: 2.25rem;
    leading-10line-height: 2.5rem;
    leading-noneline-height: 1;
    leading-tightline-height: 1.25;
    leading-snugline-height: 1.375;
    leading-normalline-height: 1.5;
    leading-relaxedline-height: 1.625;
    leading-looseline-height: 2;

    固定行高 ​

    使用 leading-* 工具类给一个元素一个固定的行高。

    leading-3 行高展示
    leading-4 行高展示
    leading-5 行高展示
    leading-6 行高展示
    leading-7 行高展示
    leading-8 行高展示
    leading-9 行高展示
    leading-10 行高展示

    相对行高 ​

    使用 leading-none、 leading-tight、 leading-snug、 leading-normal、 leading-relaxed 和 leading-loose 等工具类，根据元素当前的字体大小，给它一个相对的行高。

    leading-none 行高展示
    leading-none 行高展示
    leading-none 行高展示
    leading-tight 行高展示
    leading-tight 行高展示
    leading-tight 行高展示
    leading-snug 行高展示
    leading-snug 行高展示
    leading-snug 行高展示
    leading-normal 行高展示
    leading-normal 行高展示
    leading-normal 行高展示
    leading-relaxed 行高展示
    leading-relaxed 行高展示
    leading-relaxed 行高展示
    leading-loose 行高展示
    leading-loose 行高展示
    leading-loose 行高展示

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    行高 ​

    定义 ​

    使用 leading-* 工具类来控制元素文字行高。

    工具类CSS 属性
    leading-3line-height: .75rem;
    leading-4line-height: 1rem;
    leading-5line-height: 1.25rem;
    leading-6line-height: 1.5rem;
    leading-7line-height: 1.75rem;
    leading-8line-height: 2rem;
    leading-9line-height: 2.25rem;
    leading-10line-height: 2.5rem;
    leading-noneline-height: 1;
    leading-tightline-height: 1.25;
    leading-snugline-height: 1.375;
    leading-normalline-height: 1.5;
    leading-relaxedline-height: 1.625;
    leading-looseline-height: 2;

    固定行高 ​

    使用 leading-* 工具类给一个元素一个固定的行高。

    leading-3 行高展示
    leading-4 行高展示
    leading-5 行高展示
    leading-6 行高展示
    leading-7 行高展示
    leading-8 行高展示
    leading-9 行高展示
    leading-10 行高展示

    相对行高 ​

    使用 leading-none、 leading-tight、 leading-snug、 leading-normal、 leading-relaxed 和 leading-loose 等工具类，根据元素当前的字体大小，给它一个相对的行高。

    leading-none 行高展示
    leading-none 行高展示
    leading-none 行高展示
    leading-tight 行高展示
    leading-tight 行高展示
    leading-tight 行高展示
    leading-snug 行高展示
    leading-snug 行高展示
    leading-snug 行高展示
    leading-normal 行高展示
    leading-normal 行高展示
    leading-normal 行高展示
    leading-relaxed 行高展示
    leading-relaxed 行高展示
    leading-relaxed 行高展示
    leading-loose 行高展示
    leading-loose 行高展示
    leading-loose 行高展示

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/line-clamp.html b/dev/utilities/typography/utilities/line-clamp.html index a9339e956b..65262ddd34 100644 --- a/dev/utilities/typography/utilities/line-clamp.html +++ b/dev/utilities/typography/utilities/line-clamp.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    行数限制 ​

    定义 ​

    使用 line-clamp-* 工具类限制显示多少行文本，在文本超出时进行截断：

    工具类属性
    line-clamp-1overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
    line-clamp-2overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp-3overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    line-clamp-4overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    line-clamp-5overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
    line-clamp-6overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;

    示例 ​

    至多显示 clamp-1 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-2 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-3 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-4 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-5 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-6 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    行数限制 ​

    定义 ​

    使用 line-clamp-* 工具类限制显示多少行文本，在文本超出时进行截断：

    工具类属性
    line-clamp-1overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
    line-clamp-2overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp-3overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    line-clamp-4overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    line-clamp-5overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
    line-clamp-6overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;

    示例 ​

    至多显示 clamp-1 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-2 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-3 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-4 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-5 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    至多显示 clamp-6 行

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/list-style.html b/dev/utilities/typography/utilities/list-style.html index eed78a497b..c14b0bcce3 100644 --- a/dev/utilities/typography/utilities/list-style.html +++ b/dev/utilities/typography/utilities/list-style.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    列表样式 ​

    定义 ​

    使用工具类 list-* 为元素（通常是 <ul> 或 <ol>）设置 CSS 属性 list-style。

    工具类属性
    list-unstyledlist-style-type: none; padding-left: 0;
    list-nonelist-style-type: none;
    list-disclist-style-type: disc;
    list-decimallist-style-type: decimal;

    示例 ​

    无样式 list-unstyled ​

    • 这是一个列表
    • 含四个列表项
    • 作为示例
    • 最后一个列表有嵌套的子列表
      • 子列表项 1
      • 子列表项 2
      • 子列表项 3

    空白样式 list-none ​

    • 这是一个列表
    • 含四个列表项
    • 作为示例
    • 最后一个列表有嵌套的子列表
      • 子列表项 1
      • 子列表项 2
      • 子列表项 3

    圆点样式 list-disc ​

    • 这是一个列表
    • 含四个列表项
    • 作为示例
    • 最后一个列表有嵌套的子列表
      • 子列表项 1
      • 子列表项 2
      • 子列表项 3

    序号样式 list-decimal ​

    • 这是一个列表
    • 含四个列表项
    • 作为示例
    • 最后一个列表有嵌套的子列表
      • 子列表项 1
      • 子列表项 2
      • 子列表项 3

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    列表样式 ​

    定义 ​

    使用工具类 list-* 为元素（通常是 <ul> 或 <ol>）设置 CSS 属性 list-style。

    工具类属性
    list-unstyledlist-style-type: none; padding-left: 0;
    list-nonelist-style-type: none;
    list-disclist-style-type: disc;
    list-decimallist-style-type: decimal;

    示例 ​

    无样式 list-unstyled ​

    • 这是一个列表
    • 含四个列表项
    • 作为示例
    • 最后一个列表有嵌套的子列表
      • 子列表项 1
      • 子列表项 2
      • 子列表项 3

    空白样式 list-none ​

    • 这是一个列表
    • 含四个列表项
    • 作为示例
    • 最后一个列表有嵌套的子列表
      • 子列表项 1
      • 子列表项 2
      • 子列表项 3

    圆点样式 list-disc ​

    • 这是一个列表
    • 含四个列表项
    • 作为示例
    • 最后一个列表有嵌套的子列表
      • 子列表项 1
      • 子列表项 2
      • 子列表项 3

    序号样式 list-decimal ​

    • 这是一个列表
    • 含四个列表项
    • 作为示例
    • 最后一个列表有嵌套的子列表
      • 子列表项 1
      • 子列表项 2
      • 子列表项 3

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/text-align.html b/dev/utilities/typography/utilities/text-align.html index f1ac784000..30e7ebf6df 100644 --- a/dev/utilities/typography/utilities/text-align.html +++ b/dev/utilities/typography/utilities/text-align.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    文本对齐 ​

    定义 ​

    使用 text-* 工具类来控制元素的文本对齐方式。

    工具类属性
    text-lefttext-align: left;
    text-centertext-align: center;
    text-righttext-align: right;
    text-justifytext-align: justify;

    示例 ​

    文本左对齐

    文本居中对齐

    文本右对齐

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    文本对齐 ​

    定义 ​

    使用 text-* 工具类来控制元素的文本对齐方式。

    工具类属性
    text-lefttext-align: left;
    text-centertext-align: center;
    text-righttext-align: right;
    text-justifytext-align: justify;

    示例 ​

    文本左对齐

    文本居中对齐

    文本右对齐

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/text-color.html b/dev/utilities/typography/utilities/text-color.html index 5f9548d5b2..36f3e189ad 100644 --- a/dev/utilities/typography/utilities/text-color.html +++ b/dev/utilities/typography/utilities/text-color.html @@ -14,14 +14,14 @@ - - + +
    ZUI 3

    Appearance

    文本颜色 ​

    效果 ​

    使用工具类 text-* 给元素添加文本颜色。

    语义化
    Text 文本
    text-primary
    Text 文本
    text-secondary
    Text 文本
    text-success
    Text 文本
    text-warning
    Text 文本
    text-danger
    Text 文本
    text-important
    Text 文本
    text-special
    主色系列
    Text 文本
    text-primary-50
    Text 文本
    text-primary-100
    Text 文本
    text-primary-200
    Text 文本
    text-primary-300
    Text 文本
    text-primary-400
    Text 文本
    text-primary-500
    Text 文本
    text-primary-600
    Text 文本
    text-primary-700
    Text 文本
    text-primary-800
    Text 文本
    text-primary-900
    Text 文本
    text-primary-950
    次要系列
    Text 文本
    text-secondary-50
    Text 文本
    text-secondary-100
    Text 文本
    text-secondary-200
    Text 文本
    text-secondary-300
    Text 文本
    text-secondary-400
    Text 文本
    text-secondary-500
    Text 文本
    text-secondary-600
    Text 文本
    text-secondary-700
    Text 文本
    text-secondary-800
    Text 文本
    text-secondary-900
    Text 文本
    text-secondary-950
    灰度
    Text 文本
    text-gray-50
    Text 文本
    text-gray-100
    Text 文本
    text-gray-200
    Text 文本
    text-gray-300
    Text 文本
    text-gray-400
    Text 文本
    gray
    text-gray-500 别名: text-gray
    Text 文本
    text-gray-600
    Text 文本
    text-gray-700
    Text 文本
    text-gray-800
    Text 文本
    text-gray-900
    Text 文本
    text-gray-950
    界面
    Text 文本
    text-white
    纯白
    Text 文本
    text-black
    纯黑
    Text 文本
    text-transparent
    透明
    Text 文本
    text-canvas
    画布
    Text 文本
    text-inverse
    反色
    Text 文本
    text-surface-light
    加重的控件
    Text 文本
    text-surface
    控件
    Text 文本
    text-surface-strong
    轻量的控件
    Text 文本
    text-fore
    前景色作为背景
    Text 文本
    text-focus
    焦点色作为背景
    特殊
    Text 文本
    text-current
    CSS 值 currentColor
    Text 文本
    text-inherit
    CSS 值 inherit

    文本颜色透明度 ​

    使用工具类 text-opacity-* 给元素设置文本颜色透明度。

    Text 文本
    text-opacity-0
    透明度：0%
    Text 文本
    text-opacity-5
    透明度：5%
    Text 文本
    text-opacity-10
    透明度：10%
    Text 文本
    text-opacity-20
    透明度：20%
    Text 文本
    text-opacity-25
    透明度：25%
    Text 文本
    text-opacity-30
    透明度：30%
    Text 文本
    text-opacity-40
    透明度：40%
    Text 文本
    text-opacity-50
    透明度：60%
    Text 文本
    text-opacity-60
    透明度：60%
    Text 文本
    text-opacity-70
    透明度：70%
    Text 文本
    text-opacity-75
    透明度：75%
    Text 文本
    text-opacity-80
    透明度：80%
    Text 文本
    text-opacity-90
    透明度：90%
    Text 文本
    text-opacity-95
    透明度：95%
    Text 文本
    text-opacity-100
    透明度：0%

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/text-decoration.html b/dev/utilities/typography/utilities/text-decoration.html index 767d0444d3..9ceb4ad57f 100644 --- a/dev/utilities/typography/utilities/text-decoration.html +++ b/dev/utilities/typography/utilities/text-decoration.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    文本装饰 ​

    定义 ​

    在 ZUI 中，你可以通过如下工具类来设置文本装饰样式：

    工具类属性
    underlinetext-decoration-line: underline;
    overlinetext-decoration-line: overline;
    line-throughtext-decoration-line: line-through;
    no-underlinetext-decoration-line: none;

    示例 ​

    下划线 underline ​

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。

    上划线 overline ​

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。

    中间划线 line-through ​

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。

    无划线 no-underline ​

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    文本装饰 ​

    定义 ​

    在 ZUI 中，你可以通过如下工具类来设置文本装饰样式：

    工具类属性
    underlinetext-decoration-line: underline;
    overlinetext-decoration-line: overline;
    line-throughtext-decoration-line: line-through;
    no-underlinetext-decoration-line: none;

    示例 ​

    下划线 underline ​

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。

    上划线 overline ​

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。

    中间划线 line-through ​

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。

    无划线 no-underline ​

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/text-overflow.html b/dev/utilities/typography/utilities/text-overflow.html index 1005f3dd98..ba870c6783 100644 --- a/dev/utilities/typography/utilities/text-overflow.html +++ b/dev/utilities/typography/utilities/text-overflow.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    文本溢出 ​

    定义 ​

    文字溢出包括两种方式，分布为省略和裁剪，在 ZUI 中可以通过如下工具类实现：

    工具类属性
    text-ellipsisoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-clipoverflow: hidden; text-overflow: clip; white-space: nowrap;

    文字省略 text-ellipsis ​

    使用 text-ellipsis 用省略号（…）来截断溢出的文本。

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    文字裁剪 text-clip ​

    使用 text-clip 在内容区域的极限处截断文本。

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    文本溢出 ​

    定义 ​

    文字溢出包括两种方式，分布为省略和裁剪，在 ZUI 中可以通过如下工具类实现：

    工具类属性
    text-ellipsisoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-clipoverflow: hidden; text-overflow: clip; white-space: nowrap;

    文字省略 text-ellipsis ​

    使用 text-ellipsis 用省略号（…）来截断溢出的文本。

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    文字裁剪 text-clip ​

    使用 text-clip 在内容区域的极限处截断文本。

    The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。The quick brown fox jumps over the lazy dog.白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/text-transform.html b/dev/utilities/typography/utilities/text-transform.html index 4741d42dc2..eebff43345 100644 --- a/dev/utilities/typography/utilities/text-transform.html +++ b/dev/utilities/typography/utilities/text-transform.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    文本大小写 ​

    定义 ​

    在 ZUI 中，你可以通过如下工具类来设置文本大小写显示规则：

    工具类属性
    uppercasetext-transform: uppercase;
    lowercasetext-transform: lowercase;
    capitalizetext-transform: capitalize;
    normal-casetext-transform: none;

    示例 ​

    显示为大写 uppercase ​

    The quick brown fox jumps over the lazy dog.

    显示为小写 lowercase ​

    The quick brown fox jumps over the lazy dog.

    显示为单词首字母大写 capitalize ​

    The quick brown fox jumps over the lazy dog.

    默认大小写 normal-case ​

    The quick brown fox jumps over the lazy dog.

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    文本大小写 ​

    定义 ​

    在 ZUI 中，你可以通过如下工具类来设置文本大小写显示规则：

    工具类属性
    uppercasetext-transform: uppercase;
    lowercasetext-transform: lowercase;
    capitalizetext-transform: capitalize;
    normal-casetext-transform: none;

    示例 ​

    显示为大写 uppercase ​

    The quick brown fox jumps over the lazy dog.

    显示为小写 lowercase ​

    The quick brown fox jumps over the lazy dog.

    显示为单词首字母大写 capitalize ​

    The quick brown fox jumps over the lazy dog.

    默认大小写 normal-case ​

    The quick brown fox jumps over the lazy dog.

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/vertical-align.html b/dev/utilities/typography/utilities/vertical-align.html index 84f2609566..47140eec93 100644 --- a/dev/utilities/typography/utilities/vertical-align.html +++ b/dev/utilities/typography/utilities/vertical-align.html @@ -14,14 +14,14 @@ - - + + -
    ZUI 3

    Appearance

    垂直对齐 ​

    定义 ​

    用于控制内联或表格单元格的垂直对齐的工具类。

    工具类属性
    align-middlevertical-align: middle;
    align-topvertical-align: top;
    align-bottomvertical-align: bottom;
    align-subvertical-align: sub;
    align-supervertical-align: super;

    示例 ​

    参照文本中部对齐

    参照文本顶端对齐

    参照文本底部对齐

    参照文本文本下标对齐

    参照文本文本上标对齐

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - +
    ZUI 3

    Appearance

    垂直对齐 ​

    定义 ​

    用于控制内联或表格单元格的垂直对齐的工具类。

    工具类属性
    align-middlevertical-align: middle;
    align-topvertical-align: top;
    align-bottomvertical-align: bottom;
    align-subvertical-align: sub;
    align-supervertical-align: super;

    示例 ​

    参照文本中部对齐

    参照文本顶端对齐

    参照文本底部对齐

    参照文本文本下标对齐

    参照文本文本上标对齐

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/whitespace.html b/dev/utilities/typography/utilities/whitespace.html index dacd6af101..b2a1d4ccfe 100644 --- a/dev/utilities/typography/utilities/whitespace.html +++ b/dev/utilities/typography/utilities/whitespace.html @@ -14,22 +14,22 @@ - - + + -
    ZUI 3

    Appearance

    空白处理 ​

    定义 ​

    用于控制元素的空格属性的工具类。

    工具类属性
    whitespace-nowrapwhite-space: nowrap;
    whitespace-prewhite-space: pre;
    whitespace-pre-linewhite-space: pre-line;
    whitespace-pre-wrapwhite-space: pre-wrap;

    示例 ​

    不保留空格不自动换行 ​

    使用 whitespace-nowrap 来防止文本在元素中被包裹。换行和空格将被折叠。

    The quick brown fox jumps over the lazy dog. +
    ZUI 3

    Appearance

    空白处理 ​

    定义 ​

    用于控制元素的空格属性的工具类。

    工具类属性
    whitespace-nowrapwhite-space: nowrap;
    whitespace-prewhite-space: pre;
    whitespace-pre-linewhite-space: pre-line;
    whitespace-pre-wrapwhite-space: pre-wrap;

    示例 ​

    不保留空格不自动换行 ​

    使用 whitespace-nowrap 来防止文本在元素中被包裹。换行和空格将被折叠。

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。 - 欲穷千里目，更上一层楼。

    保留空格不自动换行 ​

    使用 pre 来保留元素中的换行和空格。文本不会被包装。

    The quick brown fox jumps over the lazy dog. + 欲穷千里目，更上一层楼。

    保留空格不自动换行 ​

    使用 pre 来保留元素中的换行和空格。文本不会被包装。

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。 - 欲穷千里目，更上一层楼。

    不保留空格自动换行 ​

    使用 whitespace-pre-line 保留换行，但不保留元素中的空格。文本将被正常包装。

    The quick brown fox jumps over the lazy dog. + 欲穷千里目，更上一层楼。

    不保留空格自动换行 ​

    使用 whitespace-pre-line 保留换行，但不保留元素中的空格。文本将被正常包装。

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。 - 欲穷千里目，更上一层楼。

    保留空格自动换行 ​

    使用 whitespace-pre-wrap 来保留元素中的换行和空格。文本将被正常包装。

    The quick brown fox jumps over the lazy dog. + 欲穷千里目，更上一层楼。

    保留空格自动换行 ​

    使用 whitespace-pre-wrap 来保留元素中的换行和空格。文本将被正常包装。

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。 欲穷千里目，更上一层楼。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/utilities/typography/utilities/word-break.html b/dev/utilities/typography/utilities/word-break.html index 6962077d55..a646916a68 100644 --- a/dev/utilities/typography/utilities/word-break.html +++ b/dev/utilities/typography/utilities/word-break.html @@ -14,20 +14,20 @@ - - + + -
    ZUI 3

    Appearance

    文本换行 ​

    定义 ​

    用于控制元素中的换行符的工具类。

    工具类属性
    break-normaloverflow-wrap: normal;word-break: normal;
    break-wordsoverflow-wrap: break-word;
    break-allword-break: break-all;

    示例 ​

    字内换行 ​

    使用 break-normal 只在正常的换行点添加换行符。

    The quick brown fox jumps over the lazy dog. +
    ZUI 3

    Appearance

    文本换行 ​

    定义 ​

    用于控制元素中的换行符的工具类。

    工具类属性
    break-normaloverflow-wrap: normal;word-break: normal;
    break-wordsoverflow-wrap: break-word;
    break-allword-break: break-all;

    示例 ​

    字内换行 ​

    使用 break-normal 只在正常的换行点添加换行符。

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。 - 欲穷千里目，更上一层楼。

    单词内换行 ​

    使用 break-words 在词中间添加换行符。

    The quick brown fox jumps over the lazy dog. + 欲穷千里目，更上一层楼。

    单词内换行 ​

    使用 break-words 在词中间添加换行符。

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。 - 欲穷千里目，更上一层楼。

    任意字内断开 ​

    使用 break-all 在必要的时候添加换行符，而不是试图保留整个单词。

    The quick brown fox jumps over the lazy dog. + 欲穷千里目，更上一层楼。

    任意字内断开 ​

    使用 break-all 在必要的时候添加换行符，而不是试图保留整个单词。

    The quick brown fox jumps over the lazy dog. 白日依山尽，黄河入海流。 欲穷千里目，更上一层楼。

    MIT License (MIT)

    Copyright (C) 2023 cnezsoft.com

    - + \ No newline at end of file diff --git a/dev/zui-3.0.0-alpha.4.zip b/dev/zui-3.0.0-alpha.4.zip index eb899e6040..1086b7dffd 100644 Binary files a/dev/zui-3.0.0-alpha.4.zip and b/dev/zui-3.0.0-alpha.4.zip differ diff --git a/dev/zui/zui.css b/dev/zui/zui.css index 3a78185abb..0f499e9277 100644 --- a/dev/zui/zui.css +++ b/dev/zui/zui.css @@ -1,2 +1,2 @@ -/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{border-color:rgb(var(--color-gray-200-rgb));border-style:solid;border-width:0;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:-apple-system,Noto Sans,Helvetica Neue,Helvetica,Nimbus Sans L,Arial,Liberation Sans,PingFang SC,Hiragino Sans GB,Noto Sans CJK SC,Source Han Sans SC,Source Han Sans CN,Microsoft YaHei,Wenquanyi Micro Hei,WenQuanYi Zen Hei,ST Heiti,SimHei,WenQuanYi Zen Hei Sharp,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:rgb(var(--color-gray-400-rgb));opacity:1}input::placeholder,textarea::placeholder{color:rgb(var(--color-gray-400-rgb));opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}:root{--screen-sm:640px;--screen-md:768px;--screen-lg:1024px;--screen-xl:1280px;--screen-2xl:1536px;--color-gray-50:#f8fafc;--color-gray-100:#f1f5f9;--color-gray-200:#e2e8f0;--color-gray-300:#cbd5e1;--color-gray-400:#94a3b8;--color-gray-500:#64748b;--color-gray-600:#475569;--color-gray-700:#334155;--color-gray-800:#1e293b;--color-gray-900:#0f172a;--color-gray-950:#020617;--color-gray-50-rgb:248,250,252;--color-gray-100-rgb:241,245,249;--color-gray-200-rgb:226,232,240;--color-gray-300-rgb:203,213,225;--color-gray-400-rgb:148,163,184;--color-gray-500-rgb:100,116,139;--color-gray-600-rgb:71,85,105;--color-gray-700-rgb:51,65,85;--color-gray-800-rgb:30,41,59;--color-gray-900-rgb:15,23,42;--color-gray-950-rgb:2,6,23;--color-primary-50:#eff6ff;--color-primary-100:#dbeafe;--color-primary-200:#bfdbfe;--color-primary-300:#93c5fd;--color-primary-400:#60a5fa;--color-primary-500:#3b82f6;--color-primary-600:#2563eb;--color-primary-700:#1d4ed8;--color-primary-800:#1e40af;--color-primary-900:#1e3a8a;--color-primary-950:#172554;--color-primary-50-rgb:239,246,255;--color-primary-100-rgb:219,234,254;--color-primary-200-rgb:191,219,254;--color-primary-300-rgb:147,197,253;--color-primary-400-rgb:96,165,250;--color-primary-500-rgb:59,130,246;--color-primary-600-rgb:37,99,235;--color-primary-700-rgb:29,78,216;--color-primary-800-rgb:30,64,175;--color-primary-900-rgb:30,58,138;--color-primary-950-rgb:23,37,84;--color-secondary-50:#f0f9ff;--color-secondary-100:#e0f2fe;--color-secondary-200:#bae6fd;--color-secondary-300:#7dd3fc;--color-secondary-400:#38bdf8;--color-secondary-500:#0ea5e9;--color-secondary-600:#0284c7;--color-secondary-700:#0369a1;--color-secondary-800:#075985;--color-secondary-900:#0c4a6e;--color-secondary-950:#082f49;--color-secondary-50-rgb:240,249,255;--color-secondary-100-rgb:224,242,254;--color-secondary-200-rgb:186,230,253;--color-secondary-300-rgb:125,211,252;--color-secondary-400-rgb:56,189,248;--color-secondary-500-rgb:14,165,233;--color-secondary-600-rgb:2,132,199;--color-secondary-700-rgb:3,105,161;--color-secondary-800-rgb:7,89,133;--color-secondary-900-rgb:12,74,110;--color-secondary-950-rgb:8,47,73;--color-success-50:#f0fdf4;--color-success-100:#dcfce7;--color-success-200:#bbf7d0;--color-success-300:#86efac;--color-success-400:#4ade80;--color-success-500:#22c55e;--color-success-600:#16a34a;--color-success-700:#15803d;--color-success-800:#166534;--color-success-900:#14532d;--color-success-950:#052e16;--color-success-50-rgb:240,253,244;--color-success-100-rgb:220,252,231;--color-success-200-rgb:187,247,208;--color-success-300-rgb:134,239,172;--color-success-400-rgb:74,222,128;--color-success-500-rgb:34,197,94;--color-success-600-rgb:22,163,74;--color-success-700-rgb:21,128,61;--color-success-800-rgb:22,101,52;--color-success-900-rgb:20,83,45;--color-success-950-rgb:5,46,22;--color-warning-50:#fffbeb;--color-warning-100:#fef3c7;--color-warning-200:#fde68a;--color-warning-300:#fcd34d;--color-warning-400:#fbbf24;--color-warning-500:#f59e0b;--color-warning-600:#d97706;--color-warning-700:#b45309;--color-warning-800:#92400e;--color-warning-900:#78350f;--color-warning-950:#451a03;--color-warning-50-rgb:255,251,235;--color-warning-100-rgb:254,243,199;--color-warning-200-rgb:253,230,138;--color-warning-300-rgb:252,211,77;--color-warning-400-rgb:251,191,36;--color-warning-500-rgb:245,158,11;--color-warning-600-rgb:217,119,6;--color-warning-700-rgb:180,83,9;--color-warning-800-rgb:146,64,14;--color-warning-900-rgb:120,53,15;--color-warning-950-rgb:69,26,3;--color-danger-50:#fef2f2;--color-danger-100:#fee2e2;--color-danger-200:#fecaca;--color-danger-300:#fca5a5;--color-danger-400:#f87171;--color-danger-500:#ef4444;--color-danger-600:#dc2626;--color-danger-700:#b91c1c;--color-danger-800:#991b1b;--color-danger-900:#7f1d1d;--color-danger-950:#450a0a;--color-danger-50-rgb:254,242,242;--color-danger-100-rgb:254,226,226;--color-danger-200-rgb:254,202,202;--color-danger-300-rgb:252,165,165;--color-danger-400-rgb:248,113,113;--color-danger-500-rgb:239,68,68;--color-danger-600-rgb:220,38,38;--color-danger-700-rgb:185,28,28;--color-danger-800-rgb:153,27,27;--color-danger-900-rgb:127,29,29;--color-danger-950-rgb:69,10,10;--color-important-50:#fdf2f8;--color-important-100:#fce7f3;--color-important-200:#fbcfe8;--color-important-300:#f9a8d4;--color-important-400:#f472b6;--color-important-500:#ec4899;--color-important-600:#db2777;--color-important-700:#be185d;--color-important-800:#9d174d;--color-important-900:#831843;--color-important-950:#500724;--color-important-50-rgb:253,242,248;--color-important-100-rgb:252,231,243;--color-important-200-rgb:251,207,232;--color-important-300-rgb:249,168,212;--color-important-400-rgb:244,114,182;--color-important-500-rgb:236,72,153;--color-important-600-rgb:219,39,119;--color-important-700-rgb:190,24,93;--color-important-800-rgb:157,23,77;--color-important-900-rgb:131,24,67;--color-important-950-rgb:80,7,36;--color-special-50:#faf5ff;--color-special-100:#f3e8ff;--color-special-200:#e9d5ff;--color-special-300:#d8b4fe;--color-special-400:#c084fc;--color-special-500:#a855f7;--color-special-600:#9333ea;--color-special-700:#7e22ce;--color-special-800:#6b21a8;--color-special-900:#581c87;--color-special-950:#3b0764;--color-special-50-rgb:250,245,255;--color-special-100-rgb:243,232,255;--color-special-200-rgb:233,213,255;--color-special-300-rgb:216,180,254;--color-special-400-rgb:192,132,252;--color-special-500-rgb:168,85,247;--color-special-600-rgb:147,51,234;--color-special-700-rgb:126,34,206;--color-special-800-rgb:107,33,168;--color-special-900-rgb:88,28,135;--color-special-950-rgb:59,7,100;--color-inherit:inherit;--color-transparent:transparent;--color-current:currentColor;--color-black:#000;--color-white:#fff;--color-canvas:#fff;--color-canvas-light:#fff;--color-canvas-dark:#f8fafc;--color-inverse:#000;--color-surface:#f1f5f9;--color-surface-light:#f8fafc;--color-surface-strong:#e2e8f0;--color-fore:#1e293b;--color-fore-in-light:#1e293b;--color-fore-in-dark:#fff;--color-focus:#bfdbfe;--color-link:#3b82f6;--color-link-hover:#2563eb;--color-link-visited:#1d4ed8;--color-link-active:#1e40af;--color-placeholder:#94a3b8;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-border-light:#f1f5f9;--color-black-rgb:0,0,0;--color-white-rgb:255,255,255;--color-canvas-rgb:255,255,255;--color-canvas-light-rgb:255,255,255;--color-canvas-dark-rgb:248,250,252;--color-inverse-rgb:0,0,0;--color-surface-rgb:241,245,249;--color-surface-light-rgb:248,250,252;--color-surface-strong-rgb:226,232,240;--color-fore-rgb:30,41,59;--color-fore-in-light-rgb:30,41,59;--color-fore-in-dark-rgb:255,255,255;--color-focus-rgb:191,219,254;--color-link-rgb:59,130,246;--color-link-hover-rgb:37,99,235;--color-link-visited-rgb:29,78,216;--color-link-active-rgb:30,64,175;--color-placeholder-rgb:148,163,184;--color-border-rgb:226,232,240;--color-border-strong-rgb:203,213,225;--color-border-light-rgb:241,245,249;--radius-none:0px;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.1),0 0 2px -1px rgba(0,0,0,.05);--shadow:0 1px 4px 0 rgba(0,0,0,.15),0 1px 2px -1px rgba(0,0,0,.1);--shadow-md:0 2px 6px -1px rgba(0,0,0,.2),0 1px 4px -2px rgba(0,0,0,.15);--shadow-lg:0 5px 15px -3px rgba(0,0,0,.2),0 2px 6px -4px rgba(0,0,0,.15);--shadow-xl:0 10px 25px -5px rgba(0,0,0,.2),0 4px 10px -6px rgba(0,0,0,.15);--shadow-2xl:0 10px 50px -10px rgba(0,0,0,.4),0 8px 20px -10px rgba(0,0,0,.3);--shadow-inner:inset 0 2px 4px 0 rgba(0,0,0,.05);--shadow-none:none;--space:0.25rem;--font-size-article:0.875rem;--font-size-root:16px;--font-size-page-lineHeight:1.5384615385}.dark{--color-gray-50:#020617;--color-gray-100:#0f172a;--color-gray-200:#1e293b;--color-gray-300:#334155;--color-gray-400:#475569;--color-gray-500:#64748b;--color-gray-600:#94a3b8;--color-gray-700:#cbd5e1;--color-gray-800:#e2e8f0;--color-gray-900:#f1f5f9;--color-gray-950:#f8fafc;--color-gray-50-rgb:2,6,23;--color-gray-100-rgb:15,23,42;--color-gray-200-rgb:30,41,59;--color-gray-300-rgb:51,65,85;--color-gray-400-rgb:71,85,105;--color-gray-500-rgb:100,116,139;--color-gray-600-rgb:148,163,184;--color-gray-700-rgb:203,213,225;--color-gray-800-rgb:226,232,240;--color-gray-900-rgb:241,245,249;--color-gray-950-rgb:248,250,252;--color-primary-50:#172554;--color-primary-100:#1e3a8a;--color-primary-200:#1e40af;--color-primary-300:#1d4ed8;--color-primary-400:#2563eb;--color-primary-500:#3b82f6;--color-primary-600:#60a5fa;--color-primary-700:#93c5fd;--color-primary-800:#bfdbfe;--color-primary-900:#dbeafe;--color-primary-950:#eff6ff;--color-primary-50-rgb:23,37,84;--color-primary-100-rgb:30,58,138;--color-primary-200-rgb:30,64,175;--color-primary-300-rgb:29,78,216;--color-primary-400-rgb:37,99,235;--color-primary-500-rgb:59,130,246;--color-primary-600-rgb:96,165,250;--color-primary-700-rgb:147,197,253;--color-primary-800-rgb:191,219,254;--color-primary-900-rgb:219,234,254;--color-primary-950-rgb:239,246,255;--color-secondary-50:#082f49;--color-secondary-100:#0c4a6e;--color-secondary-200:#075985;--color-secondary-300:#0369a1;--color-secondary-400:#0284c7;--color-secondary-500:#0ea5e9;--color-secondary-600:#38bdf8;--color-secondary-700:#7dd3fc;--color-secondary-800:#bae6fd;--color-secondary-900:#e0f2fe;--color-secondary-950:#f0f9ff;--color-secondary-50-rgb:8,47,73;--color-secondary-100-rgb:12,74,110;--color-secondary-200-rgb:7,89,133;--color-secondary-300-rgb:3,105,161;--color-secondary-400-rgb:2,132,199;--color-secondary-500-rgb:14,165,233;--color-secondary-600-rgb:56,189,248;--color-secondary-700-rgb:125,211,252;--color-secondary-800-rgb:186,230,253;--color-secondary-900-rgb:224,242,254;--color-secondary-950-rgb:240,249,255;--color-success-50:#052e16;--color-success-100:#14532d;--color-success-200:#166534;--color-success-300:#15803d;--color-success-400:#16a34a;--color-success-500:#22c55e;--color-success-600:#4ade80;--color-success-700:#86efac;--color-success-800:#bbf7d0;--color-success-900:#dcfce7;--color-success-950:#f0fdf4;--color-success-50-rgb:5,46,22;--color-success-100-rgb:20,83,45;--color-success-200-rgb:22,101,52;--color-success-300-rgb:21,128,61;--color-success-400-rgb:22,163,74;--color-success-500-rgb:34,197,94;--color-success-600-rgb:74,222,128;--color-success-700-rgb:134,239,172;--color-success-800-rgb:187,247,208;--color-success-900-rgb:220,252,231;--color-success-950-rgb:240,253,244;--color-warning-50:#451a03;--color-warning-100:#78350f;--color-warning-200:#92400e;--color-warning-300:#b45309;--color-warning-400:#d97706;--color-warning-500:#f59e0b;--color-warning-600:#fbbf24;--color-warning-700:#fcd34d;--color-warning-800:#fde68a;--color-warning-900:#fef3c7;--color-warning-950:#fffbeb;--color-warning-50-rgb:69,26,3;--color-warning-100-rgb:120,53,15;--color-warning-200-rgb:146,64,14;--color-warning-300-rgb:180,83,9;--color-warning-400-rgb:217,119,6;--color-warning-500-rgb:245,158,11;--color-warning-600-rgb:251,191,36;--color-warning-700-rgb:252,211,77;--color-warning-800-rgb:253,230,138;--color-warning-900-rgb:254,243,199;--color-warning-950-rgb:255,251,235;--color-danger-50:#450a0a;--color-danger-100:#7f1d1d;--color-danger-200:#991b1b;--color-danger-300:#b91c1c;--color-danger-400:#dc2626;--color-danger-500:#ef4444;--color-danger-600:#f87171;--color-danger-700:#fca5a5;--color-danger-800:#fecaca;--color-danger-900:#fee2e2;--color-danger-950:#fef2f2;--color-danger-50-rgb:69,10,10;--color-danger-100-rgb:127,29,29;--color-danger-200-rgb:153,27,27;--color-danger-300-rgb:185,28,28;--color-danger-400-rgb:220,38,38;--color-danger-500-rgb:239,68,68;--color-danger-600-rgb:248,113,113;--color-danger-700-rgb:252,165,165;--color-danger-800-rgb:254,202,202;--color-danger-900-rgb:254,226,226;--color-danger-950-rgb:254,242,242;--color-important-50:#500724;--color-important-100:#831843;--color-important-200:#9d174d;--color-important-300:#be185d;--color-important-400:#db2777;--color-important-500:#ec4899;--color-important-600:#f472b6;--color-important-700:#f9a8d4;--color-important-800:#fbcfe8;--color-important-900:#fce7f3;--color-important-950:#fdf2f8;--color-important-50-rgb:80,7,36;--color-important-100-rgb:131,24,67;--color-important-200-rgb:157,23,77;--color-important-300-rgb:190,24,93;--color-important-400-rgb:219,39,119;--color-important-500-rgb:236,72,153;--color-important-600-rgb:244,114,182;--color-important-700-rgb:249,168,212;--color-important-800-rgb:251,207,232;--color-important-900-rgb:252,231,243;--color-important-950-rgb:253,242,248;--color-special-50:#3b0764;--color-special-100:#581c87;--color-special-200:#6b21a8;--color-special-300:#7e22ce;--color-special-400:#9333ea;--color-special-500:#a855f7;--color-special-600:#c084fc;--color-special-700:#d8b4fe;--color-special-800:#e9d5ff;--color-special-900:#f3e8ff;--color-special-950:#faf5ff;--color-special-50-rgb:59,7,100;--color-special-100-rgb:88,28,135;--color-special-200-rgb:107,33,168;--color-special-300-rgb:126,34,206;--color-special-400-rgb:147,51,234;--color-special-500-rgb:168,85,247;--color-special-600-rgb:192,132,252;--color-special-700-rgb:216,180,254;--color-special-800-rgb:233,213,255;--color-special-900-rgb:243,232,255;--color-special-950-rgb:250,245,255;--color-canvas:#020617;--color-inverse:#fff;--color-surface:#1e293b;--color-surface-light:#0f172a;--color-surface-strong:#334155;--color-fore:#cbd5e1;--color-focus:#1e40af;--color-link:#3b82f6;--color-link-hover:#60a5fa;--color-link-visited:#93c5fd;--color-link-active:#bfdbfe;--color-placeholder:#475569;--color-border:#1e293b;--color-border-strong:#334155;--color-border-light:#0f172a;--color-canvas-rgb:2,6,23;--color-inverse-rgb:255,255,255;--color-surface-rgb:30,41,59;--color-surface-light-rgb:15,23,42;--color-surface-strong-rgb:51,65,85;--color-fore-rgb:203,213,225;--color-focus-rgb:30,64,175;--color-link-rgb:59,130,246;--color-link-hover-rgb:96,165,250;--color-link-visited-rgb:147,197,253;--color-link-active-rgb:191,219,254;--color-placeholder-rgb:71,85,105;--color-border-rgb:30,41,59;--color-border-strong-rgb:51,65,85;--color-border-light-rgb:15,23,42}.light-in-dark{--color-gray-50:#f8fafc;--color-gray-100:#f1f5f9;--color-gray-200:#e2e8f0;--color-gray-300:#cbd5e1;--color-gray-400:#94a3b8;--color-gray-500:#64748b;--color-gray-600:#475569;--color-gray-700:#334155;--color-gray-800:#1e293b;--color-gray-900:#0f172a;--color-gray-950:#020617;--color-gray-50-rgb:248,250,252;--color-gray-100-rgb:241,245,249;--color-gray-200-rgb:226,232,240;--color-gray-300-rgb:203,213,225;--color-gray-400-rgb:148,163,184;--color-gray-500-rgb:100,116,139;--color-gray-600-rgb:71,85,105;--color-gray-700-rgb:51,65,85;--color-gray-800-rgb:30,41,59;--color-gray-900-rgb:15,23,42;--color-gray-950-rgb:2,6,23;--color-primary-50:#eff6ff;--color-primary-100:#dbeafe;--color-primary-200:#bfdbfe;--color-primary-300:#93c5fd;--color-primary-400:#60a5fa;--color-primary-500:#3b82f6;--color-primary-600:#2563eb;--color-primary-700:#1d4ed8;--color-primary-800:#1e40af;--color-primary-900:#1e3a8a;--color-primary-950:#172554;--color-primary-50-rgb:239,246,255;--color-primary-100-rgb:219,234,254;--color-primary-200-rgb:191,219,254;--color-primary-300-rgb:147,197,253;--color-primary-400-rgb:96,165,250;--color-primary-500-rgb:59,130,246;--color-primary-600-rgb:37,99,235;--color-primary-700-rgb:29,78,216;--color-primary-800-rgb:30,64,175;--color-primary-900-rgb:30,58,138;--color-primary-950-rgb:23,37,84;--color-secondary-50:#f0f9ff;--color-secondary-100:#e0f2fe;--color-secondary-200:#bae6fd;--color-secondary-300:#7dd3fc;--color-secondary-400:#38bdf8;--color-secondary-500:#0ea5e9;--color-secondary-600:#0284c7;--color-secondary-700:#0369a1;--color-secondary-800:#075985;--color-secondary-900:#0c4a6e;--color-secondary-950:#082f49;--color-secondary-50-rgb:240,249,255;--color-secondary-100-rgb:224,242,254;--color-secondary-200-rgb:186,230,253;--color-secondary-300-rgb:125,211,252;--color-secondary-400-rgb:56,189,248;--color-secondary-500-rgb:14,165,233;--color-secondary-600-rgb:2,132,199;--color-secondary-700-rgb:3,105,161;--color-secondary-800-rgb:7,89,133;--color-secondary-900-rgb:12,74,110;--color-secondary-950-rgb:8,47,73;--color-success-50:#f0fdf4;--color-success-100:#dcfce7;--color-success-200:#bbf7d0;--color-success-300:#86efac;--color-success-400:#4ade80;--color-success-500:#22c55e;--color-success-600:#16a34a;--color-success-700:#15803d;--color-success-800:#166534;--color-success-900:#14532d;--color-success-950:#052e16;--color-success-50-rgb:240,253,244;--color-success-100-rgb:220,252,231;--color-success-200-rgb:187,247,208;--color-success-300-rgb:134,239,172;--color-success-400-rgb:74,222,128;--color-success-500-rgb:34,197,94;--color-success-600-rgb:22,163,74;--color-success-700-rgb:21,128,61;--color-success-800-rgb:22,101,52;--color-success-900-rgb:20,83,45;--color-success-950-rgb:5,46,22;--color-warning-50:#fffbeb;--color-warning-100:#fef3c7;--color-warning-200:#fde68a;--color-warning-300:#fcd34d;--color-warning-400:#fbbf24;--color-warning-500:#f59e0b;--color-warning-600:#d97706;--color-warning-700:#b45309;--color-warning-800:#92400e;--color-warning-900:#78350f;--color-warning-950:#451a03;--color-warning-50-rgb:255,251,235;--color-warning-100-rgb:254,243,199;--color-warning-200-rgb:253,230,138;--color-warning-300-rgb:252,211,77;--color-warning-400-rgb:251,191,36;--color-warning-500-rgb:245,158,11;--color-warning-600-rgb:217,119,6;--color-warning-700-rgb:180,83,9;--color-warning-800-rgb:146,64,14;--color-warning-900-rgb:120,53,15;--color-warning-950-rgb:69,26,3;--color-danger-50:#fef2f2;--color-danger-100:#fee2e2;--color-danger-200:#fecaca;--color-danger-300:#fca5a5;--color-danger-400:#f87171;--color-danger-500:#ef4444;--color-danger-600:#dc2626;--color-danger-700:#b91c1c;--color-danger-800:#991b1b;--color-danger-900:#7f1d1d;--color-danger-950:#450a0a;--color-danger-50-rgb:254,242,242;--color-danger-100-rgb:254,226,226;--color-danger-200-rgb:254,202,202;--color-danger-300-rgb:252,165,165;--color-danger-400-rgb:248,113,113;--color-danger-500-rgb:239,68,68;--color-danger-600-rgb:220,38,38;--color-danger-700-rgb:185,28,28;--color-danger-800-rgb:153,27,27;--color-danger-900-rgb:127,29,29;--color-danger-950-rgb:69,10,10;--color-important-50:#fdf2f8;--color-important-100:#fce7f3;--color-important-200:#fbcfe8;--color-important-300:#f9a8d4;--color-important-400:#f472b6;--color-important-500:#ec4899;--color-important-600:#db2777;--color-important-700:#be185d;--color-important-800:#9d174d;--color-important-900:#831843;--color-important-950:#500724;--color-important-50-rgb:253,242,248;--color-important-100-rgb:252,231,243;--color-important-200-rgb:251,207,232;--color-important-300-rgb:249,168,212;--color-important-400-rgb:244,114,182;--color-important-500-rgb:236,72,153;--color-important-600-rgb:219,39,119;--color-important-700-rgb:190,24,93;--color-important-800-rgb:157,23,77;--color-important-900-rgb:131,24,67;--color-important-950-rgb:80,7,36;--color-special-50:#faf5ff;--color-special-100:#f3e8ff;--color-special-200:#e9d5ff;--color-special-300:#d8b4fe;--color-special-400:#c084fc;--color-special-500:#a855f7;--color-special-600:#9333ea;--color-special-700:#7e22ce;--color-special-800:#6b21a8;--color-special-900:#581c87;--color-special-950:#3b0764;--color-special-50-rgb:250,245,255;--color-special-100-rgb:243,232,255;--color-special-200-rgb:233,213,255;--color-special-300-rgb:216,180,254;--color-special-400-rgb:192,132,252;--color-special-500-rgb:168,85,247;--color-special-600-rgb:147,51,234;--color-special-700-rgb:126,34,206;--color-special-800-rgb:107,33,168;--color-special-900-rgb:88,28,135;--color-special-950-rgb:59,7,100;--color-inherit:inherit;--color-transparent:transparent;--color-current:currentColor;--color-black:#000;--color-white:#fff;--color-canvas:#fff;--color-canvas-light:#fff;--color-canvas-dark:#f8fafc;--color-inverse:#000;--color-surface:#f1f5f9;--color-surface-light:#f8fafc;--color-surface-strong:#e2e8f0;--color-fore:#1e293b;--color-fore-in-light:#1e293b;--color-fore-in-dark:#fff;--color-focus:#bfdbfe;--color-link:#3b82f6;--color-link-hover:#2563eb;--color-link-visited:#1d4ed8;--color-link-active:#1e40af;--color-placeholder:#94a3b8;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-border-light:#f1f5f9;--color-black-rgb:0,0,0;--color-white-rgb:255,255,255;--color-canvas-rgb:255,255,255;--color-canvas-light-rgb:255,255,255;--color-canvas-dark-rgb:248,250,252;--color-inverse-rgb:0,0,0;--color-surface-rgb:241,245,249;--color-surface-light-rgb:248,250,252;--color-surface-strong-rgb:226,232,240;--color-fore-rgb:30,41,59;--color-fore-in-light-rgb:30,41,59;--color-fore-in-dark-rgb:255,255,255;--color-focus-rgb:191,219,254;--color-link-rgb:59,130,246;--color-link-hover-rgb:37,99,235;--color-link-visited-rgb:29,78,216;--color-link-active-rgb:30,64,175;--color-placeholder-rgb:148,163,184;--color-border-rgb:226,232,240;--color-border-strong-rgb:203,213,225;--color-border-light-rgb:241,245,249}@media (prefers-color-scheme:dark){.dark-auto{--color-gray-50:#020617;--color-gray-100:#0f172a;--color-gray-200:#1e293b;--color-gray-300:#334155;--color-gray-400:#475569;--color-gray-500:#64748b;--color-gray-600:#94a3b8;--color-gray-700:#cbd5e1;--color-gray-800:#e2e8f0;--color-gray-900:#f1f5f9;--color-gray-950:#f8fafc;--color-gray-50-rgb:2,6,23;--color-gray-100-rgb:15,23,42;--color-gray-200-rgb:30,41,59;--color-gray-300-rgb:51,65,85;--color-gray-400-rgb:71,85,105;--color-gray-500-rgb:100,116,139;--color-gray-600-rgb:148,163,184;--color-gray-700-rgb:203,213,225;--color-gray-800-rgb:226,232,240;--color-gray-900-rgb:241,245,249;--color-gray-950-rgb:248,250,252;--color-primary-50:#172554;--color-primary-100:#1e3a8a;--color-primary-200:#1e40af;--color-primary-300:#1d4ed8;--color-primary-400:#2563eb;--color-primary-500:#3b82f6;--color-primary-600:#60a5fa;--color-primary-700:#93c5fd;--color-primary-800:#bfdbfe;--color-primary-900:#dbeafe;--color-primary-950:#eff6ff;--color-primary-50-rgb:23,37,84;--color-primary-100-rgb:30,58,138;--color-primary-200-rgb:30,64,175;--color-primary-300-rgb:29,78,216;--color-primary-400-rgb:37,99,235;--color-primary-500-rgb:59,130,246;--color-primary-600-rgb:96,165,250;--color-primary-700-rgb:147,197,253;--color-primary-800-rgb:191,219,254;--color-primary-900-rgb:219,234,254;--color-primary-950-rgb:239,246,255;--color-secondary-50:#082f49;--color-secondary-100:#0c4a6e;--color-secondary-200:#075985;--color-secondary-300:#0369a1;--color-secondary-400:#0284c7;--color-secondary-500:#0ea5e9;--color-secondary-600:#38bdf8;--color-secondary-700:#7dd3fc;--color-secondary-800:#bae6fd;--color-secondary-900:#e0f2fe;--color-secondary-950:#f0f9ff;--color-secondary-50-rgb:8,47,73;--color-secondary-100-rgb:12,74,110;--color-secondary-200-rgb:7,89,133;--color-secondary-300-rgb:3,105,161;--color-secondary-400-rgb:2,132,199;--color-secondary-500-rgb:14,165,233;--color-secondary-600-rgb:56,189,248;--color-secondary-700-rgb:125,211,252;--color-secondary-800-rgb:186,230,253;--color-secondary-900-rgb:224,242,254;--color-secondary-950-rgb:240,249,255;--color-success-50:#052e16;--color-success-100:#14532d;--color-success-200:#166534;--color-success-300:#15803d;--color-success-400:#16a34a;--color-success-500:#22c55e;--color-success-600:#4ade80;--color-success-700:#86efac;--color-success-800:#bbf7d0;--color-success-900:#dcfce7;--color-success-950:#f0fdf4;--color-success-50-rgb:5,46,22;--color-success-100-rgb:20,83,45;--color-success-200-rgb:22,101,52;--color-success-300-rgb:21,128,61;--color-success-400-rgb:22,163,74;--color-success-500-rgb:34,197,94;--color-success-600-rgb:74,222,128;--color-success-700-rgb:134,239,172;--color-success-800-rgb:187,247,208;--color-success-900-rgb:220,252,231;--color-success-950-rgb:240,253,244;--color-warning-50:#451a03;--color-warning-100:#78350f;--color-warning-200:#92400e;--color-warning-300:#b45309;--color-warning-400:#d97706;--color-warning-500:#f59e0b;--color-warning-600:#fbbf24;--color-warning-700:#fcd34d;--color-warning-800:#fde68a;--color-warning-900:#fef3c7;--color-warning-950:#fffbeb;--color-warning-50-rgb:69,26,3;--color-warning-100-rgb:120,53,15;--color-warning-200-rgb:146,64,14;--color-warning-300-rgb:180,83,9;--color-warning-400-rgb:217,119,6;--color-warning-500-rgb:245,158,11;--color-warning-600-rgb:251,191,36;--color-warning-700-rgb:252,211,77;--color-warning-800-rgb:253,230,138;--color-warning-900-rgb:254,243,199;--color-warning-950-rgb:255,251,235;--color-danger-50:#450a0a;--color-danger-100:#7f1d1d;--color-danger-200:#991b1b;--color-danger-300:#b91c1c;--color-danger-400:#dc2626;--color-danger-500:#ef4444;--color-danger-600:#f87171;--color-danger-700:#fca5a5;--color-danger-800:#fecaca;--color-danger-900:#fee2e2;--color-danger-950:#fef2f2;--color-danger-50-rgb:69,10,10;--color-danger-100-rgb:127,29,29;--color-danger-200-rgb:153,27,27;--color-danger-300-rgb:185,28,28;--color-danger-400-rgb:220,38,38;--color-danger-500-rgb:239,68,68;--color-danger-600-rgb:248,113,113;--color-danger-700-rgb:252,165,165;--color-danger-800-rgb:254,202,202;--color-danger-900-rgb:254,226,226;--color-danger-950-rgb:254,242,242;--color-important-50:#500724;--color-important-100:#831843;--color-important-200:#9d174d;--color-important-300:#be185d;--color-important-400:#db2777;--color-important-500:#ec4899;--color-important-600:#f472b6;--color-important-700:#f9a8d4;--color-important-800:#fbcfe8;--color-important-900:#fce7f3;--color-important-950:#fdf2f8;--color-important-50-rgb:80,7,36;--color-important-100-rgb:131,24,67;--color-important-200-rgb:157,23,77;--color-important-300-rgb:190,24,93;--color-important-400-rgb:219,39,119;--color-important-500-rgb:236,72,153;--color-important-600-rgb:244,114,182;--color-important-700-rgb:249,168,212;--color-important-800-rgb:251,207,232;--color-important-900-rgb:252,231,243;--color-important-950-rgb:253,242,248;--color-special-50:#3b0764;--color-special-100:#581c87;--color-special-200:#6b21a8;--color-special-300:#7e22ce;--color-special-400:#9333ea;--color-special-500:#a855f7;--color-special-600:#c084fc;--color-special-700:#d8b4fe;--color-special-800:#e9d5ff;--color-special-900:#f3e8ff;--color-special-950:#faf5ff;--color-special-50-rgb:59,7,100;--color-special-100-rgb:88,28,135;--color-special-200-rgb:107,33,168;--color-special-300-rgb:126,34,206;--color-special-400-rgb:147,51,234;--color-special-500-rgb:168,85,247;--color-special-600-rgb:192,132,252;--color-special-700-rgb:216,180,254;--color-special-800-rgb:233,213,255;--color-special-900-rgb:243,232,255;--color-special-950-rgb:250,245,255;--color-canvas:#020617;--color-inverse:#fff;--color-surface:#1e293b;--color-surface-light:#0f172a;--color-surface-strong:#334155;--color-fore:#cbd5e1;--color-focus:#1e40af;--color-link:#3b82f6;--color-link-hover:#60a5fa;--color-link-visited:#93c5fd;--color-link-active:#bfdbfe;--color-placeholder:#475569;--color-border:#1e293b;--color-border-strong:#334155;--color-border-light:#0f172a;--color-canvas-rgb:2,6,23;--color-inverse-rgb:255,255,255;--color-surface-rgb:30,41,59;--color-surface-light-rgb:15,23,42;--color-surface-strong-rgb:51,65,85;--color-fore-rgb:203,213,225;--color-focus-rgb:30,64,175;--color-link-rgb:59,130,246;--color-link-hover-rgb:96,165,250;--color-link-visited-rgb:147,197,253;--color-link-active-rgb:191,219,254;--color-placeholder-rgb:71,85,105;--color-border-rgb:30,41,59;--color-border-strong-rgb:51,65,85;--color-border-light-rgb:15,23,42}}*,:after,:before{--tw-border-opacity:1;border-color:rgba(var(--color-border-rgb),var(--tw-border-opacity))}:focus-visible{outline-color:transparent}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }html{font-size:var(--font-size-root)}body{--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity));font-size:.8125rem;line-height:1.5384615385}.dark,body{--tw-text-opacity:1;color:rgba(var(--color-fore-rgb),var(--tw-text-opacity))}:root{--font-h1-size:2.25rem;--article-p-space:0.5em;--article-heading-space:0.5em;--article-hr-space:1.5em;--article-cell-padding:0.25rem 0.75rem}a,a.disabled:hover{--tw-text-opacity:1;color:rgba(var(--color-link-rgb),var(--tw-text-opacity))}a:hover{--tw-text-opacity:1;color:rgba(var(--color-link-hover-rgb),var(--tw-text-opacity))}a:focus-visible{outline-color:rgb(var(--color-focus-rgb));outline-offset:2px;outline-width:2px}.code,code{background-color:rgba(var(--color-important-500-rgb),.1);border-radius:var(--radius);padding-left:.25rem;padding-right:.25rem;--tw-text-opacity:1;color:rgba(var(--color-important-500-rgb),var(--tw-text-opacity))}pre{font-size:.75rem;line-height:1rem;overflow:auto;padding:.5rem}pre code{background-color:transparent;color:inherit;padding:0}samp,var{font-weight:700}.blockquote,blockquote{border-left-width:4px;font-size:.875rem;line-height:1.3rem;padding-left:.75rem;text-wrap:balance}.blockquote figcaption,blockquote figcaption{font-size:.75rem;line-height:1rem;--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.5;text-wrap:balance}.h1,h1{font-size:2rem}.h2,h2{font-size:1.5rem}.h3,h3{font-size:1.25rem}.h4,h4{font-size:1rem}.h5,h5{font-size:.875rem}.h6,h6{font-size:.75rem}ul{list-style-type:disc}ol,ul{padding-left:1.5em}ol{list-style-type:decimal}dt{font-weight:700}dd{padding-left:2em}.article{color:var(--font-size-article);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}.article h1,.article h2,.article h3,.article h4{margin-bottom:var(--article-heading-space);margin-top:var(--article-heading-space)}.article audio,.article blockquote,.article figure,.article img,.article ol,.article p,.article table,.article ul,.article video{margin-bottom:var(--article-p-space);margin-top:var(--article-p-space)}.article p{min-height:1em}.article p:empty:before{content:" ";display:inline-block}.article hr{margin-bottom:var(--article-hr-space);margin-top:var(--article-hr-space)}.article table{border-width:1px}.article td,.article th{border-bottom-width:1px;padding:var(--article-cell-padding)}.article thead{background-color:var(--table-head-bg,var(--color-gray-100))}.article ol *,.article table *,.article ul *{margin-bottom:0;margin-top:0}.article pre{border-radius:var(--radius);border-width:1px;--tw-bg-opacity:1;background-color:rgba(var(--color-gray-50-rgb),var(--tw-bg-opacity))}:root{--alert-bg:var(--color-surface)}.alert{align-items:center;background-color:var(--alert-bg);border-radius:var(--radius);display:flex;gap:.75rem;padding:.5rem .75rem}.alert-content{display:flex;flex:1 1 auto;flex-direction:column;gap:1rem}.alert-close{margin-bottom:-.375rem;margin-right:-.5rem;margin-top:-.375rem}.alert-link{color:inherit;font-weight:700}.alert-link:hover{color:inherit;text-decoration-line:underline}.alert-heading{font-weight:700;margin:0}.alert-text{flex:1 1 auto;white-space:pre-line}.alert-actions{align-items:center;display:flex;gap:.5rem}:root{--breadcrumb-divider:"/";--breadcrumb-divider-color:var(--color-gray-500);--breadcrumb-color-active:var(--color-gray-500)}.breadcrumb{display:flex;gap:1.25rem;list-style-type:none;padding-left:0}.breadcrumb>li{position:relative}.breadcrumb>li+li:before{color:var(--breadcrumb-divider-color);content:var(--breadcrumb-divider);display:block;left:-1.25rem;position:absolute;text-align:center;width:1.25rem}.breadcrumb>.active{color:var(--breadcrumb-color-active)}:root{--btn-radius:var(--radius);--btn-bg:var(--color-surface);--btn-border-color:var(--color-gray-300);--btn-height:2rem}.btn{align-items:center;background-color:var(--btn-bg);border-radius:var(--btn-radius);display:inline-flex;gap:.375rem;height:var(--btn-height);justify-content:center;padding-left:.75rem;padding-right:.75rem;white-space:nowrap;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--btn-border-color)}.btn,.btn-default:hover{color:inherit}.btn-link{--tw-text-opacity:1;color:rgba(var(--color-link-rgb),var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:2px;--tw-ring-color:transparent}.btn-link:visited{color:rgba(var(--color-link-visited-rgb),var(--tw-text-opacity))}.btn-link:hover{--tw-text-opacity:1;color:rgba(var(--color-link-hover-rgb),var(--tw-text-opacity))}.btn-link{--btn-bg:transparent}.btn.size-xs,.size-xs>.btn{padding-left:.25rem;padding-right:.25rem;--btn-height:1.25rem}.btn.size-sm,.btn.size-xs,.size-sm>.btn,.size-xs>.btn{font-size:.75rem;line-height:1rem}.btn.size-sm,.size-sm>.btn{--btn-height:1.5rem}.btn.size-md,.btn.size-sm,.size-md>.btn,.size-sm>.btn{padding-left:.5rem;padding-right:.5rem}.btn.size-md,.size-md>.btn{--btn-height:1.75rem}.btn.size-lg,.size-lg>.btn{font-size:1rem;line-height:1.5rem;padding-left:1rem;padding-right:1rem;--btn-height:2.5rem}.btn.size-xl,.size-xl>.btn{font-size:1.125rem;line-height:1.75rem;padding-left:1.25rem;padding-right:1.25rem;--btn-height:3rem}.btn.square{aspect-ratio:1/1;gap:.125rem;padding-left:0;padding-right:0}@supports not (aspect-ratio:1/1){.btn.square{width:var(--btn-height)}}.btn.btn-caret{padding-left:.25rem;padding-right:.25rem}.btn.btn-wide{min-width:80px}:root{--checkbox-size:12px;--checkbox-color:var(--color-primary-500)}.checkbox,.radio{align-items:center;cursor:pointer;display:flex;gap:.375rem;min-height:20px}.checkbox>input[type=checkbox],.radio>input[type=radio]{accent-color:rgb(var(--color-primary-500-rgb));border-radius:var(--radius-lg)}.checkbox-primary,.radio-primary{display:flex;gap:.375rem;min-height:20px;position:relative}.checkbox-primary>input[type=checkbox],.radio-primary>input[type=radio]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}.checkbox-primary>label,.radio-primary>label{cursor:pointer;padding-left:calc(var(--checkbox-size) + 8px);position:relative}.checkbox-primary>label:after,.checkbox-primary>label:before,.radio-primary>label:after,.radio-primary>label:before{display:block;height:var(--checkbox-size);left:0;position:absolute;transition-duration:.15s;transition-property:transform,background-color,color,opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--checkbox-size);--tw-content:"";content:var(--tw-content);top:calc((20px - var(--checkbox-size))/2)}.checkbox-primary>label:before{border-radius:var(--radius-sm);border-width:1px;--tw-border-opacity:1;border-color:rgba(var(--color-gray-400-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity))}.checkbox-primary>label:after{--tw-scale-x:.9;--tw-scale-y:.9;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTkgMjAuNDItNi4yMS02LjIxIDIuODMtMi44M0w5IDE0Ljc3bDkuODgtOS44OSAyLjgzIDIuODN6Ii8+PC9zdmc+");transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.radio-primary>label:before{border-radius:var(--radius-full);border-width:1px;--tw-border-opacity:1;border-color:rgba(var(--color-gray-400-rgb),var(--tw-border-opacity))}.radio-primary>label:after{background-color:var(--checkbox-color);border-radius:var(--radius-full);opacity:0;--checkbox-radio-size:calc(var(--checkbox-size)*2/3);height:var(--checkbox-radio-size);left:calc((var(--checkbox-size) - var(--checkbox-radio-size))/2);top:calc((20px - var(--checkbox-radio-size))/2);width:var(--checkbox-radio-size)}.checkbox-primary>label:hover:before,.radio-primary>label:hover:before{border-color:var(--checkbox-color)}.checkbox-primary.focus>label:before,.checkbox-primary>input[type=checkbox]:focus+label:before,.radio-primary.focus>label:before,.radio-primary>input[type=radio]:focus+label:before{border-color:var(--checkbox-color);outline-color:rgb(var(--color-focus-rgb));outline-style:solid;outline-width:2px}.checkbox-primary.checked>label:before,.checkbox-primary>input[type=checkbox]:checked+label:before{background-color:var(--checkbox-color);border-color:var(--checkbox-color)}.radio-primary.checked>label:before,.radio-primary>input[type=radio]:checked+label:before{border-color:var(--checkbox-color)}.checkbox-primary.checked>label:after,.checkbox-primary>input[type=checkbox]:checked+label:after,.radio-primary.checked>label:after,.radio-primary>input[type=radio]:checked+label:after{opacity:1}.checkbox-primary.disabled>label,.checkbox-primary>input[type=checkbox]:disabled+label,.radio-primary.disabled>label,.radio-primary>input[type=radio]:disabled+label{cursor:not-allowed;opacity:.7;pointer-events:none;--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.checkbox-primary.indeterminate>label:after,.checkbox-primary>input[type=checkbox]:indeterminate+label:after{--tw-border-opacity:1;background-color:var(--checkbox-color);background-image:none;border-color:rgba(var(--color-canvas-rgb),var(--tw-border-opacity));border-width:calc((var(--checkbox-size) - 2px)/2) 2px;opacity:1}.check-list{align-items:flex-start;flex-direction:column;gap:.5rem}.check-list,.check-list-inline{display:flex;padding-bottom:.375rem;padding-top:.375rem}.check-list-inline{align-items:center;-moz-column-gap:1rem;column-gap:1rem;flex-direction:row;flex-wrap:wrap;row-gap:.5rem}.switch{display:flex;gap:.375rem;min-height:20px;padding-left:2.5rem;position:relative}.switch>input{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}.switch>label:after,.switch>label:before{border-radius:var(--radius-full);border-width:1px;height:1rem;left:0;position:absolute;top:.125rem;width:2rem;--tw-border-opacity:1;border-color:rgba(var(--color-border-strong-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity));transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);--tw-content:"";content:var(--tw-content)}.switch>label:before{cursor:pointer;--tw-shadow:var(--shadow-inner);--tw-shadow-colored:var(--shadow-inner);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.switch>label:hover:before{--tw-border-opacity:1;border-color:rgba(var(--color-border-rgb),var(--tw-border-opacity))}.switch>label:after{height:.75rem;left:.125rem;top:.25rem;width:.75rem;--tw-border-opacity:1;border-color:rgba(var(--color-canvas-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity));--tw-shadow:var(--shadow);--tw-shadow-colored:var(--shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.switch>input:checked+label:before{background-color:var(--checkbox-color);border-color:rgba(var(--color-inverse-rgb),.2)}.switch>input:checked+label:after{color:var(--checkbox-color);left:18px}.switch.focus>label:before,.switch>input:focus+label:before{border-color:var(--checkbox-color);outline-color:rgb(var(--color-focus-rgb));outline-style:solid;outline-width:2px}.switch.disabled>label:before,.switch>input:disabled+label:before{cursor:not-allowed;opacity:.7;pointer-events:none;--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{--form-control-radius:var(--radius);--form-control-border:var(--color-border);--form-control-focus:var(--color-primary-500);--form-control-disabled:var(--color-surface);--form-control-readonly:var(--color-surface)}.dark{--form-control-border:var(--color-border-strong)}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity:1;color:rgba(var(--color-placeholder-rgb),var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity:1;color:rgba(var(--color-placeholder-rgb),var(--tw-placeholder-opacity))}.form-control{border-radius:var(--form-control-radius);display:block;height:2rem;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity));outline-color:transparent;outline-style:solid;outline-width:1px;padding:.25rem .5rem;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--form-control-border);transition-duration:.15s;transition-property:outline,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-control.focus,.form-control:focus{outline-color:var(--form-control-focus);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(var(--color-focus-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.3}.form-control.disabled,.form-control[disabled]{background-color:var(--form-control-disabled);opacity:1}.form-control.readonly,.form-control[readonly]{background-color:var(--form-control-readonly)}select{-webkit-appearance:none;background-image:url("data:image/gif;base64,R0lGODlhBwAEAIAAAMvQ2////yH5BAEAAAEALAAAAAAHAAQAAAIIhA+BGWoNWSgAOw==");background-position:right 8px top 50%;background-repeat:no-repeat;background-size:8px auto;padding-right:1rem}select.form-control[multiple]{background-image:none}textarea.form-control{height:auto;min-height:32px}input[type=file].form-control{padding:.125rem}input[type=file].form-control::-webkit-file-upload-button{-webkit-appearance:none;appearance:none;border-radius:inherit;border-style:none;cursor:pointer;height:1.75rem;padding-left:.5rem;padding-right:.5rem}input[type=file].form-control::-webkit-file-upload-button:hover{background-color:rgba(var(--color-black-rgb),.1)}.has-error .form-control,.has-error.form-control{--tw-ring-color:rgba(var(--color-danger-500-rgb),0.6)}.has-error .form-control.focus,.has-error .form-control:focus,.has-error.form-control.focus,.has-error.form-control:focus{outline-color:rgb(var(--color-danger-500-rgb));--tw-ring-color:rgba(var(--color-danger-500-rgb),0.1)}.has-warning .form-control,.has-warning.form-control{--tw-ring-color:rgba(var(--color-warning-500-rgb),0.6)}.has-warning .form-control.focus,.has-warning .form-control:focus,.has-warning.form-control.focus,.has-warning.form-control:focus{outline-color:rgb(var(--color-warning-500-rgb));--tw-ring-color:rgba(var(--color-warning-500-rgb),0.2)}.has-success .form-control,.has-success.form-control{--tw-ring-color:rgba(var(--color-success-500-rgb),0.6)}.has-success .form-control.focus,.has-success .form-control:focus,.has-success.form-control.focus,.has-success.form-control:focus{outline-color:rgb(var(--color-success-500-rgb));--tw-ring-color:rgba(var(--color-success-500-rgb),0.2)}.form-control.size-sm,.size-sm>.form-control{font-size:.75rem;height:1.5rem;line-height:1rem;padding-left:.5rem;padding-right:.5rem}.form-control.size-md,.size-md>.form-control{height:1.75rem;padding-left:.5rem;padding-right:.5rem}.form-control.size-lg,.size-lg>.form-control{font-size:1rem;height:2.5rem;line-height:1.5rem;padding-left:.75rem;padding-right:.75rem}:root{--input-group-addon-bg:var(--color-gray-50)}.input-group{align-items:stretch;display:flex}.input-group>.form-control,.input-group>.input-control{flex:1 1 auto;z-index:1}.input-group-addon{align-items:center;background-color:var(--input-group-addon-bg);border-radius:var(--form-control-radius);display:flex;flex:none;height:2rem;padding-left:.5rem;padding-right:.5rem;z-index:0;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--form-control-border)}.size-sm>.input-group-addon{font-size:.75rem;height:1.5rem;line-height:1rem;padding-left:.5rem;padding-right:.5rem}.size-lg>.input-group-addon{font-size:1rem;height:2.5rem;line-height:1.5rem;padding-left:.75rem;padding-right:.75rem}.input-group-control{flex:1 1 auto}.input-group>*+*,.input-group>*+* .form-control{border-bottom-left-radius:var(--radius-none);border-top-left-radius:var(--radius-none)}.input-group>:not(:last-child),.input-group>:not(:last-child) .form-control{border-bottom-right-radius:var(--radius-none);border-top-right-radius:var(--radius-none)}.input-group .btn:focus-visible,.input-group .form-control:focus{z-index:2}:root{--form-tip-color:var(--color-gray-400);--form-label-color:var(--color-gray-700);--form-horz-label-width:6rem;--form-grid-gap-x:1.25rem;--form-grid-gap-y:.75rem}.form{flex-direction:column;gap:1rem}.form,.form-label{display:flex}.form-label{align-items:center;color:var(--form-label-color);flex-direction:row;gap:.25rem;height:2rem;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}.form-label.required:after{content:"*";display:inline-block;margin-left:.25rem;--tw-translate-y:0.125rem;--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity:1;color:rgba(var(--color-danger-500-rgb),var(--tw-text-opacity))}.no-required .form-label.required:after{display:none}.form-label-actions{flex:1 1 auto;justify-content:flex-end}.form-label>.checkbox-primary{margin-left:.75rem}.form-tip{color:var(--form-tip-color);display:block;margin-top:.25rem}.has-error .form-tip{--tw-text-opacity:1;color:rgba(var(--color-danger-500-rgb),var(--tw-text-opacity))}.has-warning .form-tip{--tw-text-opacity:1;color:rgba(var(--color-warning-500-rgb),var(--tw-text-opacity))}.has-success .form-tip{--tw-text-opacity:1;color:rgba(var(--color-success-500-rgb),var(--tw-text-opacity))}.form-actions{display:flex;flex-direction:row;gap:1rem;justify-content:center}.form-grid{--form-grid-gap-x-half:calc(var(--form-grid-gap-x)/2);--form-grid-gap-y-half:calc(var(--form-grid-gap-y)/2);align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:0}.form-grid .form-group{padding:var(--form-grid-gap-y-half) var(--form-grid-gap-x-half)}.form-grid .form-label.required:after{margin-left:.25rem;order:-9999}.form-grid .form-label .checkbox{margin-left:.75rem;margin-right:.75rem}.form-grid .has-wrap-after:after{display:block;width:100%;--tw-content:"";content:var(--tw-content)}.form-grid-wrap{width:100%}.form-grid-row{display:flex;flex-direction:row;padding-bottom:var(--form-grid-gap-y-half);padding-top:var(--form-grid-gap-y-half);position:relative;width:100%}.form-grid-col{padding-left:var(--form-grid-gap-x-half);padding-right:var(--form-grid-gap-x-half)}.form-grid .form-actions{gap:1.5rem;justify-content:center;padding:var(--form-grid-gap-y) var(--form-grid-gap-x-half);width:100%}.form-grid .form-actions.is-pinned{border-top-width:1px}.form-horz .form-group,.form-horz .form-row{align-items:flex-start;display:flex;flex-direction:row}.form-horz .form-group{flex-grow:1;flex-wrap:wrap;min-height:32px;min-width:0;padding-left:var(--form-horz-label-width);position:relative}.form-horz .form-group[class*=" w-"],.form-horz .form-group[class^=w-]{flex:none}.form-horz .form-group>*{min-width:0}.form-horz .form-group.no-label{padding-left:0}.form-horz .form-group.no-label>.check-list-inline{padding-left:1rem;padding-right:1rem}.form-horz .form-label{justify-content:flex-end;left:0;padding-left:1rem;padding-right:.5rem;position:absolute;top:0;width:var(--form-horz-label-width)}.form-horz .form-label.required:after{margin-left:0;order:-9999}.form-horz .form-tip{width:100%}.form-horz .form-tip,.form-horz .input-control,.form-horz .input-group{flex:1 1 auto}.form .form-group-wrapper,.form-horz .form-group-wrapper{flex:1 1 auto;min-width:0;width:100%;z-index:1}.form .form-group-wrapper.flex-none,.form-horz .form-group-wrapper.flex-none{flex:none}.form fieldset>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.form fieldset{padding-bottom:1rem;padding-left:1rem}.form-grid fieldset>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.form legend{border-bottom-width:1px;display:flex;justify-content:flex-start;margin-left:-1rem;width:100%;--tw-border-opacity:1;border-bottom-color:rgba(var(--color-primary-100-rgb),var(--tw-border-opacity));width:calc(100% + 1rem)}.form-title{align-items:center;background-color:rgba(var(--color-primary-50-rgb),.5);display:flex;font-weight:700;height:1.75rem;padding-left:.75rem;padding-right:.75rem}@font-face{font-display:block;font-family:ZenIcon;font-style:normal;font-weight:400;src:url(./icons/zenicon.eot);src:url(./icons/zenicon.woff) format("woff"),url(./icons/zenicon.ttf) format("truetype"),url(./icons/zenicon.svg) format("svg")}.icon,[class*=" icon-"],[class^=icon-]{display:inline-block;font-display:block;font-family:ZenIcon;font-size:14px;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon:before{display:inline-block;min-width:14px;text-align:center}.icon-lg:before{font-size:1.3333333em;vertical-align:-10%}.icon-2x{font-size:28px}.icon-3x{font-size:42px}.icon-4x{font-size:56px}.icon-5x{font-size:70px}.icon-resize:before{content:"\e667"}.icon-arrows-alt:before,.icon-expand-full:before,.icon-fullscreen:before{content:"\e6a3"}.icon-collapse-full:before{content:"\e682"}.icon-taiji:before,.icon-yinyang:before{content:"\e687"}.icon-window:before{content:"\e68e"}.icon-window-alt:before{content:"\e68f"}.icon-carousel:before{content:"\e6b0"}.icon-spinner-snake:before{content:"\e97b"}.icon-spinner-indicator:before{content:"\e97c"}.icon-check-board:before{content:"\e9b8"}.icon-bar-chart-o:before,.icon-bar-chart:before{content:"\f080"}.icon-github:before{content:"\f09b"}.icon-dot-circle-o:before,.icon-dot-circle:before{content:"\f192"}.icon-cube-alt:before{content:"\f1b2"}.icon-cubes:before{content:"\f1b3"}.icon-file-pdf:before{content:"\f1c1"}.icon-file-word:before{content:"\f1c2"}.icon-file-excel:before{content:"\f1c3"}.icon-file-powerpoint:before{content:"\f1c4"}.icon-file-image:before,.icon-file-photo:before,.icon-file-picture:before{content:"\f1c5"}.icon-file-archive:before,.icon-file-zip:before{content:"\f1c6"}.icon-file-audio:before,.icon-file-sound:before{content:"\f1c7"}.icon-file-movie:before,.icon-file-video:before{content:"\f1c8"}.icon-file-code:before{content:"\f1c9"}.icon-circle-o-notch:before{content:"\f1ce"}.icon-chanzhi:before{content:"\e906"}.icon-chanzhi-pro:before{content:"\e905"}.icon-zsite:before{content:"\e904"}.icon-zsite-pro:before{content:"\e903"}.icon-qq:before{content:"\f600"}.icon-wechat:before,.icon-weixin:before{content:"\f1d7"}.icon-history:before{content:"\f1da"}.icon-circle-thin:before{content:"\f1db"}.icon-sliders:before{content:"\f1de"}.icon-newspaper-o:before{content:"\f1ea"}.icon-calculator:before{content:"\f1ec"}.icon-paint-brush:before{content:"\f1fc"}.icon-area-chart:before{content:"\f1fe"}.icon-pie-chart:before{content:"\f200"}.icon-line-chart:before{content:"\f201"}.icon-toggle-off:before{content:"\f204"}.icon-toggle-on:before{content:"\f205"}.icon-diamond:before{content:"\f219"}.icon-venus:before{content:"\f221"}.icon-mars:before{content:"\f222"}.icon-server:before{content:"\f233"}.icon-music:before{content:"\e602"}.icon-search:before{content:"\e603"}.icon-envelope:before{content:"\e604"}.icon-heart:before{content:"\e605"}.icon-star:before{content:"\e606"}.icon-star-empty:before{content:"\e607"}.icon-user:before{content:"\e608"}.icon-film:before{content:"\e609"}.icon-th-large:before{content:"\e60a"}.icon-th:before{content:"\e60b"}.icon-th-list:before{content:"\e60c"}.icon-check:before,.icon-ok:before{content:"\e60d"}.icon-remove:before,.icon-times:before{content:"\d7"}.icon-zoom-in:before{content:"\e60f"}.icon-zoom-out:before{content:"\e610"}.icon-off:before{content:"\e611"}.icon-cog:before{content:"\e613"}.icon-trash:before{content:"\e614"}.icon-home:before{content:"\e615"}.icon-file-alt:before,.icon-file-o:before{content:"\e616"}.icon-time:before{content:"\e617"}.icon-download-alt:before{content:"\e618"}.icon-download:before{content:"\e619"}.icon-upload:before{content:"\e61a"}.icon-inbox:before{content:"\e61b"}.icon-play-circle:before{content:"\e61c"}.icon-repeat:before{content:"\e61d"}.icon-refresh:before{content:"\e61e"}.icon-list-alt:before{content:"\e61f"}.icon-lock:before{content:"\e620"}.icon-flag:before{content:"\e621"}.icon-headphones:before{content:"\e622"}.icon-volume-off:before{content:"\e623"}.icon-volume-up:before{content:"\e625"}.icon-qrcode:before{content:"\e626"}.icon-barcode:before{content:"\e627"}.icon-tag:before{content:"\e628"}.icon-tags:before{content:"\e629"}.icon-book:before{content:"\e62a"}.icon-bookmark:before{content:"\e62b"}.icon-print:before{content:"\e62c"}.icon-camera:before{content:"\e62d"}.icon-font:before{content:"\e62e"}.icon-bold:before{content:"\e62f"}.icon-italic:before{content:"\f033"}.icon-header:before{content:"\f1dc"}.icon-underline:before{content:"\f0cd"}.icon-strikethrough:before{content:"\f0cc"}.icon-eraser:before{content:"\f12d"}.icon-align-justify:before{content:"\e636"}.icon-list:before{content:"\e637"}.icon-picture:before{content:"\e63b"}.icon-pencil:before{content:"\e63c"}.icon-map-marker:before{content:"\e63d"}.icon-adjust:before{content:"\e63e"}.icon-tint:before{content:"\e63f"}.icon-edit:before{content:"\e640"}.icon-share:before{content:"\e641"}.icon-checked:before{content:"\e642"}.icon-arrows:before,.icon-move:before{content:"\e643"}.icon-step-backward:before{content:"\e644"}.icon-fast-backward:before{content:"\e645"}.icon-backward:before{content:"\e646"}.icon-play:before{content:"\e647"}.icon-pause:before{content:"\e648"}.icon-stop:before{content:"\e649"}.icon-forward:before{content:"\e64a"}.icon-fast-forward:before{content:"\e64b"}.icon-step-forward:before{content:"\e64c"}.icon-eject:before{content:"\e64d"}.icon-chevron-left:before{content:"\e64e"}.icon-chevron-right:before{content:"\e64f"}.icon-plus-sign:before{content:"\e650"}.icon-minus-sign:before{content:"\e651"}.icon-remove-sign:before{content:"\e652"}.icon-check-circle:before,.icon-ok-sign:before{content:"\e653"}.icon-question-sign:before{content:"\e654"}.icon-info-sign:before{content:"\e655"}.icon-remove-circle:before{content:"\e657"}.icon-check-circle-o:before,.icon-ok-circle:before{content:"\e658"}.icon-ban-circle:before{content:"\e659"}.icon-arrow-left:before{content:"\e65a"}.icon-arrow-right:before{content:"\e65b"}.icon-arrow-up:before{content:"\e65c"}.icon-arrow-down:before{content:"\e65d"}.icon-share-alt:before{content:"\e65e"}.icon-resize-full:before{content:"\e65f"}.icon-resize-small:before{content:"\e660"}.icon-plus:before{content:"\e661"}.icon-minus:before{content:"\e662"}.icon-asterisk:before{content:"\e663"}.icon-exclamation-sign:before{content:"\e664"}.icon-gift:before{content:"\e665"}.icon-leaf:before{content:"\e666"}.icon-eye-open:before{content:"\e668"}.icon-eye-close:before{content:"\e669"}.icon-warning-sign:before{content:"\e66a"}.icon-plane:before{content:"\e66b"}.icon-calendar:before{content:"\e66c"}.icon-random:before{content:"\e66d"}.icon-comment:before{content:"\e66e"}.icon-chevron-up:before{content:"\e670"}.icon-chevron-down:before{content:"\e671"}.icon-shopping-cart:before{content:"\e673"}.icon-folder-close:before{content:"\e674"}.icon-folder-open:before{content:"\e675"}.icon-resize-v:before{content:"\e676"}.icon-resize-h:before{content:"\e677"}.icon-bar-chart-alt:before{content:"\e678"}.icon-camera-retro:before{content:"\e679"}.icon-key:before{content:"\e67a"}.icon-cogs:before{content:"\e67b"}.icon-comments:before{content:"\e67c"}.icon-thumbs-o-up:before{content:"\e67d"}.icon-thumbs-o-down:before{content:"\e67e"}.icon-star-half:before{content:"\e67f"}.icon-heart-empty:before{content:"\e680"}.icon-signout:before{content:"\e681"}.icon-pushpin:before{content:"\e683"}.icon-external-link:before{content:"\e684"}.icon-signin:before{content:"\e685"}.icon-trophy:before{content:"\e686"}.icon-upload-alt:before{content:"\e688"}.icon-lemon:before{content:"\e689"}.icon-phone:before{content:"\e68a"}.icon-check-empty:before{content:"\e68b"}.icon-bookmark-empty:before{content:"\e68c"}.icon-phone-sign:before{content:"\e68d"}.icon-credit:before{content:"\e690"}.icon-rss:before{content:"\e691"}.icon-hdd:before{content:"\e692"}.icon-bullhorn:before{content:"\e693"}.icon-bell:before{content:"\e694"}.icon-certificate:before{content:"\e695"}.icon-hand-right:before{content:"\e696"}.icon-hand-left:before{content:"\e697"}.icon-hand-up:before{content:"\e698"}.icon-hand-down:before{content:"\e699"}.icon-circle-arrow-left:before{content:"\e69a"}.icon-circle-arrow-right:before{content:"\e69b"}.icon-circle-arrow-up:before{content:"\e69c"}.icon-circle-arrow-down:before{content:"\e69d"}.icon-globe:before{content:"\e69e"}.icon-wrench:before{content:"\e69f"}.icon-tasks:before{content:"\e6a0"}.icon-filter:before{content:"\e6a1"}.icon-group:before{content:"\e6a4"}.icon-link:before{content:"\e6a5"}.icon-cloud:before{content:"\e6a6"}.icon-beaker:before{content:"\e6a7"}.icon-cut:before{content:"\e6a8"}.icon-copy:before{content:"\e6a9"}.icon-paper-clip:before{content:"\e6aa"}.icon-save:before{content:"\e6ab"}.icon-sign-blank:before{content:"\e6ac"}.icon-bars:before,.icon-reorder:before{content:"\e6ad"}.icon-list-ul:before{content:"\e6ae"}.icon-list-ol:before{content:"\e6af"}.icon-table:before{content:"\e6b2"}.icon-magic:before{content:"\e6b3"}.icon-caret-down:before{content:"\e6b8"}.icon-caret-up:before{content:"\e6b9"}.icon-caret-left:before{content:"\e6ba"}.icon-caret-right:before{content:"\e6bb"}.icon-columns:before{content:"\e6bc"}.icon-sort:before{content:"\e6bd"}.icon-sort-down:before{content:"\e6be"}.icon-sort-up:before{content:"\e6bf"}.icon-envelope-alt:before{content:"\e6c0"}.icon-undo:before{content:"\e6c1"}.icon-dashboard:before{content:"\e6c3"}.icon-comment-alt:before{content:"\e6c4"}.icon-comments-alt:before{content:"\e6c5"}.icon-bolt:before{content:"\e6c6"}.icon-sitemap:before{content:"\e6c7"}.icon-umbrella:before{content:"\e6c8"}.icon-paste:before{content:"\e6c9"}.icon-lightbulb:before{content:"\e6ca"}.icon-exchange:before{content:"\e6cb"}.icon-cloud-download:before{content:"\e6cc"}.icon-cloud-upload:before{content:"\e6cd"}.icon-bell-alt:before{content:"\e6d1"}.icon-coffee:before{content:"\e6d2"}.icon-file-text-alt:before,.icon-file-text-o:before{content:"\e6d4"}.icon-building:before{content:"\e6d5"}.icon-double-angle-left:before{content:"\e6dc"}.icon-double-angle-right:before{content:"\e6dd"}.icon-double-angle-up:before{content:"\e6de"}.icon-double-angle-down:before{content:"\e6df"}.icon-angle-left:before{content:"\e6e0"}.icon-angle-right:before{content:"\e6e1"}.icon-angle-up:before{content:"\e6e2"}.icon-angle-down:before{content:"\e6e3"}.icon-desktop:before{content:"\e6e4"}.icon-laptop:before{content:"\e6e5"}.icon-tablet:before{content:"\e6e6"}.icon-mobile:before{content:"\e6e7"}.icon-circle-blank:before{content:"\e6e8"}.icon-quote-left:before{content:"\e6e9"}.icon-quote-right:before{content:"\e6ea"}.icon-spinner:before{content:"\e6eb"}.icon-circle:before{content:"\e6ec"}.icon-reply:before{content:"\e6ed"}.icon-folder-close-alt:before{content:"\e6ef"}.icon-folder-open-alt:before{content:"\e6f0"}.icon-expand-alt:before{content:"\e6f1"}.icon-collapse-alt:before{content:"\e6f2"}.icon-smile:before{content:"\e6f3"}.icon-frown:before{content:"\e6f4"}.icon-meh:before{content:"\e6f5"}.icon-gamepad:before{content:"\e6f6"}.icon-keyboard:before{content:"\e6f7"}.icon-flag-alt:before{content:"\e6f8"}.icon-flag-checkered:before{content:"\e6f9"}.icon-terminal:before{content:"\e6fa"}.icon-code:before{content:"\e6fb"}.icon-reply-all:before{content:"\e6fc"}.icon-star-half-full:before{content:"\e6fd"}.icon-location-arrow:before{content:"\e6fe"}.icon-crop:before{content:"\e6ff"}.icon-code-fork:before{content:"\e700"}.icon-unlink:before{content:"\e701"}.icon-question:before{content:"\e702"}.icon-info:before{content:"\e703"}.icon-shield:before{content:"\e70b"}.icon-calendar-empty:before{content:"\e70c"}.icon-rocket:before{content:"\e70e"}.icon-chevron-sign-left:before{content:"\e70f"}.icon-chevron-sign-right:before{content:"\e710"}.icon-chevron-sign-up:before{content:"\e711"}.icon-chevron-sign-down:before{content:"\e712"}.icon-html5:before{content:"\e713"}.icon-anchor:before{content:"\e714"}.icon-unlock-alt:before{content:"\e715"}.icon-bullseye:before{content:"\e716"}.icon-ellipsis-h:before{content:"\e717"}.icon-ellipsis-v:before{content:"\e718"}.icon-rss-sign:before{content:"\e719"}.icon-play-sign:before{content:"\e71a"}.icon-minus-sign-alt:before{content:"\e71c"}.icon-plus-sign-alt:before{content:"\f0fe"}.icon-check-minus:before{content:"\e71d"}.icon-check-plus:before{content:"\f196"}.icon-level-up:before{content:"\e71e"}.icon-level-down:before{content:"\e71f"}.icon-check-sign:before{content:"\e720"}.icon-edit-sign:before{content:"\e721"}.icon-external-link-sign:before{content:"\e722"}.icon-share-sign:before{content:"\e723"}.icon-compass:before{content:"\e724"}.icon-collapse:before{content:"\e725"}.icon-collapse-top:before{content:"\e726"}.icon-expand:before{content:"\e727"}.icon-dollar:before{content:"\e728"}.icon-yen:before{content:"\e729"}.icon-file:before{content:"\e72b"}.icon-file-text:before{content:"\e72c"}.icon-sort-by-alphabet:before{content:"\e72d"}.icon-sort-by-alphabet-alt:before{content:"\e72e"}.icon-sort-by-attributes:before{content:"\e72f"}.icon-sort-by-attributes-alt:before{content:"\e730"}.icon-sort-by-order:before{content:"\e731"}.icon-sort-by-order-alt:before{content:"\e732"}.icon-thumbs-up:before{content:"\e733"}.icon-thumbs-down:before{content:"\e734"}.icon-long-arrow-down:before{content:"\e736"}.icon-long-arrow-up:before{content:"\e737"}.icon-long-arrow-left:before{content:"\e738"}.icon-long-arrow-right:before{content:"\e739"}.icon-apple:before{content:"\e73a"}.icon-windows:before{content:"\e73b"}.icon-android:before{content:"\e73c"}.icon-linux:before{content:"\e73d"}.icon-sun:before{content:"\e742"}.icon-moon:before{content:"\e743"}.icon-archive:before{content:"\e744"}.icon-bug:before{content:"\e745"}.icon-alipay:before,.icon-zhifubao:before{content:"\e901"}.icon-alipay-square:before,.icon-zhifubao-square:before{content:"\e900"}.icon-taobao:before{content:"\e902"}.icon-weibo:before{content:"\e746"}.icon-chrome:before{content:"\e76c"}.icon-firefox:before{content:"\e76d"}.icon-ie:before{content:"\e76e"}.icon-opera:before{content:"\e76f"}.icon-safari:before{content:"\e770"}.icon-node:before{content:"\e76a"}.icon-layout:before{content:"\e768"}.icon-usecase:before{content:"\e74a"}.icon-stack:before{content:"\e769"}.icon-branch:before{content:"\e74b"}.icon-chat:before{content:"\e74c"}.icon-chat-line:before,.icon-comment-line:before{content:"\e74f"}.icon-chat-dot:before{content:"\e750"}.icon-cube:before{content:"\e751"}.icon-database:before{content:"\f1c0"}.icon-align-left:before{content:"\e633"}:root{--input-control-fix-width-sm:2rem;--input-control-fix-width:4.375rem;--input-control-fix-width-lg:6.75rem}.input-control{position:relative;--input-control-prefix:8px;--input-control-suffix:8px}.input-control-prefix,.input-control-suffix{align-items:center;display:flex;height:100%;left:0;opacity:.5;padding-left:.5rem;padding-right:.5rem;position:absolute;top:0;white-space:nowrap;width:var(--input-control-prefix);z-index:1}.input-control-suffix{justify-content:flex-end;left:auto;right:0;width:var(--input-control-suffix)}.form-control:focus+.input-control-prefix,.form-control:focus+.input-control-suffix{opacity:1}.input-control>.form-control{padding-left:var(--input-control-prefix);padding-right:var(--input-control-suffix)}.input-control>select.form-control{background-position-x:calc(100% - var(--input-control-suffix) - 8px);padding-right:calc(var(--input-control-suffix) + 20px)}.has-prefix{--input-control-prefix:var(--input-control-fix-width)}.has-suffix{--input-control-suffix:var(--input-control-fix-width)}.has-prefix-sm{--input-control-prefix:var(--input-control-fix-width-sm)}.has-suffix-sm{--input-control-suffix:var(--input-control-fix-width-sm)}.has-prefix-lg{--input-control-prefix:var(--input-control-fix-width-lg)}.has-suffix-lg{--input-control-suffix:var(--input-control-fix-width-lg)}.has-prefix-icon{--input-control-prefix:32px}.has-suffix-icon{--input-control-suffix:32px}.input-control.has-prefix-icon{--input-control-prefix:32px}.input-control.has-suffix-icon{--input-control-suffix:32px}.input-control.has-prefix-icon>.input-control-prefix,.input-control.has-suffix-icon>.input-control-suffix{justify-content:center;padding:0}.input-control.size-sm>.form-control,.input-control.size-sm>.input-control-prefix,.input-control.size-sm>.input-control-suffix{font-size:.75rem;line-height:1rem}.input-control.size-lg>.form-control,.input-control.size-lg>.input-control-prefix,.input-control.size-lg>.input-control-suffix{font-size:1rem;line-height:1.5rem}:root{--label-bg:rgba(var(--color-canvas-rgb),.1);--label-border-color:var(--color-gray-300);--label-color:var(--color-gray-500);--label-radius:var(--radius)}.label{align-items:center;background-color:var(--label-bg);border-radius:var(--label-radius);color:var(--label-color);display:inline-flex;font-size:.75rem;height:1.25rem;justify-content:center;line-height:1rem;min-width:1.25rem;padding-left:.25rem;padding-right:.25rem;white-space:pre-line;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--label-border-color)}.label.size-lg{font-size:.8125rem;height:1.5rem;line-height:1.25rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}.label.size-sm{height:1rem;min-width:1rem}.label-dot{aspect-ratio:1/1;border-radius:var(--radius-full);height:.5rem;min-width:0;padding-left:0;padding-right:0}.caret,.caret-down,.caret-left,.caret-right,.caret-up{align-items:center;display:inline-flex;height:.75rem;justify-content:center;position:relative;width:.75rem}.caret-down:before,.caret-left:before,.caret-right:before,.caret-up:before,.caret:before{display:block;height:.35rem;transform-origin:center;width:.35rem;--tw-translate-y:-1px;--tw-rotate:45deg;border-color:currentColor;border-width:0 1px 1px 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-content:"";content:var(--tw-content)}.caret-left:before{--tw-translate-x:0.125rem;--tw-translate-y:0px;--tw-rotate:135deg}.caret-left:before,.caret-right:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.caret-right:before{--tw-translate-x:-0.125rem;--tw-translate-y:0px;--tw-rotate:-45deg}.caret-up:before{--tw-translate-y:0.125rem;--tw-rotate:225deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:focus>.caret,:hover>.caret{opacity:inherit}.disabled .caret,.readonly .caret{opacity:var(--caret-opacity,.5)}.magnifier{display:inline-block;height:1em;position:relative;width:1em}.magnifier:after,.magnifier:before{border-radius:var(--radius-full);content:"";display:block;position:absolute}.magnifier:before{border:1px solid;height:.75em;width:.75em}.magnifier:after{height:1px;left:.55em;top:.7em;width:.5em;--tw-rotate:45deg;background-color:currentColor;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close{aspect-ratio:1/1;display:block;position:relative;width:1em}.close:after,.close:before{content:"";display:block;height:1px;left:0;position:absolute;width:100%;--tw-rotate:45deg;background-color:currentColor;border-radius:var(--radius-full);top:calc(50% - .5px)}.close:after,.close:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close:after{--tw-rotate:-45deg}.search-box.compact.has-prefix-icon{--input-control-prefix:24px}.search-box.compact.has-suffix-icon{--input-control-suffix:24px}:root{--menu-bg:var(--color-canvas);--menu-active-bg:var(--color-primary-500);--menu-active-color:var(--color-canvas);--menu-selected-bg:var(--color-primary-50);--menu-selected-color:var(--color-primary-500);--menu-icon-opacity:.5;--menu-icon-margin:1.75rem;--menu-min-width:3rem;--menu-heading-color:var(--color-gray-500)}.menu{background:var(--menu-bg);max-width:var(--menu-max-width);min-width:var(--menu-min-width);padding:.5rem}.menu-wrapper{display:flex;flex-direction:column;min-height:0}.menu-wrapper>.menu{flex:1 1 auto;min-height:0;overflow:auto}.menu-item>.item-inner,.menu-item>a{align-items:center;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;gap:.5rem;justify-content:space-between;overflow:hidden;padding:.25rem .5rem;position:relative;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.menu-item>.selected{background:var(--menu-selected-bg);color:var(--menu-selected-color)}.menu-item>.active,.menu-item>a.hover,.menu-item>a:hover{background:var(--menu-active-bg);color:var(--menu-active-color)}.menu-item.disabled>a:hover,.menu-item>a.disabled:hover{background-color:inherit;color:inherit}.menu-item>a>.item-title{flex:1 1 auto}.menu>.divider{margin:.5rem .25rem}.menu-heading{align-items:center;color:var(--menu-heading-color);display:flex;font-size:.75rem;font-weight:700;height:2rem;line-height:1rem;padding-left:.25rem;padding-right:.25rem}.has-icons>.menu-item>a>.item-icon{align-items:center;display:flex;height:1rem;justify-content:center;opacity:var(--menu-icon-opacity);width:1rem}.menu-nested{--menu-indent:10px}.menu-nested .menu{background-color:transparent;margin-bottom:-.5rem;margin-left:var(--menu-indent);margin-top:-.5rem;padding-right:0}.menu-nested .menu-item>.item-inner{padding-left:0}.menu.compact .menu-item>a{padding-bottom:.125rem;padding-top:.125rem}.menu.compact .menu-heading{height:1.75rem}.search-menu-header{padding:.5rem .5rem .125rem}.search-menu-footer{padding:.125rem .5rem .5rem}.search-menu .item.is-not-match,.search-menu-footer:empty,.search-menu-header:empty{display:none}.search-menu .item.is-not-match.has-match-child{display:list-item}.search-menu .item.is-not-match.has-match-child>.item-inner{opacity:.5;pointer-events:none}.search-menu.no-toggle-on-search .nested-toggle-icon{pointer-events:none}.search-menu .is-match-keys{font-weight:700;text-decoration-line:underline}.search-menu-no-match-hint{display:none;font-size:.75rem;line-height:1rem;padding:.5rem;--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.no-match-child .search-menu-no-match-hint{display:block}.no-match-child>.menu{display:none}:root{--alert-bg:var(--color-surface)}.alert{align-items:center;background-color:var(--alert-bg);border-radius:var(--radius);display:flex;gap:.75rem;padding:.5rem .75rem}.alert-content{display:flex;flex:1 1 auto;flex-direction:column;gap:1rem}.alert-close{margin-bottom:-.375rem;margin-right:-.5rem;margin-top:-.375rem}.alert-link{color:inherit;font-weight:700}.alert-link:hover{color:inherit;text-decoration-line:underline}.alert-heading{font-weight:700;margin:0}.alert-text{flex:1 1 auto;white-space:pre-line}.alert-actions{align-items:center;display:flex;gap:.5rem}.close{aspect-ratio:1/1;display:block;position:relative;width:1em}.close:after,.close:before{content:"";display:block;height:1px;left:0;position:absolute;width:100%;--tw-rotate:45deg;background-color:currentColor;border-radius:var(--radius-full);top:calc(50% - .5px)}.close:after,.close:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close:after{--tw-rotate:-45deg}.messagers{align-items:flex-end;bottom:0;display:flex;flex-direction:column;gap:.5rem;justify-content:flex-end;left:0;padding:1rem;pointer-events:none;position:fixed;right:0;top:0;z-index:1900}.messagers-top-left,.messagers-top-right{justify-content:flex-start}.messagers-bottom-left,.messagers-top-left{align-items:flex-start}.messagers-bottom,.messagers-center,.messagers-top{align-items:center}.messagers-top,.messagers-top-left,.messagers-top-right{justify-content:flex-start}.messagers-center{justify-content:center}.messager{background-color:rgba(var(--color-inverse-rgb),.8);pointer-events:auto;--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity));--tw-shadow:var(--shadow-xl);--tw-shadow-colored:var(--shadow-xl);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-duration:.3s}:root{--progress-radius:var(--radius);--progress-striped-size:40px;--progress-bg:var(--color-surface);--progress-bar-color:var(--color-primary-500)}.progress{background:var(--progress-bg);border-radius:var(--progress-radius);display:flex;height:1.25rem}.progress-bar{background:var(--progress-bar-color);height:100%;transition-duration:.5s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-striped>.progress-bar{background-image:linear-gradient(45deg,rgba(var(--color-canvas-rgb),.15) 25%,transparent 25%,transparent 50%,rgba(var(--color-canvas-rgb),.15) 50%,rgba(var(--color-canvas-rgb),.15) 75%,transparent 75%,transparent);background-size:var(--progress-striped-size) var(--progress-striped-size)}.progress>.progress-bar:first-child{border-bottom-left-radius:inherit;border-top-left-radius:inherit}.progress>.progress-bar:last-child{border-bottom-right-radius:inherit;border-top-right-radius:inherit}.progress.active .progress-bar{animation:progress-bar-stripes 2s linear infinite}@keyframes progress-bar-stripes{0%{background-position:40px 0}to{background-position:0 0}}:root{--scrollbar-size:10px;--scrollbar-opacity:.6;--scrollbar-bg:rgba(var(--color-inverse-rgb),.15);--scrollbar-inset:inset 0 0 0 1px rgba(var(--color-inverse-rgb),.05);--scrollbar-bar-bg:rgba(var(--color-inverse-rgb),.3);--scrollbar-hover-bg:rgba(var(--color-inverse-rgb),.4);--scrollbar-drag-bg:rgba(var(--color-inverse-rgb),.5);--scrollbar-radius:var(--radius-sm);--scrollbar-duration:.7s}::-webkit-scrollbar{height:var(--scrollbar-size);width:var(--scrollbar-size)}::-webkit-scrollbar-track{box-shadow:var(--scrollbar-shadow);-webkit-transition:background-color var(--scrollbar-duration);transition:background-color var(--scrollbar-duration)}::-webkit-scrollbar-track:hover,:hover::-webkit-scrollbar-track{background:var(--scrollbar-bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar-bar-bg);border-radius:var(--scrollbar-radius);min-height:var(--scrollbar-size);-webkit-transition:var(--scrollbar-duration);transition:var(--scrollbar-duration);-webkit-transition-property:background-color;transition-property:background-color}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover-bg)}::-webkit-scrollbar-thumb:active{background:var(--scrollbar-drag-bg)}@-moz-document url-prefix(){.scrollbar-thin{scrollbar-width:thin}}.scrollbar-thin::-webkit-scrollbar{height:calc(var(--scrollbar-size)/2);width:calc(var(--scrollbar-size)/2)}.scrollbar-hover::-webkit-scrollbar,.scrollbar-hover::-webkit-scrollbar-thumb,.scrollbar-hover::-webkit-scrollbar-track{visibility:hidden}.scrollbar-hover:hover::-webkit-scrollbar,.scrollbar-hover:hover::-webkit-scrollbar-thumb,.scrollbar-hover:hover::-webkit-scrollbar-track{visibility:visible}:root{--avatar-radius:12.5%;--avatar-bg:var(--color-surface)}.avatar{align-items:center;aspect-ratio:1/1;background:var(--avatar-bg);border-radius:var(--avatar-radius);display:inline-flex;justify-content:center;overflow:hidden;width:2rem}.avatar>img{height:100%;margin:0;-o-object-fit:cover;object-fit:cover;width:100%}.avatar.size-xs{width:1.25rem}.avatar.size-sm,.avatar.size-xs{font-size:.75rem;line-height:1rem}.avatar.size-sm{width:1.5rem}.avatar.size-lg{font-size:1.5rem;line-height:2rem;width:3rem}.avatar.size-xl{font-size:2.25rem;line-height:2.5rem;width:5rem}.avatar-group{display:flex;gap:.625rem}.avatar-group>.avatar{box-shadow:0 0 0 1px var(--color-canvas)}.avatar-group>*+*{margin-left:-1rem}.avatar-group.size-xs>*+*{margin-left:-.75rem}.avatar-group.size-sm>*+*{margin-left:-.875rem}.avatar-group.size-lg>*+*{margin-left:-1.25rem}.avatar-group.size-xl>*+*{margin-left:-1.5rem}.btn-group{display:flex;gap:1px}.btn-group>.btn.active{z-index:1}.btn-group>.btn:focus-within,.btn-group>.btn:hover{z-index:2}.btn-group>.btn.disabled,.btn-group>.btn:disabled{z-index:0}.btn-group>.btn:not(:first-child){border-bottom-left-radius:var(--radius-none);border-left-color:rgba(var(--color-canvas-rgb),.2);border-left-width:1px;border-top-left-radius:var(--radius-none)}.btn-group>.btn:not(:first-child):before{left:-1px}.btn-group>.btn:not(:last-child){border-bottom-right-radius:var(--radius-none);border-top-right-radius:var(--radius-none)}.color-picker-heading{align-items:center;font-weight:700;justify-content:space-between;margin-bottom:-.25rem;padding:.5rem}.color-picker-heading,.color-picker-row{display:flex;flex-direction:row}.color-picker-row{flex-wrap:wrap;gap:.5rem;padding:.75rem}.color-picker-item{align-items:center;border-radius:var(--radius-full);display:flex;height:1.25rem;justify-content:center;padding-left:.125rem;padding-right:.125rem;width:1.25rem;--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.pick-container{left:0;pointer-events:none;position:absolute;top:0;z-index:1600}.pick-pop{display:flex;flex-direction:column;opacity:0;pointer-events:auto;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);z-index:1200}.pick-pop.in{opacity:1}.date-picker-menu{--menu-bg:none}.date-picker-menu .mini-calendar{margin-top:-.75rem}.date-pick-menu-month,.date-pick-menu-years{display:flex;flex-direction:row;flex-wrap:wrap;gap:1px;max-height:237px;padding-bottom:.5rem;padding-left:.5rem;padding-right:.5rem}.date-pick-menu-years>.btn{width:2.5rem}.date-pick-menu-years>.btn.is-current{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-100-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.date-pick-menu-month>.btn.active,.date-pick-menu-years>.btn.active{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-500-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.date-pick-menu-month>.btn{width:3rem}.date-picker-menu-footer{border-top-width:1px;display:flex;flex-direction:row;padding:.25rem}.date-picker-menu-footer>.toolbar{flex:1 1 auto;justify-content:center}.date-picker-menu>.menu{border-right-width:1px}.date-picker-menu .menu-item{--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.time-picker-menu{max-height:inherit}.time-picker-menu .menu-item>a{justify-content:center}.datetime-picker-menu{max-height:inherit}.mini-calendar{padding:.5rem}.mini-calendar>.row>.col{align-items:center;justify-content:center;width:14.2857%}.mini-calendar-day{height:2rem}.mini-calendar-day.disabled{pointer-events:none;--tw-bg-opacity:1;background-color:rgba(var(--color-gray-200-rgb),var(--tw-bg-opacity));opacity:.5}.mini-calendar-day>.btn{width:2rem}.mini-calendar-day.is-weekend>.btn{--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.mini-calendar-day.active>.btn,.mini-calendar-day.is-today>.btn{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-100-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.mini-calendar-day.selected>.btn{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-500-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.mini-calendar-day.is-out-month{opacity:.5}.i-time{border-color:currentColor;border-radius:50%;border-width:.08em;display:inline-block;height:1em;position:relative;width:1em}.i-time:after{border-color:currentColor;border-width:0 0 .08em .08em;height:.385em;left:.3846em;position:absolute;top:.08em;width:.385em;--tw-content:"";content:var(--tw-content)}.chevron-down,.chevron-left,.chevron-right,.chevron-up{align-items:center;display:inline-flex;height:1em;justify-content:center;position:relative;width:1em}.chevron-down:before,.chevron-left:before,.chevron-right:before,.chevron-up:before{display:block;height:.6923077em;transform-origin:center;width:.6923077em;--tw-translate-y:-0.125rem;--tw-rotate:45deg;border-color:currentColor;border-width:0 1px 1px 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-content:"";content:var(--tw-content)}.chevron-left:before{--tw-translate-y:0px;--tw-translate-x:0.125rem;--tw-rotate:135deg}.chevron-left:before,.chevron-right:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.chevron-right:before{--tw-translate-y:0px;--tw-translate-x:-0.125rem;--tw-rotate:-45deg}.chevron-up:before{--tw-translate-y:0.125rem;--tw-rotate:225deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.i-calendar{border-radius:2px;display:inline-block;height:.79em;margin-top:.16em;position:relative;width:1em}.i-calendar,.i-calendar:after,.i-calendar:before{border-color:currentColor;border-width:.08em}.i-calendar:after,.i-calendar:before{position:absolute;--tw-content:"";content:var(--tw-content)}.i-calendar:before{border-bottom-width:0;left:.15em;top:.307em;width:.6em}.i-calendar:after{border-bottom-width:0;border-top-width:0;height:.3077em;left:.17em;top:-.154em;width:.538em}:root{--modal-radius:var(--radius-lg);--modal-bg:rgba(var(--color-inverse-rgb),.4);--modal-sm:37.5rem;--modal-base:50rem;--modal-lg:75rem;--modal-xl:90rem}.modal{align-items:center;background-color:var(--modal-bg);bottom:0;display:none;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:1500}.modal.load-indicator:before{background-color:transparent;transition-property:none}.modal.loading:after{--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.modal.loading .modal-dialog{opacity:0!important}.modal.show{display:flex}.modal-no-backdrop{background-color:transparent;pointer-events:none}.modal-hide{opacity:0!important}.modal-dialog{background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity));pointer-events:auto;position:relative;--tw-bg-opacity:0.9;--tw-shadow:var(--shadow-2xl);--tw-shadow-colored:var(--shadow-2xl);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.05;--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);border-radius:var(--modal-radius);width:var(--modal-base)}.modal-content,.modal-dialog{max-height:100vh}.modal-content{display:flex;flex-direction:column;height:100%}.loading>.modal-dialog>.modal-content{opacity:0;visibility:hidden}.close{aspect-ratio:1/1;display:block;position:relative;width:1em}.close:after,.close:before{content:"";display:block;height:1px;left:0;position:absolute;width:100%;--tw-rotate:45deg;background-color:currentColor;border-radius:var(--radius-full);top:calc(50% - .5px)}.close:after,.close:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close:after{--tw-rotate:-45deg}.modal-header{align-items:center;display:flex;flex:none;flex-wrap:nowrap;gap:1rem;padding:1rem 1.25rem;position:relative}.modal-title{flex:1 1 auto;font-size:1rem;font-weight:700;line-height:1.5rem}.modal-actions{position:absolute;right:.75rem;top:.75rem;z-index:15}.modal-body{flex:1 1 auto;overflow:auto;padding:1rem 1.25rem}.modal-footer{align-items:center;display:flex;flex:none;gap:.75rem;padding:1.25rem}.modal-dialog.size-full,.modal-dialog[data-size=full]{height:100vh;width:100vw}.modal-dialog.size-sm,.modal-dialog[data-size=sm]{width:var(--modal-sm)}.modal-dialog.size-lg,.modal-dialog[data-size=lg]{width:var(--modal-lg)}.modal-dialog.size-xl,.modal-dialog[data-size=xl]{width:var(--modal-xl)}.modal-iframe{flex:1 1 auto;width:100%}.modal-trans{opacity:0;transition-duration:.2s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.modal-trans.in{opacity:1}.modal-trans>.modal-dialog{transition-property:transform,opacity;--tw-scale-x:.95;--tw-scale-y:.95;opacity:0;transition-duration:.3s}.modal-trans.in>.modal-dialog,.modal-trans>.modal-dialog{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-trans.in>.modal-dialog{--tw-scale-x:1;--tw-scale-y:1;opacity:1}.modal-alert .modal-footer{justify-content:flex-end}.modal-alert .modal-header{margin-bottom:-1rem}.modal-alert .modal-body{overflow-wrap:break-word;white-space:pre-line}.modal-alert .modal-actions+.modal-body{padding-right:3rem}.modal-alert .modal-header+.modal-actions+.modal-body{padding-right:1.25rem}.file-selector{gap:.5rem;width:100%}.file-selector,.file-selector-box{display:flex;flex-direction:column}.file-selector-box{border-style:dashed;border-width:1px;gap:0;height:auto;justify-content:center;position:relative;--tw-border-opacity:1;background-color:rgba(var(--color-primary-50-rgb),.3);border-color:rgba(var(--color-primary-400-rgb),var(--tw-border-opacity));padding:.5rem .75rem;--tw-ring-color:transparent;--state-color:rgba(var(--color-primary-500-rgb),.05)}.file-selector-box .text{--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.is-dragging .file-selector-box{border-style:solid}.file-selector-btn{align-items:center;display:flex;gap:.5rem;position:relative}.is-dragging .file-selector-btn{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-50-rgb),var(--tw-bg-opacity))}.file-selector-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;bottom:0;cursor:pointer;left:0;opacity:.1;position:absolute;right:0;top:0}.file-selector-tip{--tw-text-opacity:1;color:rgba(var(--color-gray-400-rgb),var(--tw-text-opacity))}.file-selector.is-mode-button{flex-direction:column-reverse}.file-selector-list.is-empty{display:none}.file-selector-item .item-avatar{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-50-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.file-selector-item .item-subtitle{--tw-text-opacity:1;color:rgba(var(--color-gray-400-rgb),var(--tw-text-opacity))}.file-selector-item .item-content{flex:none;margin-right:.25rem;max-width:100%}.file-selector-item>.listitem:hover{background-color:rgba(var(--color-gray-500-rgb),.05)}.file-selector-item.is-renaming .item-avatar+.item-content{max-width:calc(100% - 32px)}.file-selector-rename-text{max-width:100%;min-width:100px;position:relative}.file-selector-rename-text>div{overflow:hidden;pointer-events:none;visibility:hidden;white-space:nowrap}.file-selector-rename-input{bottom:0;left:0;position:absolute;right:0;top:0}.file-selector-grid{align-items:flex-start;border-color:transparent;border-radius:var(--radius);border-width:1px;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--file-selector-grid-gap);--tw-bg-opacity:1;background-color:rgba(var(--color-surface-light-rgb),var(--tw-bg-opacity));padding:.5rem}.file-selector-grid-item{height:var(--file-selector-grid-height)}.file-selector-grid-btn,.file-selector-grid-item{width:var(--file-selector-grid-width)}.file-selector-grid-btn{aspect-ratio:1/1;border-style:dashed;border-width:1px;display:flex;flex-direction:column;gap:0;height:auto;justify-content:center;--tw-border-opacity:1;background-color:rgba(var(--color-primary-50-rgb),.3);border-color:rgba(var(--color-primary-400-rgb),var(--tw-border-opacity));padding:.5rem;--tw-ring-color:transparent;--state-color:rgba(var(--color-primary-500-rgb),.05)}.file-selector-grid-btn .text{--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.file-selector-grid-item .listitem{flex-direction:column;height:100%;padding:0;position:relative;width:100%}.file-selector-grid-item .item-avatar{border-radius:var(--radius);border-width:1px;width:100%;--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.file-selector-grid-item .item-avatar.has-icon>.icon{font-size:calc(var(--file-selector-grid-width)/2)}.file-selector-grid-item .item-content,.file-selector-grid-item .toolbar{aspect-ratio:1/1;left:0;position:absolute;right:0;top:0;width:100%}.file-selector-grid-item .item-title{bottom:-1.25rem;font-size:.75rem;left:0;line-height:1rem;overflow:hidden;position:absolute;right:1.5rem;white-space:nowrap}.file-selector-grid-item .item-subtitle{border-radius:var(--radius-full);bottom:.25rem;left:.25rem;position:absolute;--tw-bg-opacity:1;background-color:rgba(var(--color-fore-rgb),var(--tw-bg-opacity));font-size:.75rem;line-height:1rem;padding-left:.25rem;padding-right:.25rem;--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity));opacity:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.file-selector-grid-item:hover .item-subtitle{opacity:1}.file-selector-grid-item .toolbar .btn[data-remove-file]{background-color:rgba(var(--color-inverse-rgb),.5);padding:.375rem;position:absolute;right:1px;top:1px;--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.file-selector-grid-item .toolbar .btn[data-rename-file]{bottom:-1.5rem;padding:0;position:absolute;right:0}.file-selector-grid .file-selector-rename{bottom:0;height:1.5rem;position:absolute;top:auto}.file-selector-grid .file-selector-rename-text{width:100%}.is-dragging .file-selector-grid{border-width:1px;--tw-border-opacity:1;border-color:rgba(var(--color-primary-400-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-primary-50-rgb),var(--tw-bg-opacity))}:root{--nav-radius:var(--radius);--nav-active-color:var(--color-primary-500);--nav-active-bg:var(--color-inherit);--nav-heading-color:var(--color-gray-500);--nav-gap:0.25rem;--nav-item-color:inherit;--nav-item-bg:transparent;--nav-item-padding:1rem;--nav-item-height:2rem;--nav-item-gap:0.75rem;--nav-divider-height:calc(var(--nav-item-height)/2);--nav-divider-margin:0.5rem}.nav{list-style-type:none;padding-left:0}.nav,.nav-item{align-items:center;display:flex;position:relative}.nav-item{gap:var(--nav-item-gap)}.nav-item>a{align-items:center;background-color:var(--nav-item-bg);color:var(--nav-item-color);cursor:pointer;display:flex;gap:var(--nav-gap);height:var(--nav-item-height);justify-content:center;padding-left:var(--nav-item-padding);padding-right:var(--nav-item-padding)}.nav-item>a>.text{white-space:nowrap}.nav-item>.active{font-weight:700;--nav-item-color:var(--nav-active-color);--nav-item-bg:var(--nav-active-bg)}.nav-item>.selected{--nav-item-color:var(--nav-selected-color);--nav-item-bg:var(--nav-selected-bg)}.nav-item>.disabled{--nav-item-color:var(--nav-disabled-color);--nav-item-bg:var(--nav-disabled-bg)}.nav-item>.disabled>*{opacity:var(--opacity-disabled)}.nav-divider,.nav>.divider{align-self:center;height:var(--nav-divider-height);margin-left:var(--nav-divider-margin);margin-right:var(--nav-divider-margin)}.nav-heading{align-items:center;color:var(--nav-heading-color);display:flex;font-weight:700;gap:.25rem;height:2rem;justify-content:center;padding-left:1rem;padding-right:1rem}.nav-space{flex:1 1 auto;width:1rem}.nav-compact{--nav-gap:0.25rem;--nav-item-gap:0.5rem;--nav-item-height:1.75rem;--nav-item-padding:0.5rem;--nav-divider-margin:0.25rem}.nav-primary>.nav-item{position:relative}.nav-primary>.nav-item:hover{z-index:10}.nav-primary>.nav-item+.nav-item{margin-left:-1px}.nav-primary>.nav-item>a{border-radius:var(--radius-none);border-width:1px}.nav-primary>.nav-item:first-child>a,.nav-primary>.nav-item:has(.nav-heading)+.nav-item>a{border-bottom-left-radius:var(--nav-radius);border-top-left-radius:var(--nav-radius)}.nav-primary>.nav-item:last-child>a{border-bottom-right-radius:var(--nav-radius);border-top-right-radius:var(--nav-radius)}.nav-primary>.nav-item>.active{--tw-text-opacity:1;background:var(--nav-active-color);border-color:var(--nav-active-color);color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.nav-primary>.nav-divider{display:none}.nav-secondary>.nav-item>a{border-radius:var(--radius-none);position:relative}.nav-secondary>.nav-item>a:after{bottom:-2px;display:block;height:2px;left:0;position:absolute;right:0;--tw-bg-opacity:1;background-color:rgba(var(--color-border-rgb),var(--tw-bg-opacity));--tw-content:"";content:var(--tw-content)}.nav-secondary>.nav-item>.active:after{background-color:currentColor}.nav-secondary>.nav-divider{margin:0 0 0 -1px}.nav-tabs>.nav-item>a{border-bottom-left-radius:var(--radius-none);border-bottom-right-radius:var(--radius-none);position:relative}.nav-tabs>.nav-item>a:after{border-color:transparent;border-width:1px;bottom:-1px;display:block;left:-1px;pointer-events:none;position:absolute;right:-1px;top:-1px;--tw-border-opacity:1;border-bottom-color:rgba(var(--color-border-rgb),var(--tw-border-opacity));--tw-content:"";border-top-left-radius:inherit;border-top-right-radius:inherit;content:var(--tw-content)}.nav-tabs>.nav-item>.active:after{--tw-border-opacity:1;border-color:rgba(var(--color-border-rgb),var(--tw-border-opacity));border-bottom-color:transparent}.nav-tabs>.nav-divider{margin:0 0 0 -1px}.nav-pills>.nav-item>a{border-radius:var(--radius-full)}.nav-pills>.nav-item>.active{--tw-text-opacity:1;background:var(--nav-active-color);border-color:var(--nav-active-color);color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.nav-steps{--nav-item-bg:var(--color-canvas);--nav-active-bg:var(--color-primary-500);--nav-active-color:var(--color-canvas);--nav-selected-bg:var(--color-secondary-500);--nav-selected-color:var(--color-canvas)}.nav-steps>.nav-item+.nav-item>a{padding-left:calc(var(--nav-item-padding) + var(--nav-item-height)/3)}.nav-steps>.nav-item>a:after,.nav-steps>.nav-item>a:before{border-style:solid;height:0;left:100%;position:absolute;width:0;z-index:2;--tw-content:"";border-color:transparent;border-left-color:var(--nav-item-bg,var(--color-canvas));border-width:calc(var(--nav-item-height)/2);border-left-width:calc(var(--nav-item-height)/3);border-right-width:0;content:var(--tw-content)}.nav-steps>.nav-item>a:before{background-color:transparent!important;border-left-color:var(--color-border);bottom:auto;left:calc(100% + 5.5px);opacity:1!important;right:auto;top:.4rem;transform:none;z-index:1;--nav-item-height:1.2rem}.nav-steps>.nav-item:has(+.nav-item>.active)>.selected:before,.nav-steps>.nav-item:has(+.nav-item>.selected)>.active:before,.nav-steps>.nav-item:last-child>a:after,.nav-steps>.nav-item:last-child>a:before{display:none}.nav-steps>.nav-item>a:hover{--nav-item-bg:var(--color-gray-100)}.nav-steps>.nav-item>.active:hover{--nav-item-bg:var(--color-primary-600)}.nav-steps>.nav-item>.selected:hover{--nav-item-bg:var(--color-secondary-600)}.nav-stacked{flex-direction:column}.nav-stacked>.nav-item{width:100%}.nav-stacked>.nav-heading,.nav-stacked>.nav-item>a{justify-content:flex-start;width:100%}.nav-stacked>.nav-divider{height:1px;margin:.5rem 0;width:100%}.nav-primary.nav-stacked>.nav-item>a{height:2.5rem}.nav-primary.nav-stacked>.nav-item+.nav-item{margin-left:0;margin-top:-1px}.nav-primary.nav-stacked>.nav-item:first-child>a{border-bottom-left-radius:0;border-top-left-radius:var(--nav-radius);border-top-right-radius:var(--nav-radius)}.nav-primary.nav-stacked>.nav-item:last-child>a{border-bottom-left-radius:var(--nav-radius);border-bottom-right-radius:var(--nav-radius);border-top-right-radius:0}.nav-secondary.nav-stacked>.nav-item>a:after{bottom:0;height:100%;left:auto;right:0;top:0;width:2px;--tw-bg-opacity:1;background-color:rgba(var(--color-border-rgb),var(--tw-bg-opacity))}.nav-secondary.nav-stacked>.nav-item>.active:after{background-color:currentColor}.nav-secondary.nav-stacked>.nav-divider{margin:0}.nav-tabs.nav-stacked>.nav-item>a{border-bottom-left-radius:var(--nav-radius);border-bottom-right-radius:var(--radius-none);border-top-right-radius:var(--radius-none);position:relative}.nav-tabs.nav-stacked>.nav-item>a:after{--tw-border-opacity:1;border-bottom-color:transparent;border-bottom-left-radius:inherit;border-right-color:rgba(var(--color-border-rgb),var(--tw-border-opacity));border-top-left-radius:inherit}.nav-tabs.nav-stacked>.nav-item>a.active:after{--tw-border-opacity:1;border-color:rgba(var(--color-border-rgb),var(--tw-border-opacity));border-right-color:transparent}.nav-tabs.nav-stacked>.nav-divider{margin:0}.nav-pills.nav-stacked>.nav-item+.nav-item{margin-top:.25rem}.nav-justified>.nav-item:not(.flex-none,.nav-divider){flex:1 1 auto}.nav-justified>.nav-item>a{width:100%}.arrow,.arrow:before{background:inherit;height:calc(var(--arrow-size)*1.4142);position:absolute;width:calc(var(--arrow-size)*1.4142)}.arrow{visibility:hidden;--arrow-size:5px}.arrow:before{border:inherit;content:"";visibility:visible;--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.arrow-top,.arrow-up{border-bottom:inherit;border-right:inherit;border-width:1px 0 0 1px;top:calc(1px - var(--arrow-size))}.white>.arrow-top,.white>.arrow-up{top:calc(0px - var(--arrow-size))}.arrow-bottom,.arrow-down{border-left:inherit;border-top:inherit;border-width:0 1px 1px 0;bottom:calc(1px - var(--arrow-size))}.white>.arrow-bottom,.white>.arrow-down{bottom:calc(0px - var(--arrow-size))}.arrow-left{border-right:inherit;border-top:inherit;border-width:0 0 1px 1px;left:calc(1px - var(--arrow-size))}.white>.arrow-left{left:calc(0px - var(--arrow-size))}.arrow-right{border-bottom:inherit;border-left:inherit;border-width:1px 1px 0 0;right:calc(1px - var(--arrow-size))}.white>.arrow-right{right:calc(0px - var(--arrow-size))}.popover{display:none;position:absolute;width:-moz-max-content;width:max-content}.popover.show{display:block}.popover-heading{align-items:center;border-top-left-radius:inherit;border-top-right-radius:inherit;display:flex;gap:1rem;height:2.5rem;justify-content:space-between;position:relative;z-index:1;--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity));padding-left:.75rem;padding-right:.5rem}.popover-title{flex:1 1 auto;font-weight:700}.popover-content{padding:.75rem;position:relative;z-index:1}.popover-arrow{z-index:0}.has-heading>.popover-arrow.arrow-top,.has-heading>.popover-arrow.arrow-up{--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity))}.popover>.btn-close{position:absolute;right:.5rem;top:.625rem;z-index:2}.btn-close+.popover-content{padding-right:3rem}.btn.with-popover-show{--tw-shadow:var(--shadow-inner);--tw-shadow-colored:var(--shadow-inner);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.with-popover-show[data-pop-placement=top]>.caret{--tw-rotate:180deg}.with-popover-show[data-pop-placement=left]>.caret,.with-popover-show[data-pop-placement=top]>.caret{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.with-popover-show[data-pop-placement=left]>.caret{--tw-rotate:90deg}.with-popover-show[data-pop-placement=right]>.caret{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.pager{align-items:center;display:flex;gap:.25rem;white-space:nowrap}.menu.pager-size-menu{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}.menu.pager-size-menu>.menu-item>a{margin:.125rem}.pager .pager-goto-group>.form-control{width:3rem}.pager .pager-goto-group>.input-group-addon{border-width:1px;--tw-border-opacity:1;border-color:rgba(var(--color-gray-300-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity))}.pager>.pager-nav.active{--tw-text-opacity:1;box-shadow:0 0 0 1px var(--color-primary-500);color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.panel{border-radius:var(--radius);overflow:hidden;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.05}.panel-heading{background-color:var(--panel-heading-bg);flex-wrap:nowrap;gap:1rem;justify-content:space-between;padding:.5rem 1rem}.panel-heading,.panel-title{align-items:center;display:flex}.panel-title{font-weight:700;gap:.5rem;margin:0}.panel-actions{align-items:center;display:flex;margin-right:-.5rem}.panel-body{padding:.75rem 1rem}.panel-footer{align-items:center;background-color:var(--panel-footer-bg);display:flex;gap:.5rem;padding:.5rem 1rem}.size-sm .panel-body,.size-sm .panel-footer,.size-sm .panel-heading{padding:.375rem .75rem}.size-lg .panel-body,.size-lg .panel-footer,.size-lg .panel-heading{padding:1rem 1.25rem}.picker{position:relative}.picker-select{align-items:center;gap:.25rem;justify-content:space-between}.picker-select,.picker-select.form-control{display:flex}.picker-select-placeholder{flex:1 1 auto;--tw-text-opacity:1;color:rgba(var(--color-placeholder-rgb),var(--tw-text-opacity))}.picker-select-multi .picker-select-placeholder{padding-left:.25rem;padding-right:.25rem}.picker-single-selection{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap}.picker-deselect-btn{border-radius:var(--radius-full);padding:.25rem}.picker-deselect-btn:not(:hover){opacity:.7}.picker-select-multi.form-control{height:auto;min-height:32px;padding-left:.25rem}.picker-multi-selections{display:flex;flex-wrap:wrap;gap:.25rem;min-width:0}.picker-multi-selection{align-items:center;border-radius:var(--radius-full);border-width:1px;display:flex;max-width:100%;--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity));padding-left:.5rem}.readonly .picker-multi-selection{padding-right:.5rem}.picker-multi-selection>.text{max-width:180px;min-width:0;overflow:clip;white-space:nowrap}.picker-no-search{cursor:default}.picker-menu-list{border-style:none;flex:1 1 auto;min-height:0;overflow-y:auto;--tw-shadow:var(--shadow-none);--tw-shadow-colored:var(--shadow-none);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.picker-menu-search+.picker-menu-list.menu{margin-top:-.125rem;padding-top:0}.picker-menu-list.tree{padding:.5rem}.picker-menu-list .tree-item>.selected .item-content{font-weight:400}.picker-menu .search-menu-footer{border-top-width:1px;padding-bottom:.25rem;padding-top:.25rem}.picker-search-input{border-color:transparent;height:1.75rem;outline-width:0!important;padding-left:0;padding-right:2rem;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.picker-search{flex:none;position:relative;width:100%}.picker-search>.magnifier{opacity:.5;position:absolute;right:0;top:.5rem}.picker-search-clear.btn{cursor:pointer;height:1.25rem;position:absolute;right:0;top:.25rem;width:1.25rem}.picker-search.is-inline{min-width:64px;width:4rem}.is-inline>.picker-search-input{height:1.25rem;min-width:64px;padding-left:.25rem;padding-right:.25rem}.picker-search-measure{height:0;left:0;overflow:hidden;position:absolute;top:0;white-space:nowrap}:root{--table-head-bg:var(--color-surface);--table-striped-color:var(--color-gray-50);--table-hover-color:rgba(var(--color-primary-500-rgb),.05);--table-border-color:var(--color-border)}.table{border-color:var(--table-border-color);width:100%}.table>thead{background-color:var(--table-head-bg)}.table>*>tr{border-bottom-width:1px}.table>*>tr>*{padding:.5rem 1rem}.table-striped>tbody>tr:nth-child(2n){background:var(--table-striped-color)}.table-hover>tbody>tr:hover>*{background:var(--table-hover-color)}.table.bordered>*>tr>*{border-width:1px}.table.borderless>*>tr,.table.borderless>*>tr>*{border-style:none}.condensed>*>tr>*{padding:.375rem .75rem}.table-fixed{table-layout:fixed}.table-fixed>*>tr>*{overflow:hidden;white-space:nowrap}.toolbar{align-items:center;display:flex;position:relative}.toolbar>.divider{margin:.5rem;width:1px;--tw-bg-opacity:1;background-color:rgba(var(--color-border-rgb),var(--tw-bg-opacity))}.toolbar-space{flex:1 1 auto;height:1px;width:1px}.toolbar>.dropdown.show{align-items:center;display:flex;position:relative}:root{--tooltip-bg:var(--skin-color,var(--color-inverse));--tooltip-text:var(--skin-text,var(--color-canvas));--tooltip-arrow:6px;--tooltip-delay:0.5s}.hint,[class*=" hint-"],[class^=hint-]{position:relative}.hint:before,[class*=" hint-"]:before,[class^=hint-]:before{border-style:solid;height:0;position:absolute;width:0;--tw-content:"";border-color:var(--tooltip-bg) transparent transparent transparent;border-width:var(--tooltip-arrow) var(--tooltip-arrow) 0 var(--tooltip-arrow);content:var(--tw-content);margin-bottom:calc(0px - var(--tooltip-arrow))}.hint:after,[class*=" hint-"]:after,[class^=hint-]:after{background-color:var(--tooltip-bg);border-color:var(--tooltip-color);border-radius:var(--radius);color:var(--tooltip-text);font-size:.75rem;line-height:1rem;max-width:28rem;overflow:hidden;padding:.25rem .5rem;position:absolute;white-space:nowrap;--tw-shadow:var(--shadow);--tw-shadow-colored:var(--shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-content:attr(data-hint);content:var(--tw-content);text-shadow:0 1px 0 var(--tooltip-bg)}.hint:after,.hint:before,[class*=" hint-"]:after,[class*=" hint-"]:before,[class^=hint-]:after,[class^=hint-]:before{bottom:100%;left:50%;opacity:0;pointer-events:none;transition-delay:0s;transition-duration:.15s;transition-property:opacity,visibility;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1);visibility:hidden;z-index:1800;--tw-translate-x:-50%;--tw-translate-y:calc(var(--tooltip-arrow)*-1);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hint:hover:after,.hint:hover:before,[class*=" hint-"]:hover:after,[class*=" hint-"]:hover:before,[class^=hint-]:hover:after,[class^=hint-]:hover:before{opacity:1;transition-delay:var(--tooltip-delay);visibility:visible}.hint-bottom:before{border-color:transparent transparent var(--tooltip-bg) transparent;border-width:0 var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow);margin-bottom:auto;margin-top:calc(0px - var(--tooltip-arrow))}.hint-bottom:after,.hint-bottom:before{bottom:auto;top:100%;--tw-translate-y:var(--tooltip-arrow);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hint-left:before{border-color:transparent transparent transparent var(--tooltip-bg);border-width:var(--tooltip-arrow) 0 var(--tooltip-arrow) var(--tooltip-arrow);margin-bottom:auto;margin-right:calc(0px - var(--tooltip-arrow))}.hint-left:after,.hint-left:before{bottom:50%;left:auto;right:100%;--tw-translate-x:calc(var(--tooltip-arrow)*-1);--tw-translate-y:50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hint-right:before{border-color:transparent var(--tooltip-bg) transparent;border-width:var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow) 0;margin-bottom:auto;margin-left:calc(0px - var(--tooltip-arrow))}.hint-right:after,.hint-right:before{bottom:50%;left:100%;--tw-translate-x:var(--tooltip-arrow);--tw-translate-y:50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hint-lg:after,.hint-sm +/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{border-color:rgb(var(--color-gray-200-rgb));border-style:solid;border-width:0;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:-apple-system,Noto Sans,Helvetica Neue,Helvetica,Nimbus Sans L,Arial,Liberation Sans,PingFang SC,Hiragino Sans GB,Noto Sans CJK SC,Source Han Sans SC,Source Han Sans CN,Microsoft YaHei,Wenquanyi Micro Hei,WenQuanYi Zen Hei,ST Heiti,SimHei,WenQuanYi Zen Hei Sharp,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:rgb(var(--color-gray-400-rgb));opacity:1}input::placeholder,textarea::placeholder{color:rgb(var(--color-gray-400-rgb));opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}:root{--screen-sm:640px;--screen-md:768px;--screen-lg:1024px;--screen-xl:1280px;--screen-2xl:1536px;--color-gray-50:#f8fafc;--color-gray-100:#f1f5f9;--color-gray-200:#e2e8f0;--color-gray-300:#cbd5e1;--color-gray-400:#94a3b8;--color-gray-500:#64748b;--color-gray-600:#475569;--color-gray-700:#334155;--color-gray-800:#1e293b;--color-gray-900:#0f172a;--color-gray-950:#020617;--color-gray-50-rgb:248,250,252;--color-gray-100-rgb:241,245,249;--color-gray-200-rgb:226,232,240;--color-gray-300-rgb:203,213,225;--color-gray-400-rgb:148,163,184;--color-gray-500-rgb:100,116,139;--color-gray-600-rgb:71,85,105;--color-gray-700-rgb:51,65,85;--color-gray-800-rgb:30,41,59;--color-gray-900-rgb:15,23,42;--color-gray-950-rgb:2,6,23;--color-primary-50:#eff6ff;--color-primary-100:#dbeafe;--color-primary-200:#bfdbfe;--color-primary-300:#93c5fd;--color-primary-400:#60a5fa;--color-primary-500:#3b82f6;--color-primary-600:#2563eb;--color-primary-700:#1d4ed8;--color-primary-800:#1e40af;--color-primary-900:#1e3a8a;--color-primary-950:#172554;--color-primary-50-rgb:239,246,255;--color-primary-100-rgb:219,234,254;--color-primary-200-rgb:191,219,254;--color-primary-300-rgb:147,197,253;--color-primary-400-rgb:96,165,250;--color-primary-500-rgb:59,130,246;--color-primary-600-rgb:37,99,235;--color-primary-700-rgb:29,78,216;--color-primary-800-rgb:30,64,175;--color-primary-900-rgb:30,58,138;--color-primary-950-rgb:23,37,84;--color-secondary-50:#f0f9ff;--color-secondary-100:#e0f2fe;--color-secondary-200:#bae6fd;--color-secondary-300:#7dd3fc;--color-secondary-400:#38bdf8;--color-secondary-500:#0ea5e9;--color-secondary-600:#0284c7;--color-secondary-700:#0369a1;--color-secondary-800:#075985;--color-secondary-900:#0c4a6e;--color-secondary-950:#082f49;--color-secondary-50-rgb:240,249,255;--color-secondary-100-rgb:224,242,254;--color-secondary-200-rgb:186,230,253;--color-secondary-300-rgb:125,211,252;--color-secondary-400-rgb:56,189,248;--color-secondary-500-rgb:14,165,233;--color-secondary-600-rgb:2,132,199;--color-secondary-700-rgb:3,105,161;--color-secondary-800-rgb:7,89,133;--color-secondary-900-rgb:12,74,110;--color-secondary-950-rgb:8,47,73;--color-success-50:#f0fdf4;--color-success-100:#dcfce7;--color-success-200:#bbf7d0;--color-success-300:#86efac;--color-success-400:#4ade80;--color-success-500:#22c55e;--color-success-600:#16a34a;--color-success-700:#15803d;--color-success-800:#166534;--color-success-900:#14532d;--color-success-950:#052e16;--color-success-50-rgb:240,253,244;--color-success-100-rgb:220,252,231;--color-success-200-rgb:187,247,208;--color-success-300-rgb:134,239,172;--color-success-400-rgb:74,222,128;--color-success-500-rgb:34,197,94;--color-success-600-rgb:22,163,74;--color-success-700-rgb:21,128,61;--color-success-800-rgb:22,101,52;--color-success-900-rgb:20,83,45;--color-success-950-rgb:5,46,22;--color-warning-50:#fffbeb;--color-warning-100:#fef3c7;--color-warning-200:#fde68a;--color-warning-300:#fcd34d;--color-warning-400:#fbbf24;--color-warning-500:#f59e0b;--color-warning-600:#d97706;--color-warning-700:#b45309;--color-warning-800:#92400e;--color-warning-900:#78350f;--color-warning-950:#451a03;--color-warning-50-rgb:255,251,235;--color-warning-100-rgb:254,243,199;--color-warning-200-rgb:253,230,138;--color-warning-300-rgb:252,211,77;--color-warning-400-rgb:251,191,36;--color-warning-500-rgb:245,158,11;--color-warning-600-rgb:217,119,6;--color-warning-700-rgb:180,83,9;--color-warning-800-rgb:146,64,14;--color-warning-900-rgb:120,53,15;--color-warning-950-rgb:69,26,3;--color-danger-50:#fef2f2;--color-danger-100:#fee2e2;--color-danger-200:#fecaca;--color-danger-300:#fca5a5;--color-danger-400:#f87171;--color-danger-500:#ef4444;--color-danger-600:#dc2626;--color-danger-700:#b91c1c;--color-danger-800:#991b1b;--color-danger-900:#7f1d1d;--color-danger-950:#450a0a;--color-danger-50-rgb:254,242,242;--color-danger-100-rgb:254,226,226;--color-danger-200-rgb:254,202,202;--color-danger-300-rgb:252,165,165;--color-danger-400-rgb:248,113,113;--color-danger-500-rgb:239,68,68;--color-danger-600-rgb:220,38,38;--color-danger-700-rgb:185,28,28;--color-danger-800-rgb:153,27,27;--color-danger-900-rgb:127,29,29;--color-danger-950-rgb:69,10,10;--color-important-50:#fdf2f8;--color-important-100:#fce7f3;--color-important-200:#fbcfe8;--color-important-300:#f9a8d4;--color-important-400:#f472b6;--color-important-500:#ec4899;--color-important-600:#db2777;--color-important-700:#be185d;--color-important-800:#9d174d;--color-important-900:#831843;--color-important-950:#500724;--color-important-50-rgb:253,242,248;--color-important-100-rgb:252,231,243;--color-important-200-rgb:251,207,232;--color-important-300-rgb:249,168,212;--color-important-400-rgb:244,114,182;--color-important-500-rgb:236,72,153;--color-important-600-rgb:219,39,119;--color-important-700-rgb:190,24,93;--color-important-800-rgb:157,23,77;--color-important-900-rgb:131,24,67;--color-important-950-rgb:80,7,36;--color-special-50:#faf5ff;--color-special-100:#f3e8ff;--color-special-200:#e9d5ff;--color-special-300:#d8b4fe;--color-special-400:#c084fc;--color-special-500:#a855f7;--color-special-600:#9333ea;--color-special-700:#7e22ce;--color-special-800:#6b21a8;--color-special-900:#581c87;--color-special-950:#3b0764;--color-special-50-rgb:250,245,255;--color-special-100-rgb:243,232,255;--color-special-200-rgb:233,213,255;--color-special-300-rgb:216,180,254;--color-special-400-rgb:192,132,252;--color-special-500-rgb:168,85,247;--color-special-600-rgb:147,51,234;--color-special-700-rgb:126,34,206;--color-special-800-rgb:107,33,168;--color-special-900-rgb:88,28,135;--color-special-950-rgb:59,7,100;--color-inherit:inherit;--color-transparent:transparent;--color-current:currentColor;--color-black:#000;--color-white:#fff;--color-canvas:#fff;--color-canvas-light:#fff;--color-canvas-dark:#f8fafc;--color-inverse:#000;--color-surface:#f1f5f9;--color-surface-light:#f8fafc;--color-surface-strong:#e2e8f0;--color-fore:#1e293b;--color-fore-in-light:#1e293b;--color-fore-in-dark:#fff;--color-focus:#bfdbfe;--color-link:#3b82f6;--color-link-hover:#2563eb;--color-link-visited:#1d4ed8;--color-link-active:#1e40af;--color-placeholder:#94a3b8;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-border-light:#f1f5f9;--color-black-rgb:0,0,0;--color-white-rgb:255,255,255;--color-canvas-rgb:255,255,255;--color-canvas-light-rgb:255,255,255;--color-canvas-dark-rgb:248,250,252;--color-inverse-rgb:0,0,0;--color-surface-rgb:241,245,249;--color-surface-light-rgb:248,250,252;--color-surface-strong-rgb:226,232,240;--color-fore-rgb:30,41,59;--color-fore-in-light-rgb:30,41,59;--color-fore-in-dark-rgb:255,255,255;--color-focus-rgb:191,219,254;--color-link-rgb:59,130,246;--color-link-hover-rgb:37,99,235;--color-link-visited-rgb:29,78,216;--color-link-active-rgb:30,64,175;--color-placeholder-rgb:148,163,184;--color-border-rgb:226,232,240;--color-border-strong-rgb:203,213,225;--color-border-light-rgb:241,245,249;--radius-none:0px;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.1),0 0 2px -1px rgba(0,0,0,.05);--shadow:0 1px 4px 0 rgba(0,0,0,.15),0 1px 2px -1px rgba(0,0,0,.1);--shadow-md:0 2px 6px -1px rgba(0,0,0,.2),0 1px 4px -2px rgba(0,0,0,.15);--shadow-lg:0 5px 15px -3px rgba(0,0,0,.2),0 2px 6px -4px rgba(0,0,0,.15);--shadow-xl:0 10px 25px -5px rgba(0,0,0,.2),0 4px 10px -6px rgba(0,0,0,.15);--shadow-2xl:0 10px 50px -10px rgba(0,0,0,.4),0 8px 20px -10px rgba(0,0,0,.3);--shadow-inner:inset 0 2px 4px 0 rgba(0,0,0,.05);--shadow-none:none;--space:0.25rem;--font-size-article:0.875rem;--font-size-root:16px;--font-size-page-lineHeight:1.5384615385}.dark{--color-gray-50:#020617;--color-gray-100:#0f172a;--color-gray-200:#1e293b;--color-gray-300:#334155;--color-gray-400:#475569;--color-gray-500:#64748b;--color-gray-600:#94a3b8;--color-gray-700:#cbd5e1;--color-gray-800:#e2e8f0;--color-gray-900:#f1f5f9;--color-gray-950:#f8fafc;--color-gray-50-rgb:2,6,23;--color-gray-100-rgb:15,23,42;--color-gray-200-rgb:30,41,59;--color-gray-300-rgb:51,65,85;--color-gray-400-rgb:71,85,105;--color-gray-500-rgb:100,116,139;--color-gray-600-rgb:148,163,184;--color-gray-700-rgb:203,213,225;--color-gray-800-rgb:226,232,240;--color-gray-900-rgb:241,245,249;--color-gray-950-rgb:248,250,252;--color-primary-50:#172554;--color-primary-100:#1e3a8a;--color-primary-200:#1e40af;--color-primary-300:#1d4ed8;--color-primary-400:#2563eb;--color-primary-500:#3b82f6;--color-primary-600:#60a5fa;--color-primary-700:#93c5fd;--color-primary-800:#bfdbfe;--color-primary-900:#dbeafe;--color-primary-950:#eff6ff;--color-primary-50-rgb:23,37,84;--color-primary-100-rgb:30,58,138;--color-primary-200-rgb:30,64,175;--color-primary-300-rgb:29,78,216;--color-primary-400-rgb:37,99,235;--color-primary-500-rgb:59,130,246;--color-primary-600-rgb:96,165,250;--color-primary-700-rgb:147,197,253;--color-primary-800-rgb:191,219,254;--color-primary-900-rgb:219,234,254;--color-primary-950-rgb:239,246,255;--color-secondary-50:#082f49;--color-secondary-100:#0c4a6e;--color-secondary-200:#075985;--color-secondary-300:#0369a1;--color-secondary-400:#0284c7;--color-secondary-500:#0ea5e9;--color-secondary-600:#38bdf8;--color-secondary-700:#7dd3fc;--color-secondary-800:#bae6fd;--color-secondary-900:#e0f2fe;--color-secondary-950:#f0f9ff;--color-secondary-50-rgb:8,47,73;--color-secondary-100-rgb:12,74,110;--color-secondary-200-rgb:7,89,133;--color-secondary-300-rgb:3,105,161;--color-secondary-400-rgb:2,132,199;--color-secondary-500-rgb:14,165,233;--color-secondary-600-rgb:56,189,248;--color-secondary-700-rgb:125,211,252;--color-secondary-800-rgb:186,230,253;--color-secondary-900-rgb:224,242,254;--color-secondary-950-rgb:240,249,255;--color-success-50:#052e16;--color-success-100:#14532d;--color-success-200:#166534;--color-success-300:#15803d;--color-success-400:#16a34a;--color-success-500:#22c55e;--color-success-600:#4ade80;--color-success-700:#86efac;--color-success-800:#bbf7d0;--color-success-900:#dcfce7;--color-success-950:#f0fdf4;--color-success-50-rgb:5,46,22;--color-success-100-rgb:20,83,45;--color-success-200-rgb:22,101,52;--color-success-300-rgb:21,128,61;--color-success-400-rgb:22,163,74;--color-success-500-rgb:34,197,94;--color-success-600-rgb:74,222,128;--color-success-700-rgb:134,239,172;--color-success-800-rgb:187,247,208;--color-success-900-rgb:220,252,231;--color-success-950-rgb:240,253,244;--color-warning-50:#451a03;--color-warning-100:#78350f;--color-warning-200:#92400e;--color-warning-300:#b45309;--color-warning-400:#d97706;--color-warning-500:#f59e0b;--color-warning-600:#fbbf24;--color-warning-700:#fcd34d;--color-warning-800:#fde68a;--color-warning-900:#fef3c7;--color-warning-950:#fffbeb;--color-warning-50-rgb:69,26,3;--color-warning-100-rgb:120,53,15;--color-warning-200-rgb:146,64,14;--color-warning-300-rgb:180,83,9;--color-warning-400-rgb:217,119,6;--color-warning-500-rgb:245,158,11;--color-warning-600-rgb:251,191,36;--color-warning-700-rgb:252,211,77;--color-warning-800-rgb:253,230,138;--color-warning-900-rgb:254,243,199;--color-warning-950-rgb:255,251,235;--color-danger-50:#450a0a;--color-danger-100:#7f1d1d;--color-danger-200:#991b1b;--color-danger-300:#b91c1c;--color-danger-400:#dc2626;--color-danger-500:#ef4444;--color-danger-600:#f87171;--color-danger-700:#fca5a5;--color-danger-800:#fecaca;--color-danger-900:#fee2e2;--color-danger-950:#fef2f2;--color-danger-50-rgb:69,10,10;--color-danger-100-rgb:127,29,29;--color-danger-200-rgb:153,27,27;--color-danger-300-rgb:185,28,28;--color-danger-400-rgb:220,38,38;--color-danger-500-rgb:239,68,68;--color-danger-600-rgb:248,113,113;--color-danger-700-rgb:252,165,165;--color-danger-800-rgb:254,202,202;--color-danger-900-rgb:254,226,226;--color-danger-950-rgb:254,242,242;--color-important-50:#500724;--color-important-100:#831843;--color-important-200:#9d174d;--color-important-300:#be185d;--color-important-400:#db2777;--color-important-500:#ec4899;--color-important-600:#f472b6;--color-important-700:#f9a8d4;--color-important-800:#fbcfe8;--color-important-900:#fce7f3;--color-important-950:#fdf2f8;--color-important-50-rgb:80,7,36;--color-important-100-rgb:131,24,67;--color-important-200-rgb:157,23,77;--color-important-300-rgb:190,24,93;--color-important-400-rgb:219,39,119;--color-important-500-rgb:236,72,153;--color-important-600-rgb:244,114,182;--color-important-700-rgb:249,168,212;--color-important-800-rgb:251,207,232;--color-important-900-rgb:252,231,243;--color-important-950-rgb:253,242,248;--color-special-50:#3b0764;--color-special-100:#581c87;--color-special-200:#6b21a8;--color-special-300:#7e22ce;--color-special-400:#9333ea;--color-special-500:#a855f7;--color-special-600:#c084fc;--color-special-700:#d8b4fe;--color-special-800:#e9d5ff;--color-special-900:#f3e8ff;--color-special-950:#faf5ff;--color-special-50-rgb:59,7,100;--color-special-100-rgb:88,28,135;--color-special-200-rgb:107,33,168;--color-special-300-rgb:126,34,206;--color-special-400-rgb:147,51,234;--color-special-500-rgb:168,85,247;--color-special-600-rgb:192,132,252;--color-special-700-rgb:216,180,254;--color-special-800-rgb:233,213,255;--color-special-900-rgb:243,232,255;--color-special-950-rgb:250,245,255;--color-canvas:#020617;--color-inverse:#fff;--color-surface:#1e293b;--color-surface-light:#0f172a;--color-surface-strong:#334155;--color-fore:#cbd5e1;--color-focus:#1e40af;--color-link:#3b82f6;--color-link-hover:#60a5fa;--color-link-visited:#93c5fd;--color-link-active:#bfdbfe;--color-placeholder:#475569;--color-border:#1e293b;--color-border-strong:#334155;--color-border-light:#0f172a;--color-canvas-rgb:2,6,23;--color-inverse-rgb:255,255,255;--color-surface-rgb:30,41,59;--color-surface-light-rgb:15,23,42;--color-surface-strong-rgb:51,65,85;--color-fore-rgb:203,213,225;--color-focus-rgb:30,64,175;--color-link-rgb:59,130,246;--color-link-hover-rgb:96,165,250;--color-link-visited-rgb:147,197,253;--color-link-active-rgb:191,219,254;--color-placeholder-rgb:71,85,105;--color-border-rgb:30,41,59;--color-border-strong-rgb:51,65,85;--color-border-light-rgb:15,23,42}.light-in-dark{--color-gray-50:#f8fafc;--color-gray-100:#f1f5f9;--color-gray-200:#e2e8f0;--color-gray-300:#cbd5e1;--color-gray-400:#94a3b8;--color-gray-500:#64748b;--color-gray-600:#475569;--color-gray-700:#334155;--color-gray-800:#1e293b;--color-gray-900:#0f172a;--color-gray-950:#020617;--color-gray-50-rgb:248,250,252;--color-gray-100-rgb:241,245,249;--color-gray-200-rgb:226,232,240;--color-gray-300-rgb:203,213,225;--color-gray-400-rgb:148,163,184;--color-gray-500-rgb:100,116,139;--color-gray-600-rgb:71,85,105;--color-gray-700-rgb:51,65,85;--color-gray-800-rgb:30,41,59;--color-gray-900-rgb:15,23,42;--color-gray-950-rgb:2,6,23;--color-primary-50:#eff6ff;--color-primary-100:#dbeafe;--color-primary-200:#bfdbfe;--color-primary-300:#93c5fd;--color-primary-400:#60a5fa;--color-primary-500:#3b82f6;--color-primary-600:#2563eb;--color-primary-700:#1d4ed8;--color-primary-800:#1e40af;--color-primary-900:#1e3a8a;--color-primary-950:#172554;--color-primary-50-rgb:239,246,255;--color-primary-100-rgb:219,234,254;--color-primary-200-rgb:191,219,254;--color-primary-300-rgb:147,197,253;--color-primary-400-rgb:96,165,250;--color-primary-500-rgb:59,130,246;--color-primary-600-rgb:37,99,235;--color-primary-700-rgb:29,78,216;--color-primary-800-rgb:30,64,175;--color-primary-900-rgb:30,58,138;--color-primary-950-rgb:23,37,84;--color-secondary-50:#f0f9ff;--color-secondary-100:#e0f2fe;--color-secondary-200:#bae6fd;--color-secondary-300:#7dd3fc;--color-secondary-400:#38bdf8;--color-secondary-500:#0ea5e9;--color-secondary-600:#0284c7;--color-secondary-700:#0369a1;--color-secondary-800:#075985;--color-secondary-900:#0c4a6e;--color-secondary-950:#082f49;--color-secondary-50-rgb:240,249,255;--color-secondary-100-rgb:224,242,254;--color-secondary-200-rgb:186,230,253;--color-secondary-300-rgb:125,211,252;--color-secondary-400-rgb:56,189,248;--color-secondary-500-rgb:14,165,233;--color-secondary-600-rgb:2,132,199;--color-secondary-700-rgb:3,105,161;--color-secondary-800-rgb:7,89,133;--color-secondary-900-rgb:12,74,110;--color-secondary-950-rgb:8,47,73;--color-success-50:#f0fdf4;--color-success-100:#dcfce7;--color-success-200:#bbf7d0;--color-success-300:#86efac;--color-success-400:#4ade80;--color-success-500:#22c55e;--color-success-600:#16a34a;--color-success-700:#15803d;--color-success-800:#166534;--color-success-900:#14532d;--color-success-950:#052e16;--color-success-50-rgb:240,253,244;--color-success-100-rgb:220,252,231;--color-success-200-rgb:187,247,208;--color-success-300-rgb:134,239,172;--color-success-400-rgb:74,222,128;--color-success-500-rgb:34,197,94;--color-success-600-rgb:22,163,74;--color-success-700-rgb:21,128,61;--color-success-800-rgb:22,101,52;--color-success-900-rgb:20,83,45;--color-success-950-rgb:5,46,22;--color-warning-50:#fffbeb;--color-warning-100:#fef3c7;--color-warning-200:#fde68a;--color-warning-300:#fcd34d;--color-warning-400:#fbbf24;--color-warning-500:#f59e0b;--color-warning-600:#d97706;--color-warning-700:#b45309;--color-warning-800:#92400e;--color-warning-900:#78350f;--color-warning-950:#451a03;--color-warning-50-rgb:255,251,235;--color-warning-100-rgb:254,243,199;--color-warning-200-rgb:253,230,138;--color-warning-300-rgb:252,211,77;--color-warning-400-rgb:251,191,36;--color-warning-500-rgb:245,158,11;--color-warning-600-rgb:217,119,6;--color-warning-700-rgb:180,83,9;--color-warning-800-rgb:146,64,14;--color-warning-900-rgb:120,53,15;--color-warning-950-rgb:69,26,3;--color-danger-50:#fef2f2;--color-danger-100:#fee2e2;--color-danger-200:#fecaca;--color-danger-300:#fca5a5;--color-danger-400:#f87171;--color-danger-500:#ef4444;--color-danger-600:#dc2626;--color-danger-700:#b91c1c;--color-danger-800:#991b1b;--color-danger-900:#7f1d1d;--color-danger-950:#450a0a;--color-danger-50-rgb:254,242,242;--color-danger-100-rgb:254,226,226;--color-danger-200-rgb:254,202,202;--color-danger-300-rgb:252,165,165;--color-danger-400-rgb:248,113,113;--color-danger-500-rgb:239,68,68;--color-danger-600-rgb:220,38,38;--color-danger-700-rgb:185,28,28;--color-danger-800-rgb:153,27,27;--color-danger-900-rgb:127,29,29;--color-danger-950-rgb:69,10,10;--color-important-50:#fdf2f8;--color-important-100:#fce7f3;--color-important-200:#fbcfe8;--color-important-300:#f9a8d4;--color-important-400:#f472b6;--color-important-500:#ec4899;--color-important-600:#db2777;--color-important-700:#be185d;--color-important-800:#9d174d;--color-important-900:#831843;--color-important-950:#500724;--color-important-50-rgb:253,242,248;--color-important-100-rgb:252,231,243;--color-important-200-rgb:251,207,232;--color-important-300-rgb:249,168,212;--color-important-400-rgb:244,114,182;--color-important-500-rgb:236,72,153;--color-important-600-rgb:219,39,119;--color-important-700-rgb:190,24,93;--color-important-800-rgb:157,23,77;--color-important-900-rgb:131,24,67;--color-important-950-rgb:80,7,36;--color-special-50:#faf5ff;--color-special-100:#f3e8ff;--color-special-200:#e9d5ff;--color-special-300:#d8b4fe;--color-special-400:#c084fc;--color-special-500:#a855f7;--color-special-600:#9333ea;--color-special-700:#7e22ce;--color-special-800:#6b21a8;--color-special-900:#581c87;--color-special-950:#3b0764;--color-special-50-rgb:250,245,255;--color-special-100-rgb:243,232,255;--color-special-200-rgb:233,213,255;--color-special-300-rgb:216,180,254;--color-special-400-rgb:192,132,252;--color-special-500-rgb:168,85,247;--color-special-600-rgb:147,51,234;--color-special-700-rgb:126,34,206;--color-special-800-rgb:107,33,168;--color-special-900-rgb:88,28,135;--color-special-950-rgb:59,7,100;--color-inherit:inherit;--color-transparent:transparent;--color-current:currentColor;--color-black:#000;--color-white:#fff;--color-canvas:#fff;--color-canvas-light:#fff;--color-canvas-dark:#f8fafc;--color-inverse:#000;--color-surface:#f1f5f9;--color-surface-light:#f8fafc;--color-surface-strong:#e2e8f0;--color-fore:#1e293b;--color-fore-in-light:#1e293b;--color-fore-in-dark:#fff;--color-focus:#bfdbfe;--color-link:#3b82f6;--color-link-hover:#2563eb;--color-link-visited:#1d4ed8;--color-link-active:#1e40af;--color-placeholder:#94a3b8;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-border-light:#f1f5f9;--color-black-rgb:0,0,0;--color-white-rgb:255,255,255;--color-canvas-rgb:255,255,255;--color-canvas-light-rgb:255,255,255;--color-canvas-dark-rgb:248,250,252;--color-inverse-rgb:0,0,0;--color-surface-rgb:241,245,249;--color-surface-light-rgb:248,250,252;--color-surface-strong-rgb:226,232,240;--color-fore-rgb:30,41,59;--color-fore-in-light-rgb:30,41,59;--color-fore-in-dark-rgb:255,255,255;--color-focus-rgb:191,219,254;--color-link-rgb:59,130,246;--color-link-hover-rgb:37,99,235;--color-link-visited-rgb:29,78,216;--color-link-active-rgb:30,64,175;--color-placeholder-rgb:148,163,184;--color-border-rgb:226,232,240;--color-border-strong-rgb:203,213,225;--color-border-light-rgb:241,245,249}@media (prefers-color-scheme:dark){.dark-auto{--color-gray-50:#020617;--color-gray-100:#0f172a;--color-gray-200:#1e293b;--color-gray-300:#334155;--color-gray-400:#475569;--color-gray-500:#64748b;--color-gray-600:#94a3b8;--color-gray-700:#cbd5e1;--color-gray-800:#e2e8f0;--color-gray-900:#f1f5f9;--color-gray-950:#f8fafc;--color-gray-50-rgb:2,6,23;--color-gray-100-rgb:15,23,42;--color-gray-200-rgb:30,41,59;--color-gray-300-rgb:51,65,85;--color-gray-400-rgb:71,85,105;--color-gray-500-rgb:100,116,139;--color-gray-600-rgb:148,163,184;--color-gray-700-rgb:203,213,225;--color-gray-800-rgb:226,232,240;--color-gray-900-rgb:241,245,249;--color-gray-950-rgb:248,250,252;--color-primary-50:#172554;--color-primary-100:#1e3a8a;--color-primary-200:#1e40af;--color-primary-300:#1d4ed8;--color-primary-400:#2563eb;--color-primary-500:#3b82f6;--color-primary-600:#60a5fa;--color-primary-700:#93c5fd;--color-primary-800:#bfdbfe;--color-primary-900:#dbeafe;--color-primary-950:#eff6ff;--color-primary-50-rgb:23,37,84;--color-primary-100-rgb:30,58,138;--color-primary-200-rgb:30,64,175;--color-primary-300-rgb:29,78,216;--color-primary-400-rgb:37,99,235;--color-primary-500-rgb:59,130,246;--color-primary-600-rgb:96,165,250;--color-primary-700-rgb:147,197,253;--color-primary-800-rgb:191,219,254;--color-primary-900-rgb:219,234,254;--color-primary-950-rgb:239,246,255;--color-secondary-50:#082f49;--color-secondary-100:#0c4a6e;--color-secondary-200:#075985;--color-secondary-300:#0369a1;--color-secondary-400:#0284c7;--color-secondary-500:#0ea5e9;--color-secondary-600:#38bdf8;--color-secondary-700:#7dd3fc;--color-secondary-800:#bae6fd;--color-secondary-900:#e0f2fe;--color-secondary-950:#f0f9ff;--color-secondary-50-rgb:8,47,73;--color-secondary-100-rgb:12,74,110;--color-secondary-200-rgb:7,89,133;--color-secondary-300-rgb:3,105,161;--color-secondary-400-rgb:2,132,199;--color-secondary-500-rgb:14,165,233;--color-secondary-600-rgb:56,189,248;--color-secondary-700-rgb:125,211,252;--color-secondary-800-rgb:186,230,253;--color-secondary-900-rgb:224,242,254;--color-secondary-950-rgb:240,249,255;--color-success-50:#052e16;--color-success-100:#14532d;--color-success-200:#166534;--color-success-300:#15803d;--color-success-400:#16a34a;--color-success-500:#22c55e;--color-success-600:#4ade80;--color-success-700:#86efac;--color-success-800:#bbf7d0;--color-success-900:#dcfce7;--color-success-950:#f0fdf4;--color-success-50-rgb:5,46,22;--color-success-100-rgb:20,83,45;--color-success-200-rgb:22,101,52;--color-success-300-rgb:21,128,61;--color-success-400-rgb:22,163,74;--color-success-500-rgb:34,197,94;--color-success-600-rgb:74,222,128;--color-success-700-rgb:134,239,172;--color-success-800-rgb:187,247,208;--color-success-900-rgb:220,252,231;--color-success-950-rgb:240,253,244;--color-warning-50:#451a03;--color-warning-100:#78350f;--color-warning-200:#92400e;--color-warning-300:#b45309;--color-warning-400:#d97706;--color-warning-500:#f59e0b;--color-warning-600:#fbbf24;--color-warning-700:#fcd34d;--color-warning-800:#fde68a;--color-warning-900:#fef3c7;--color-warning-950:#fffbeb;--color-warning-50-rgb:69,26,3;--color-warning-100-rgb:120,53,15;--color-warning-200-rgb:146,64,14;--color-warning-300-rgb:180,83,9;--color-warning-400-rgb:217,119,6;--color-warning-500-rgb:245,158,11;--color-warning-600-rgb:251,191,36;--color-warning-700-rgb:252,211,77;--color-warning-800-rgb:253,230,138;--color-warning-900-rgb:254,243,199;--color-warning-950-rgb:255,251,235;--color-danger-50:#450a0a;--color-danger-100:#7f1d1d;--color-danger-200:#991b1b;--color-danger-300:#b91c1c;--color-danger-400:#dc2626;--color-danger-500:#ef4444;--color-danger-600:#f87171;--color-danger-700:#fca5a5;--color-danger-800:#fecaca;--color-danger-900:#fee2e2;--color-danger-950:#fef2f2;--color-danger-50-rgb:69,10,10;--color-danger-100-rgb:127,29,29;--color-danger-200-rgb:153,27,27;--color-danger-300-rgb:185,28,28;--color-danger-400-rgb:220,38,38;--color-danger-500-rgb:239,68,68;--color-danger-600-rgb:248,113,113;--color-danger-700-rgb:252,165,165;--color-danger-800-rgb:254,202,202;--color-danger-900-rgb:254,226,226;--color-danger-950-rgb:254,242,242;--color-important-50:#500724;--color-important-100:#831843;--color-important-200:#9d174d;--color-important-300:#be185d;--color-important-400:#db2777;--color-important-500:#ec4899;--color-important-600:#f472b6;--color-important-700:#f9a8d4;--color-important-800:#fbcfe8;--color-important-900:#fce7f3;--color-important-950:#fdf2f8;--color-important-50-rgb:80,7,36;--color-important-100-rgb:131,24,67;--color-important-200-rgb:157,23,77;--color-important-300-rgb:190,24,93;--color-important-400-rgb:219,39,119;--color-important-500-rgb:236,72,153;--color-important-600-rgb:244,114,182;--color-important-700-rgb:249,168,212;--color-important-800-rgb:251,207,232;--color-important-900-rgb:252,231,243;--color-important-950-rgb:253,242,248;--color-special-50:#3b0764;--color-special-100:#581c87;--color-special-200:#6b21a8;--color-special-300:#7e22ce;--color-special-400:#9333ea;--color-special-500:#a855f7;--color-special-600:#c084fc;--color-special-700:#d8b4fe;--color-special-800:#e9d5ff;--color-special-900:#f3e8ff;--color-special-950:#faf5ff;--color-special-50-rgb:59,7,100;--color-special-100-rgb:88,28,135;--color-special-200-rgb:107,33,168;--color-special-300-rgb:126,34,206;--color-special-400-rgb:147,51,234;--color-special-500-rgb:168,85,247;--color-special-600-rgb:192,132,252;--color-special-700-rgb:216,180,254;--color-special-800-rgb:233,213,255;--color-special-900-rgb:243,232,255;--color-special-950-rgb:250,245,255;--color-canvas:#020617;--color-inverse:#fff;--color-surface:#1e293b;--color-surface-light:#0f172a;--color-surface-strong:#334155;--color-fore:#cbd5e1;--color-focus:#1e40af;--color-link:#3b82f6;--color-link-hover:#60a5fa;--color-link-visited:#93c5fd;--color-link-active:#bfdbfe;--color-placeholder:#475569;--color-border:#1e293b;--color-border-strong:#334155;--color-border-light:#0f172a;--color-canvas-rgb:2,6,23;--color-inverse-rgb:255,255,255;--color-surface-rgb:30,41,59;--color-surface-light-rgb:15,23,42;--color-surface-strong-rgb:51,65,85;--color-fore-rgb:203,213,225;--color-focus-rgb:30,64,175;--color-link-rgb:59,130,246;--color-link-hover-rgb:96,165,250;--color-link-visited-rgb:147,197,253;--color-link-active-rgb:191,219,254;--color-placeholder-rgb:71,85,105;--color-border-rgb:30,41,59;--color-border-strong-rgb:51,65,85;--color-border-light-rgb:15,23,42}}*,:after,:before{--tw-border-opacity:1;border-color:rgba(var(--color-border-rgb),var(--tw-border-opacity))}:focus-visible{outline-color:transparent}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }html{font-size:var(--font-size-root)}body{--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity));font-size:.8125rem;line-height:1.5384615385}.dark,body{--tw-text-opacity:1;color:rgba(var(--color-fore-rgb),var(--tw-text-opacity))}:root{--font-h1-size:2.25rem;--article-p-space:0.5em;--article-heading-space:0.5em;--article-hr-space:1.5em;--article-cell-padding:0.25rem 0.75rem}a,a.disabled:hover{--tw-text-opacity:1;color:rgba(var(--color-link-rgb),var(--tw-text-opacity))}a:hover{--tw-text-opacity:1;color:rgba(var(--color-link-hover-rgb),var(--tw-text-opacity))}a:focus-visible{outline-color:rgb(var(--color-focus-rgb));outline-offset:2px;outline-width:2px}.code,code{background-color:rgba(var(--color-important-500-rgb),.1);border-radius:var(--radius);padding-left:.25rem;padding-right:.25rem;--tw-text-opacity:1;color:rgba(var(--color-important-500-rgb),var(--tw-text-opacity))}pre{font-size:.75rem;line-height:1rem;overflow:auto;padding:.5rem}pre code{background-color:transparent;color:inherit;padding:0}samp,var{font-weight:700}.blockquote,blockquote{border-left-width:4px;font-size:.875rem;line-height:1.3rem;padding-left:.75rem;text-wrap:balance}.blockquote figcaption,blockquote figcaption{font-size:.75rem;line-height:1rem;--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.5;text-wrap:balance}.h1,h1{font-size:2rem}.h2,h2{font-size:1.5rem}.h3,h3{font-size:1.25rem}.h4,h4{font-size:1rem}.h5,h5{font-size:.875rem}.h6,h6{font-size:.75rem}ul{list-style-type:disc}ol,ul{padding-left:1.5em}ol{list-style-type:decimal}dt{font-weight:700}dd{padding-left:2em}.article{color:var(--font-size-article);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}.article h1,.article h2,.article h3,.article h4{margin-bottom:var(--article-heading-space);margin-top:var(--article-heading-space)}.article audio,.article blockquote,.article figure,.article img,.article ol,.article p,.article table,.article ul,.article video{margin-bottom:var(--article-p-space);margin-top:var(--article-p-space)}.article p{min-height:1em}.article p:empty:before{content:" ";display:inline-block}.article hr{margin-bottom:var(--article-hr-space);margin-top:var(--article-hr-space)}.article table{border-width:1px}.article td,.article th{border-bottom-width:1px;padding:var(--article-cell-padding)}.article thead{background-color:var(--table-head-bg,var(--color-gray-100))}.article ol *,.article table *,.article ul *{margin-bottom:0;margin-top:0}.article pre{border-radius:var(--radius);border-width:1px;--tw-bg-opacity:1;background-color:rgba(var(--color-gray-50-rgb),var(--tw-bg-opacity))}:root{--alert-bg:var(--color-surface)}.alert{align-items:center;background-color:var(--alert-bg);border-radius:var(--radius);display:flex;gap:.75rem;padding:.5rem .75rem}.alert-content{display:flex;flex:1 1 auto;flex-direction:column;gap:1rem}.alert-close{margin-bottom:-.375rem;margin-right:-.5rem;margin-top:-.375rem}.alert-link{color:inherit;font-weight:700}.alert-link:hover{color:inherit;text-decoration-line:underline}.alert-heading{font-weight:700;margin:0}.alert-text{flex:1 1 auto;white-space:pre-line}.alert-actions{align-items:center;display:flex;gap:.5rem}:root{--breadcrumb-divider:"/";--breadcrumb-divider-color:var(--color-gray-500);--breadcrumb-color-active:var(--color-gray-500)}.breadcrumb{display:flex;gap:1.25rem;list-style-type:none;padding-left:0}.breadcrumb>li{position:relative}.breadcrumb>li+li:before{color:var(--breadcrumb-divider-color);content:var(--breadcrumb-divider);display:block;left:-1.25rem;position:absolute;text-align:center;width:1.25rem}.breadcrumb>.active{color:var(--breadcrumb-color-active)}:root{--btn-radius:var(--radius);--btn-bg:var(--color-surface);--btn-border-color:var(--color-gray-300);--btn-height:2rem}.btn{align-items:center;background-color:var(--btn-bg);border-radius:var(--btn-radius);display:inline-flex;gap:.375rem;height:var(--btn-height);justify-content:center;padding-left:.75rem;padding-right:.75rem;white-space:nowrap;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--btn-border-color)}.btn,.btn-default:hover{color:inherit}.btn-link{--tw-text-opacity:1;color:rgba(var(--color-link-rgb),var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:2px;--tw-ring-color:transparent}.btn-link:visited{color:rgba(var(--color-link-visited-rgb),var(--tw-text-opacity))}.btn-link:hover{--tw-text-opacity:1;color:rgba(var(--color-link-hover-rgb),var(--tw-text-opacity))}.btn-link{--btn-bg:transparent}.btn.size-xs,.size-xs>.btn{padding-left:.25rem;padding-right:.25rem;--btn-height:1.25rem}.btn.size-sm,.btn.size-xs,.size-sm>.btn,.size-xs>.btn{font-size:.75rem;line-height:1rem}.btn.size-sm,.size-sm>.btn{--btn-height:1.5rem}.btn.size-md,.btn.size-sm,.size-md>.btn,.size-sm>.btn{padding-left:.5rem;padding-right:.5rem}.btn.size-md,.size-md>.btn{--btn-height:1.75rem}.btn.size-lg,.size-lg>.btn{font-size:1rem;line-height:1.5rem;padding-left:1rem;padding-right:1rem;--btn-height:2.5rem}.btn.size-xl,.size-xl>.btn{font-size:1.125rem;line-height:1.75rem;padding-left:1.25rem;padding-right:1.25rem;--btn-height:3rem}.btn.square{aspect-ratio:1/1;gap:.125rem;padding-left:0;padding-right:0}@supports not (aspect-ratio:1/1){.btn.square{width:var(--btn-height)}}.btn.btn-caret{padding-left:.25rem;padding-right:.25rem}.btn.btn-wide{min-width:80px}:root{--checkbox-size:12px;--checkbox-color:var(--color-primary-500)}.checkbox,.radio{align-items:center;cursor:pointer;display:flex;gap:.375rem;min-height:20px}.checkbox>input[type=checkbox],.radio>input[type=radio]{accent-color:rgb(var(--color-primary-500-rgb));border-radius:var(--radius-lg)}.checkbox-primary,.radio-primary{display:flex;gap:.375rem;min-height:20px;position:relative}.checkbox-primary>input[type=checkbox],.radio-primary>input[type=radio]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}.checkbox-primary>label,.radio-primary>label{cursor:pointer;padding-left:calc(var(--checkbox-size) + 8px);position:relative}.checkbox-primary>label:after,.checkbox-primary>label:before,.radio-primary>label:after,.radio-primary>label:before{display:block;height:var(--checkbox-size);left:0;position:absolute;transition-duration:.15s;transition-property:transform,background-color,color,opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--checkbox-size);--tw-content:"";content:var(--tw-content);top:calc((20px - var(--checkbox-size))/2)}.checkbox-primary>label:before{border-radius:var(--radius-sm);border-width:1px;--tw-border-opacity:1;border-color:rgba(var(--color-gray-400-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity))}.checkbox-primary>label:after{--tw-scale-x:.9;--tw-scale-y:.9;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTkgMjAuNDItNi4yMS02LjIxIDIuODMtMi44M0w5IDE0Ljc3bDkuODgtOS44OSAyLjgzIDIuODN6Ii8+PC9zdmc+");transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.radio-primary>label:before{border-radius:var(--radius-full);border-width:1px;--tw-border-opacity:1;border-color:rgba(var(--color-gray-400-rgb),var(--tw-border-opacity))}.radio-primary>label:after{background-color:var(--checkbox-color);border-radius:var(--radius-full);opacity:0;--checkbox-radio-size:calc(var(--checkbox-size)*2/3);height:var(--checkbox-radio-size);left:calc((var(--checkbox-size) - var(--checkbox-radio-size))/2);top:calc((20px - var(--checkbox-radio-size))/2);width:var(--checkbox-radio-size)}.checkbox-primary>label:hover:before,.radio-primary>label:hover:before{border-color:var(--checkbox-color)}.checkbox-primary.focus>label:before,.checkbox-primary>input[type=checkbox]:focus+label:before,.radio-primary.focus>label:before,.radio-primary>input[type=radio]:focus+label:before{border-color:var(--checkbox-color);outline-color:rgb(var(--color-focus-rgb));outline-style:solid;outline-width:2px}.checkbox-primary.checked>label:before,.checkbox-primary>input[type=checkbox]:checked+label:before{background-color:var(--checkbox-color);border-color:var(--checkbox-color)}.radio-primary.checked>label:before,.radio-primary>input[type=radio]:checked+label:before{border-color:var(--checkbox-color)}.checkbox-primary.checked>label:after,.checkbox-primary>input[type=checkbox]:checked+label:after,.radio-primary.checked>label:after,.radio-primary>input[type=radio]:checked+label:after{opacity:1}.checkbox-primary.disabled>label,.checkbox-primary>input[type=checkbox]:disabled+label,.radio-primary.disabled>label,.radio-primary>input[type=radio]:disabled+label{cursor:not-allowed;opacity:.7;pointer-events:none;--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.checkbox-primary.indeterminate>label:after,.checkbox-primary>input[type=checkbox]:indeterminate+label:after{--tw-border-opacity:1;background-color:var(--checkbox-color);background-image:none;border-color:rgba(var(--color-canvas-rgb),var(--tw-border-opacity));border-width:calc((var(--checkbox-size) - 2px)/2) 2px;opacity:1}.check-list{align-items:flex-start;flex-direction:column;gap:.5rem}.check-list,.check-list-inline{display:flex;padding-bottom:.375rem;padding-top:.375rem}.check-list-inline{align-items:center;-moz-column-gap:1rem;column-gap:1rem;flex-direction:row;flex-wrap:wrap;row-gap:.5rem}.switch{display:flex;gap:.375rem;min-height:20px;padding-left:2.5rem;position:relative}.switch>input{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}.switch>label:after,.switch>label:before{border-radius:var(--radius-full);border-width:1px;height:1rem;left:0;position:absolute;top:.125rem;width:2rem;--tw-border-opacity:1;border-color:rgba(var(--color-border-strong-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity));transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);--tw-content:"";content:var(--tw-content)}.switch>label:before{cursor:pointer;--tw-shadow:var(--shadow-inner);--tw-shadow-colored:var(--shadow-inner);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.switch>label:hover:before{--tw-border-opacity:1;border-color:rgba(var(--color-border-rgb),var(--tw-border-opacity))}.switch>label:after{height:.75rem;left:.125rem;top:.25rem;width:.75rem;--tw-border-opacity:1;border-color:rgba(var(--color-canvas-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity));--tw-shadow:var(--shadow);--tw-shadow-colored:var(--shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.switch>input:checked+label:before{background-color:var(--checkbox-color);border-color:rgba(var(--color-inverse-rgb),.2)}.switch>input:checked+label:after{color:var(--checkbox-color);left:18px}.switch.focus>label:before,.switch>input:focus+label:before{border-color:var(--checkbox-color);outline-color:rgb(var(--color-focus-rgb));outline-style:solid;outline-width:2px}.switch.disabled>label:before,.switch>input:disabled+label:before{cursor:not-allowed;opacity:.7;pointer-events:none;--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{--form-control-radius:var(--radius);--form-control-border:var(--color-border);--form-control-focus:var(--color-primary-500);--form-control-disabled:var(--color-surface);--form-control-readonly:var(--color-surface)}.dark{--form-control-border:var(--color-border-strong)}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity:1;color:rgba(var(--color-placeholder-rgb),var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity:1;color:rgba(var(--color-placeholder-rgb),var(--tw-placeholder-opacity))}.form-control{border-radius:var(--form-control-radius);display:block;height:2rem;width:100%;--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity));outline-color:transparent;outline-style:solid;outline-width:1px;padding:.25rem .5rem;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--form-control-border);transition-duration:.15s;transition-property:outline,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.form-control.focus,.form-control:focus{outline-color:var(--form-control-focus);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(var(--color-focus-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.3}.form-control.disabled,.form-control[disabled]{background-color:var(--form-control-disabled);opacity:1}.form-control.readonly,.form-control[readonly]{background-color:var(--form-control-readonly)}select{-webkit-appearance:none;background-image:url("data:image/gif;base64,R0lGODlhBwAEAIAAAMvQ2////yH5BAEAAAEALAAAAAAHAAQAAAIIhA+BGWoNWSgAOw==");background-position:right 8px top 50%;background-repeat:no-repeat;background-size:8px auto;padding-right:1rem}select.form-control[multiple]{background-image:none}textarea.form-control{height:auto;min-height:32px}input[type=file].form-control{padding:.125rem}input[type=file].form-control::-webkit-file-upload-button{-webkit-appearance:none;appearance:none;border-radius:inherit;border-style:none;cursor:pointer;height:1.75rem;padding-left:.5rem;padding-right:.5rem}input[type=file].form-control::-webkit-file-upload-button:hover{background-color:rgba(var(--color-black-rgb),.1)}.has-error .form-control,.has-error.form-control{--tw-ring-color:rgba(var(--color-danger-500-rgb),0.6)}.has-error .form-control.focus,.has-error .form-control:focus,.has-error.form-control.focus,.has-error.form-control:focus{outline-color:rgb(var(--color-danger-500-rgb));--tw-ring-color:rgba(var(--color-danger-500-rgb),0.1)}.has-warning .form-control,.has-warning.form-control{--tw-ring-color:rgba(var(--color-warning-500-rgb),0.6)}.has-warning .form-control.focus,.has-warning .form-control:focus,.has-warning.form-control.focus,.has-warning.form-control:focus{outline-color:rgb(var(--color-warning-500-rgb));--tw-ring-color:rgba(var(--color-warning-500-rgb),0.2)}.has-success .form-control,.has-success.form-control{--tw-ring-color:rgba(var(--color-success-500-rgb),0.6)}.has-success .form-control.focus,.has-success .form-control:focus,.has-success.form-control.focus,.has-success.form-control:focus{outline-color:rgb(var(--color-success-500-rgb));--tw-ring-color:rgba(var(--color-success-500-rgb),0.2)}.form-control.size-sm,.size-sm>.form-control{font-size:.75rem;height:1.5rem;line-height:1rem;padding-left:.5rem;padding-right:.5rem}.form-control.size-md,.size-md>.form-control{height:1.75rem;padding-left:.5rem;padding-right:.5rem}.form-control.size-lg,.size-lg>.form-control{font-size:1rem;height:2.5rem;line-height:1.5rem;padding-left:.75rem;padding-right:.75rem}:root{--input-group-addon-bg:var(--color-gray-50)}.input-group{align-items:stretch;display:flex}.input-group>.form-control,.input-group>.input-control{flex:1 1 auto;z-index:1}.input-group-addon{align-items:center;background-color:var(--input-group-addon-bg);border-radius:var(--form-control-radius);display:flex;flex:none;height:2rem;padding-left:.5rem;padding-right:.5rem;z-index:0;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--form-control-border)}.size-sm>.input-group-addon{font-size:.75rem;height:1.5rem;line-height:1rem;padding-left:.5rem;padding-right:.5rem}.size-lg>.input-group-addon{font-size:1rem;height:2.5rem;line-height:1.5rem;padding-left:.75rem;padding-right:.75rem}.input-group-control{flex:1 1 auto}.input-group>*+*,.input-group>*+* .form-control{border-bottom-left-radius:var(--radius-none);border-top-left-radius:var(--radius-none)}.input-group>:not(:last-child),.input-group>:not(:last-child) .form-control{border-bottom-right-radius:var(--radius-none);border-top-right-radius:var(--radius-none)}.input-group .btn:focus-visible,.input-group .form-control:focus{z-index:2}:root{--form-tip-color:var(--color-gray-400);--form-label-color:var(--color-gray-700);--form-horz-label-width:6rem;--form-grid-gap-x:1.25rem;--form-grid-gap-y:.75rem}.form{flex-direction:column;gap:1rem}.form,.form-label{display:flex}.form-label{align-items:center;color:var(--form-label-color);flex-direction:row;gap:.25rem;height:2rem;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}.form-label.required:after{content:"*";display:inline-block;margin-left:.25rem;--tw-translate-y:0.125rem;--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity:1;color:rgba(var(--color-danger-500-rgb),var(--tw-text-opacity))}.no-required .form-label.required:after{display:none}.form-label-actions{flex:1 1 auto;justify-content:flex-end}.form-label>.checkbox-primary{margin-left:.75rem}.form-tip{color:var(--form-tip-color);display:block;margin-top:.25rem}.has-error .form-tip{--tw-text-opacity:1;color:rgba(var(--color-danger-500-rgb),var(--tw-text-opacity))}.has-warning .form-tip{--tw-text-opacity:1;color:rgba(var(--color-warning-500-rgb),var(--tw-text-opacity))}.has-success .form-tip{--tw-text-opacity:1;color:rgba(var(--color-success-500-rgb),var(--tw-text-opacity))}.form-actions{display:flex;flex-direction:row;gap:1rem;justify-content:center}.form-grid{--form-grid-gap-x-half:calc(var(--form-grid-gap-x)/2);--form-grid-gap-y-half:calc(var(--form-grid-gap-y)/2);align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:0}.form-grid .form-group{padding:var(--form-grid-gap-y-half) var(--form-grid-gap-x-half)}.form-grid .form-label.required:after{margin-left:.25rem;order:-9999}.form-grid .form-label .checkbox{margin-left:.75rem;margin-right:.75rem}.form-grid .has-wrap-after:after{display:block;width:100%;--tw-content:"";content:var(--tw-content)}.form-grid-wrap{width:100%}.form-grid-row{display:flex;flex-direction:row;padding-bottom:var(--form-grid-gap-y-half);padding-top:var(--form-grid-gap-y-half);position:relative;width:100%}.form-grid-col{padding-left:var(--form-grid-gap-x-half);padding-right:var(--form-grid-gap-x-half)}.form-grid .form-actions{gap:1.5rem;justify-content:center;padding:var(--form-grid-gap-y) var(--form-grid-gap-x-half);width:100%}.form-grid .form-actions.is-pinned{border-top-width:1px}.form-horz .form-group,.form-horz .form-row{align-items:flex-start;display:flex;flex-direction:row}.form-horz .form-group{flex-grow:1;flex-wrap:wrap;min-height:32px;min-width:0;padding-left:var(--form-horz-label-width);position:relative}.form-horz .form-group[class*=" w-"],.form-horz .form-group[class^=w-]{flex:none}.form-horz .form-group>*{min-width:0}.form-horz .form-group.no-label{padding-left:0}.form-horz .form-group.no-label>.check-list-inline{padding-left:1rem;padding-right:1rem}.form-horz .form-label{justify-content:flex-end;left:0;padding-left:1rem;padding-right:.5rem;position:absolute;top:0;width:var(--form-horz-label-width)}.form-horz .form-label.required:after{margin-left:0;order:-9999}.form-horz .form-tip{width:100%}.form-horz .form-tip,.form-horz .input-control,.form-horz .input-group{flex:1 1 auto}.form .form-group-wrapper,.form-horz .form-group-wrapper{flex:1 1 auto;min-width:0;width:100%;z-index:1}.form .form-group-wrapper.flex-none,.form-horz .form-group-wrapper.flex-none{flex:none}.form fieldset>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.form fieldset{padding-bottom:1rem;padding-left:1rem}.form-grid fieldset>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.form legend{border-bottom-width:1px;display:flex;justify-content:flex-start;margin-left:-1rem;width:100%;--tw-border-opacity:1;border-bottom-color:rgba(var(--color-primary-100-rgb),var(--tw-border-opacity));width:calc(100% + 1rem)}.form-title{align-items:center;background-color:rgba(var(--color-primary-50-rgb),.5);display:flex;font-weight:700;height:1.75rem;padding-left:.75rem;padding-right:.75rem}@font-face{font-display:block;font-family:ZenIcon;font-style:normal;font-weight:400;src:url(./icons/zenicon.eot);src:url(./icons/zenicon.woff) format("woff"),url(./icons/zenicon.ttf) format("truetype"),url(./icons/zenicon.svg) format("svg")}.icon,[class*=" icon-"],[class^=icon-]{display:inline-block;font-display:block;font-family:ZenIcon;font-size:14px;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon:before{display:inline-block;min-width:14px;text-align:center}.icon-lg:before{font-size:1.3333333em;vertical-align:-10%}.icon-2x{font-size:28px}.icon-3x{font-size:42px}.icon-4x{font-size:56px}.icon-5x{font-size:70px}.icon-resize:before{content:"\e667"}.icon-arrows-alt:before,.icon-expand-full:before,.icon-fullscreen:before{content:"\e6a3"}.icon-collapse-full:before{content:"\e682"}.icon-taiji:before,.icon-yinyang:before{content:"\e687"}.icon-window:before{content:"\e68e"}.icon-window-alt:before{content:"\e68f"}.icon-carousel:before{content:"\e6b0"}.icon-spinner-snake:before{content:"\e97b"}.icon-spinner-indicator:before{content:"\e97c"}.icon-check-board:before{content:"\e9b8"}.icon-bar-chart-o:before,.icon-bar-chart:before{content:"\f080"}.icon-github:before{content:"\f09b"}.icon-dot-circle-o:before,.icon-dot-circle:before{content:"\f192"}.icon-cube-alt:before{content:"\f1b2"}.icon-cubes:before{content:"\f1b3"}.icon-file-pdf:before{content:"\f1c1"}.icon-file-word:before{content:"\f1c2"}.icon-file-excel:before{content:"\f1c3"}.icon-file-powerpoint:before{content:"\f1c4"}.icon-file-image:before,.icon-file-photo:before,.icon-file-picture:before{content:"\f1c5"}.icon-file-archive:before,.icon-file-zip:before{content:"\f1c6"}.icon-file-audio:before,.icon-file-sound:before{content:"\f1c7"}.icon-file-movie:before,.icon-file-video:before{content:"\f1c8"}.icon-file-code:before{content:"\f1c9"}.icon-circle-o-notch:before{content:"\f1ce"}.icon-chanzhi:before{content:"\e906"}.icon-chanzhi-pro:before{content:"\e905"}.icon-zsite:before{content:"\e904"}.icon-zsite-pro:before{content:"\e903"}.icon-qq:before{content:"\f600"}.icon-wechat:before,.icon-weixin:before{content:"\f1d7"}.icon-history:before{content:"\f1da"}.icon-circle-thin:before{content:"\f1db"}.icon-sliders:before{content:"\f1de"}.icon-newspaper-o:before{content:"\f1ea"}.icon-calculator:before{content:"\f1ec"}.icon-paint-brush:before{content:"\f1fc"}.icon-area-chart:before{content:"\f1fe"}.icon-pie-chart:before{content:"\f200"}.icon-line-chart:before{content:"\f201"}.icon-toggle-off:before{content:"\f204"}.icon-toggle-on:before{content:"\f205"}.icon-diamond:before{content:"\f219"}.icon-venus:before{content:"\f221"}.icon-mars:before{content:"\f222"}.icon-server:before{content:"\f233"}.icon-music:before{content:"\e602"}.icon-search:before{content:"\e603"}.icon-envelope:before{content:"\e604"}.icon-heart:before{content:"\e605"}.icon-star:before{content:"\e606"}.icon-star-empty:before{content:"\e607"}.icon-user:before{content:"\e608"}.icon-film:before{content:"\e609"}.icon-th-large:before{content:"\e60a"}.icon-th:before{content:"\e60b"}.icon-th-list:before{content:"\e60c"}.icon-check:before,.icon-ok:before{content:"\e60d"}.icon-remove:before,.icon-times:before{content:"\d7"}.icon-zoom-in:before{content:"\e60f"}.icon-zoom-out:before{content:"\e610"}.icon-off:before{content:"\e611"}.icon-cog:before{content:"\e613"}.icon-trash:before{content:"\e614"}.icon-home:before{content:"\e615"}.icon-file-alt:before,.icon-file-o:before{content:"\e616"}.icon-time:before{content:"\e617"}.icon-download-alt:before{content:"\e618"}.icon-download:before{content:"\e619"}.icon-upload:before{content:"\e61a"}.icon-inbox:before{content:"\e61b"}.icon-play-circle:before{content:"\e61c"}.icon-repeat:before{content:"\e61d"}.icon-refresh:before{content:"\e61e"}.icon-list-alt:before{content:"\e61f"}.icon-lock:before{content:"\e620"}.icon-flag:before{content:"\e621"}.icon-headphones:before{content:"\e622"}.icon-volume-off:before{content:"\e623"}.icon-volume-up:before{content:"\e625"}.icon-qrcode:before{content:"\e626"}.icon-barcode:before{content:"\e627"}.icon-tag:before{content:"\e628"}.icon-tags:before{content:"\e629"}.icon-book:before{content:"\e62a"}.icon-bookmark:before{content:"\e62b"}.icon-print:before{content:"\e62c"}.icon-camera:before{content:"\e62d"}.icon-font:before{content:"\e62e"}.icon-bold:before{content:"\e62f"}.icon-italic:before{content:"\f033"}.icon-header:before{content:"\f1dc"}.icon-underline:before{content:"\f0cd"}.icon-strikethrough:before{content:"\f0cc"}.icon-eraser:before{content:"\f12d"}.icon-align-justify:before{content:"\e636"}.icon-list:before{content:"\e637"}.icon-picture:before{content:"\e63b"}.icon-pencil:before{content:"\e63c"}.icon-map-marker:before{content:"\e63d"}.icon-adjust:before{content:"\e63e"}.icon-tint:before{content:"\e63f"}.icon-edit:before{content:"\e640"}.icon-share:before{content:"\e641"}.icon-checked:before{content:"\e642"}.icon-arrows:before,.icon-move:before{content:"\e643"}.icon-step-backward:before{content:"\e644"}.icon-fast-backward:before{content:"\e645"}.icon-backward:before{content:"\e646"}.icon-play:before{content:"\e647"}.icon-pause:before{content:"\e648"}.icon-stop:before{content:"\e649"}.icon-forward:before{content:"\e64a"}.icon-fast-forward:before{content:"\e64b"}.icon-step-forward:before{content:"\e64c"}.icon-eject:before{content:"\e64d"}.icon-chevron-left:before{content:"\e64e"}.icon-chevron-right:before{content:"\e64f"}.icon-plus-sign:before{content:"\e650"}.icon-minus-sign:before{content:"\e651"}.icon-remove-sign:before{content:"\e652"}.icon-check-circle:before,.icon-ok-sign:before{content:"\e653"}.icon-question-sign:before{content:"\e654"}.icon-info-sign:before{content:"\e655"}.icon-remove-circle:before{content:"\e657"}.icon-check-circle-o:before,.icon-ok-circle:before{content:"\e658"}.icon-ban-circle:before{content:"\e659"}.icon-arrow-left:before{content:"\e65a"}.icon-arrow-right:before{content:"\e65b"}.icon-arrow-up:before{content:"\e65c"}.icon-arrow-down:before{content:"\e65d"}.icon-share-alt:before{content:"\e65e"}.icon-resize-full:before{content:"\e65f"}.icon-resize-small:before{content:"\e660"}.icon-plus:before{content:"\e661"}.icon-minus:before{content:"\e662"}.icon-asterisk:before{content:"\e663"}.icon-exclamation-sign:before{content:"\e664"}.icon-gift:before{content:"\e665"}.icon-leaf:before{content:"\e666"}.icon-eye-open:before{content:"\e668"}.icon-eye-close:before{content:"\e669"}.icon-warning-sign:before{content:"\e66a"}.icon-plane:before{content:"\e66b"}.icon-calendar:before{content:"\e66c"}.icon-random:before{content:"\e66d"}.icon-comment:before{content:"\e66e"}.icon-chevron-up:before{content:"\e670"}.icon-chevron-down:before{content:"\e671"}.icon-shopping-cart:before{content:"\e673"}.icon-folder-close:before{content:"\e674"}.icon-folder-open:before{content:"\e675"}.icon-resize-v:before{content:"\e676"}.icon-resize-h:before{content:"\e677"}.icon-bar-chart-alt:before{content:"\e678"}.icon-camera-retro:before{content:"\e679"}.icon-key:before{content:"\e67a"}.icon-cogs:before{content:"\e67b"}.icon-comments:before{content:"\e67c"}.icon-thumbs-o-up:before{content:"\e67d"}.icon-thumbs-o-down:before{content:"\e67e"}.icon-star-half:before{content:"\e67f"}.icon-heart-empty:before{content:"\e680"}.icon-signout:before{content:"\e681"}.icon-pushpin:before{content:"\e683"}.icon-external-link:before{content:"\e684"}.icon-signin:before{content:"\e685"}.icon-trophy:before{content:"\e686"}.icon-upload-alt:before{content:"\e688"}.icon-lemon:before{content:"\e689"}.icon-phone:before{content:"\e68a"}.icon-check-empty:before{content:"\e68b"}.icon-bookmark-empty:before{content:"\e68c"}.icon-phone-sign:before{content:"\e68d"}.icon-credit:before{content:"\e690"}.icon-rss:before{content:"\e691"}.icon-hdd:before{content:"\e692"}.icon-bullhorn:before{content:"\e693"}.icon-bell:before{content:"\e694"}.icon-certificate:before{content:"\e695"}.icon-hand-right:before{content:"\e696"}.icon-hand-left:before{content:"\e697"}.icon-hand-up:before{content:"\e698"}.icon-hand-down:before{content:"\e699"}.icon-circle-arrow-left:before{content:"\e69a"}.icon-circle-arrow-right:before{content:"\e69b"}.icon-circle-arrow-up:before{content:"\e69c"}.icon-circle-arrow-down:before{content:"\e69d"}.icon-globe:before{content:"\e69e"}.icon-wrench:before{content:"\e69f"}.icon-tasks:before{content:"\e6a0"}.icon-filter:before{content:"\e6a1"}.icon-group:before{content:"\e6a4"}.icon-link:before{content:"\e6a5"}.icon-cloud:before{content:"\e6a6"}.icon-beaker:before{content:"\e6a7"}.icon-cut:before{content:"\e6a8"}.icon-copy:before{content:"\e6a9"}.icon-paper-clip:before{content:"\e6aa"}.icon-save:before{content:"\e6ab"}.icon-sign-blank:before{content:"\e6ac"}.icon-bars:before,.icon-reorder:before{content:"\e6ad"}.icon-list-ul:before{content:"\e6ae"}.icon-list-ol:before{content:"\e6af"}.icon-table:before{content:"\e6b2"}.icon-magic:before{content:"\e6b3"}.icon-caret-down:before{content:"\e6b8"}.icon-caret-up:before{content:"\e6b9"}.icon-caret-left:before{content:"\e6ba"}.icon-caret-right:before{content:"\e6bb"}.icon-columns:before{content:"\e6bc"}.icon-sort:before{content:"\e6bd"}.icon-sort-down:before{content:"\e6be"}.icon-sort-up:before{content:"\e6bf"}.icon-envelope-alt:before{content:"\e6c0"}.icon-undo:before{content:"\e6c1"}.icon-dashboard:before{content:"\e6c3"}.icon-comment-alt:before{content:"\e6c4"}.icon-comments-alt:before{content:"\e6c5"}.icon-bolt:before{content:"\e6c6"}.icon-sitemap:before{content:"\e6c7"}.icon-umbrella:before{content:"\e6c8"}.icon-paste:before{content:"\e6c9"}.icon-lightbulb:before{content:"\e6ca"}.icon-exchange:before{content:"\e6cb"}.icon-cloud-download:before{content:"\e6cc"}.icon-cloud-upload:before{content:"\e6cd"}.icon-bell-alt:before{content:"\e6d1"}.icon-coffee:before{content:"\e6d2"}.icon-file-text-alt:before,.icon-file-text-o:before{content:"\e6d4"}.icon-building:before{content:"\e6d5"}.icon-double-angle-left:before{content:"\e6dc"}.icon-double-angle-right:before{content:"\e6dd"}.icon-double-angle-up:before{content:"\e6de"}.icon-double-angle-down:before{content:"\e6df"}.icon-angle-left:before{content:"\e6e0"}.icon-angle-right:before{content:"\e6e1"}.icon-angle-up:before{content:"\e6e2"}.icon-angle-down:before{content:"\e6e3"}.icon-desktop:before{content:"\e6e4"}.icon-laptop:before{content:"\e6e5"}.icon-tablet:before{content:"\e6e6"}.icon-mobile:before{content:"\e6e7"}.icon-circle-blank:before{content:"\e6e8"}.icon-quote-left:before{content:"\e6e9"}.icon-quote-right:before{content:"\e6ea"}.icon-spinner:before{content:"\e6eb"}.icon-circle:before{content:"\e6ec"}.icon-reply:before{content:"\e6ed"}.icon-folder-close-alt:before{content:"\e6ef"}.icon-folder-open-alt:before{content:"\e6f0"}.icon-expand-alt:before{content:"\e6f1"}.icon-collapse-alt:before{content:"\e6f2"}.icon-smile:before{content:"\e6f3"}.icon-frown:before{content:"\e6f4"}.icon-meh:before{content:"\e6f5"}.icon-gamepad:before{content:"\e6f6"}.icon-keyboard:before{content:"\e6f7"}.icon-flag-alt:before{content:"\e6f8"}.icon-flag-checkered:before{content:"\e6f9"}.icon-terminal:before{content:"\e6fa"}.icon-code:before{content:"\e6fb"}.icon-reply-all:before{content:"\e6fc"}.icon-star-half-full:before{content:"\e6fd"}.icon-location-arrow:before{content:"\e6fe"}.icon-crop:before{content:"\e6ff"}.icon-code-fork:before{content:"\e700"}.icon-unlink:before{content:"\e701"}.icon-question:before{content:"\e702"}.icon-info:before{content:"\e703"}.icon-shield:before{content:"\e70b"}.icon-calendar-empty:before{content:"\e70c"}.icon-rocket:before{content:"\e70e"}.icon-chevron-sign-left:before{content:"\e70f"}.icon-chevron-sign-right:before{content:"\e710"}.icon-chevron-sign-up:before{content:"\e711"}.icon-chevron-sign-down:before{content:"\e712"}.icon-html5:before{content:"\e713"}.icon-anchor:before{content:"\e714"}.icon-unlock-alt:before{content:"\e715"}.icon-bullseye:before{content:"\e716"}.icon-ellipsis-h:before{content:"\e717"}.icon-ellipsis-v:before{content:"\e718"}.icon-rss-sign:before{content:"\e719"}.icon-play-sign:before{content:"\e71a"}.icon-minus-sign-alt:before{content:"\e71c"}.icon-plus-sign-alt:before{content:"\f0fe"}.icon-check-minus:before{content:"\e71d"}.icon-check-plus:before{content:"\f196"}.icon-level-up:before{content:"\e71e"}.icon-level-down:before{content:"\e71f"}.icon-check-sign:before{content:"\e720"}.icon-edit-sign:before{content:"\e721"}.icon-external-link-sign:before{content:"\e722"}.icon-share-sign:before{content:"\e723"}.icon-compass:before{content:"\e724"}.icon-collapse:before{content:"\e725"}.icon-collapse-top:before{content:"\e726"}.icon-expand:before{content:"\e727"}.icon-dollar:before{content:"\e728"}.icon-yen:before{content:"\e729"}.icon-file:before{content:"\e72b"}.icon-file-text:before{content:"\e72c"}.icon-sort-by-alphabet:before{content:"\e72d"}.icon-sort-by-alphabet-alt:before{content:"\e72e"}.icon-sort-by-attributes:before{content:"\e72f"}.icon-sort-by-attributes-alt:before{content:"\e730"}.icon-sort-by-order:before{content:"\e731"}.icon-sort-by-order-alt:before{content:"\e732"}.icon-thumbs-up:before{content:"\e733"}.icon-thumbs-down:before{content:"\e734"}.icon-long-arrow-down:before{content:"\e736"}.icon-long-arrow-up:before{content:"\e737"}.icon-long-arrow-left:before{content:"\e738"}.icon-long-arrow-right:before{content:"\e739"}.icon-apple:before{content:"\e73a"}.icon-windows:before{content:"\e73b"}.icon-android:before{content:"\e73c"}.icon-linux:before{content:"\e73d"}.icon-sun:before{content:"\e742"}.icon-moon:before{content:"\e743"}.icon-archive:before{content:"\e744"}.icon-bug:before{content:"\e745"}.icon-alipay:before,.icon-zhifubao:before{content:"\e901"}.icon-alipay-square:before,.icon-zhifubao-square:before{content:"\e900"}.icon-taobao:before{content:"\e902"}.icon-weibo:before{content:"\e746"}.icon-chrome:before{content:"\e76c"}.icon-firefox:before{content:"\e76d"}.icon-ie:before{content:"\e76e"}.icon-opera:before{content:"\e76f"}.icon-safari:before{content:"\e770"}.icon-node:before{content:"\e76a"}.icon-layout:before{content:"\e768"}.icon-usecase:before{content:"\e74a"}.icon-stack:before{content:"\e769"}.icon-branch:before{content:"\e74b"}.icon-chat:before{content:"\e74c"}.icon-chat-line:before,.icon-comment-line:before{content:"\e74f"}.icon-chat-dot:before{content:"\e750"}.icon-cube:before{content:"\e751"}.icon-database:before{content:"\f1c0"}.icon-align-left:before{content:"\e633"}:root{--input-control-fix-width-sm:2rem;--input-control-fix-width:4.375rem;--input-control-fix-width-lg:6.75rem}.input-control{position:relative;--input-control-prefix:8px;--input-control-suffix:8px}.input-control-prefix,.input-control-suffix{align-items:center;display:flex;height:100%;left:0;opacity:.5;padding-left:.5rem;padding-right:.5rem;position:absolute;top:0;white-space:nowrap;width:var(--input-control-prefix);z-index:1}.input-control-suffix{justify-content:flex-end;left:auto;right:0;width:var(--input-control-suffix)}.form-control:focus+.input-control-prefix,.form-control:focus+.input-control-suffix{opacity:1}.input-control>.form-control{padding-left:var(--input-control-prefix);padding-right:var(--input-control-suffix)}.input-control>select.form-control{background-position-x:calc(100% - var(--input-control-suffix) - 8px);padding-right:calc(var(--input-control-suffix) + 20px)}.has-prefix{--input-control-prefix:var(--input-control-fix-width)}.has-suffix{--input-control-suffix:var(--input-control-fix-width)}.has-prefix-sm{--input-control-prefix:var(--input-control-fix-width-sm)}.has-suffix-sm{--input-control-suffix:var(--input-control-fix-width-sm)}.has-prefix-lg{--input-control-prefix:var(--input-control-fix-width-lg)}.has-suffix-lg{--input-control-suffix:var(--input-control-fix-width-lg)}.has-prefix-icon{--input-control-prefix:32px}.has-suffix-icon{--input-control-suffix:32px}.input-control.has-prefix-icon{--input-control-prefix:32px}.input-control.has-suffix-icon{--input-control-suffix:32px}.input-control.has-prefix-icon>.input-control-prefix,.input-control.has-suffix-icon>.input-control-suffix{justify-content:center;padding:0}.input-control.size-sm>.form-control,.input-control.size-sm>.input-control-prefix,.input-control.size-sm>.input-control-suffix{font-size:.75rem;line-height:1rem}.input-control.size-lg>.form-control,.input-control.size-lg>.input-control-prefix,.input-control.size-lg>.input-control-suffix{font-size:1rem;line-height:1.5rem}:root{--label-bg:rgba(var(--color-canvas-rgb),.1);--label-border-color:var(--color-gray-300);--label-color:var(--color-gray-500);--label-radius:var(--radius)}.label{align-items:center;background-color:var(--label-bg);border-radius:var(--label-radius);color:var(--label-color);display:inline-flex;font-size:.75rem;height:1.25rem;justify-content:center;line-height:1rem;min-width:1.25rem;padding-left:.25rem;padding-right:.25rem;white-space:pre-line;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--label-border-color)}.label.size-lg{font-size:.8125rem;height:1.5rem;line-height:1.25rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}.label.size-sm{height:1rem;min-width:1rem}.label-dot{aspect-ratio:1/1;border-radius:var(--radius-full);height:.5rem;min-width:0;padding-left:0;padding-right:0}.caret,.caret-down,.caret-left,.caret-right,.caret-up{align-items:center;display:inline-flex;height:.75rem;justify-content:center;position:relative;width:.75rem}.caret-down:before,.caret-left:before,.caret-right:before,.caret-up:before,.caret:before{display:block;height:.35rem;transform-origin:center;width:.35rem;--tw-translate-y:-1px;--tw-rotate:45deg;border-color:currentColor;border-width:0 1px 1px 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-content:"";content:var(--tw-content)}.caret-left:before{--tw-translate-x:0.125rem;--tw-translate-y:0px;--tw-rotate:135deg}.caret-left:before,.caret-right:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.caret-right:before{--tw-translate-x:-0.125rem;--tw-translate-y:0px;--tw-rotate:-45deg}.caret-up:before{--tw-translate-y:0.125rem;--tw-rotate:225deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:focus>.caret,:hover>.caret{opacity:inherit}.disabled .caret,.readonly .caret{opacity:var(--caret-opacity,.5)}.magnifier{display:inline-block;height:1em;position:relative;width:1em}.magnifier:after,.magnifier:before{border-radius:var(--radius-full);content:"";display:block;position:absolute}.magnifier:before{border:1px solid;height:.75em;width:.75em}.magnifier:after{height:1px;left:.55em;top:.7em;width:.5em;--tw-rotate:45deg;background-color:currentColor;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close{aspect-ratio:1/1;display:block;position:relative;width:1em}.close:after,.close:before{content:"";display:block;height:1px;left:0;position:absolute;width:100%;--tw-rotate:45deg;background-color:currentColor;border-radius:var(--radius-full);top:calc(50% - .5px)}.close:after,.close:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close:after{--tw-rotate:-45deg}.search-box.compact.has-prefix-icon{--input-control-prefix:24px}.search-box.compact.has-suffix-icon{--input-control-suffix:24px}:root{--menu-bg:var(--color-canvas);--menu-active-bg:var(--color-primary-500);--menu-active-color:var(--color-canvas);--menu-selected-bg:var(--color-primary-50);--menu-selected-color:var(--color-primary-500);--menu-icon-opacity:.5;--menu-icon-margin:1.75rem;--menu-min-width:3rem;--menu-heading-color:var(--color-gray-500)}.menu{background:var(--menu-bg);max-width:var(--menu-max-width);min-width:var(--menu-min-width);padding:.5rem}.menu-wrapper{display:flex;flex-direction:column;min-height:0}.menu-wrapper>.menu{flex:1 1 auto;min-height:0;overflow:auto}.menu-item>.item-inner,.menu-item>a{align-items:center;border-radius:var(--radius);color:inherit;cursor:pointer;display:flex;gap:.5rem;justify-content:space-between;overflow:hidden;padding:.25rem .5rem;position:relative;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.menu-item>.selected{background:var(--menu-selected-bg);color:var(--menu-selected-color)}.menu-item>.active,.menu-item>a.hover,.menu-item>a:hover{background:var(--menu-active-bg);color:var(--menu-active-color)}.menu-item.disabled>a:hover,.menu-item>a.disabled:hover{background-color:inherit;color:inherit}.menu-item>a>.item-title{flex:1 1 auto}.menu>.divider{margin:.5rem .25rem}.menu-heading{align-items:center;color:var(--menu-heading-color);display:flex;font-size:.75rem;font-weight:700;height:2rem;line-height:1rem;padding-left:.25rem;padding-right:.25rem}.has-icons>.menu-item>a>.item-icon{align-items:center;display:flex;height:1rem;justify-content:center;opacity:var(--menu-icon-opacity);width:1rem}.menu-nested{--menu-indent:10px}.menu-nested .menu{background-color:transparent;margin-bottom:-.5rem;margin-left:var(--menu-indent);margin-top:-.5rem;padding-right:0}.menu-nested .menu-item>.item-inner{padding-left:0}.menu.compact .menu-item>a{padding-bottom:.125rem;padding-top:.125rem}.menu.compact .menu-heading{height:1.75rem}.search-menu-header{padding:.5rem .5rem .125rem}.search-menu-footer{padding:.125rem .5rem .5rem}.search-menu .item.is-not-match,.search-menu-footer:empty,.search-menu-header:empty{display:none}.search-menu .item.is-not-match.has-match-child{display:list-item}.search-menu .item.is-not-match.has-match-child>.item-inner{opacity:.5;pointer-events:none}.search-menu.no-toggle-on-search .nested-toggle-icon{pointer-events:none}.search-menu .is-match-keys{font-weight:700;text-decoration-line:underline}.search-menu-no-match-hint{display:none;font-size:.75rem;line-height:1rem;padding:.5rem;--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.no-match-child .search-menu-no-match-hint{display:block}.no-match-child>.menu{display:none}:root{--alert-bg:var(--color-surface)}.alert{align-items:center;background-color:var(--alert-bg);border-radius:var(--radius);display:flex;gap:.75rem;padding:.5rem .75rem}.alert-content{display:flex;flex:1 1 auto;flex-direction:column;gap:1rem}.alert-close{margin-bottom:-.375rem;margin-right:-.5rem;margin-top:-.375rem}.alert-link{color:inherit;font-weight:700}.alert-link:hover{color:inherit;text-decoration-line:underline}.alert-heading{font-weight:700;margin:0}.alert-text{flex:1 1 auto;white-space:pre-line}.alert-actions{align-items:center;display:flex;gap:.5rem}.close{aspect-ratio:1/1;display:block;position:relative;width:1em}.close:after,.close:before{content:"";display:block;height:1px;left:0;position:absolute;width:100%;--tw-rotate:45deg;background-color:currentColor;border-radius:var(--radius-full);top:calc(50% - .5px)}.close:after,.close:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close:after{--tw-rotate:-45deg}.messagers{align-items:flex-end;bottom:0;display:flex;flex-direction:column;gap:.5rem;justify-content:flex-end;left:0;padding:1rem;pointer-events:none;position:fixed;right:0;top:0;z-index:1900}.messagers-top-left,.messagers-top-right{justify-content:flex-start}.messagers-bottom-left,.messagers-top-left{align-items:flex-start}.messagers-bottom,.messagers-center,.messagers-top{align-items:center}.messagers-top,.messagers-top-left,.messagers-top-right{justify-content:flex-start}.messagers-center{justify-content:center}.messager{background-color:rgba(var(--color-inverse-rgb),.8);pointer-events:auto;--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity));--tw-shadow:var(--shadow-xl);--tw-shadow-colored:var(--shadow-xl);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-duration:.3s}:root{--progress-radius:var(--radius);--progress-striped-size:40px;--progress-bg:var(--color-surface);--progress-bar-color:var(--color-primary-500)}.progress{background:var(--progress-bg);border-radius:var(--progress-radius);display:flex;height:1.25rem}.progress-bar{background:var(--progress-bar-color);height:100%;transition-duration:.5s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-striped>.progress-bar{background-image:linear-gradient(45deg,rgba(var(--color-canvas-rgb),.15) 25%,transparent 25%,transparent 50%,rgba(var(--color-canvas-rgb),.15) 50%,rgba(var(--color-canvas-rgb),.15) 75%,transparent 75%,transparent);background-size:var(--progress-striped-size) var(--progress-striped-size)}.progress>.progress-bar:first-child{border-bottom-left-radius:inherit;border-top-left-radius:inherit}.progress>.progress-bar:last-child{border-bottom-right-radius:inherit;border-top-right-radius:inherit}.progress.active .progress-bar{animation:progress-bar-stripes 2s linear infinite}@keyframes progress-bar-stripes{0%{background-position:40px 0}to{background-position:0 0}}:root{--scrollbar-size:10px;--scrollbar-opacity:.6;--scrollbar-bg:rgba(var(--color-inverse-rgb),.15);--scrollbar-inset:inset 0 0 0 1px rgba(var(--color-inverse-rgb),.05);--scrollbar-bar-bg:rgba(var(--color-inverse-rgb),.3);--scrollbar-hover-bg:rgba(var(--color-inverse-rgb),.4);--scrollbar-drag-bg:rgba(var(--color-inverse-rgb),.5);--scrollbar-radius:var(--radius-sm);--scrollbar-duration:.7s}::-webkit-scrollbar{height:var(--scrollbar-size);width:var(--scrollbar-size)}::-webkit-scrollbar-track{box-shadow:var(--scrollbar-shadow);-webkit-transition:background-color var(--scrollbar-duration);transition:background-color var(--scrollbar-duration)}::-webkit-scrollbar-track:hover,:hover::-webkit-scrollbar-track{background:var(--scrollbar-bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar-bar-bg);border-radius:var(--scrollbar-radius);min-height:var(--scrollbar-size);-webkit-transition:var(--scrollbar-duration);transition:var(--scrollbar-duration);-webkit-transition-property:background-color;transition-property:background-color}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover-bg)}::-webkit-scrollbar-thumb:active{background:var(--scrollbar-drag-bg)}@-moz-document url-prefix(){.scrollbar-thin{scrollbar-width:thin}}.scrollbar-thin::-webkit-scrollbar{height:calc(var(--scrollbar-size)/2);width:calc(var(--scrollbar-size)/2)}.scrollbar-hover::-webkit-scrollbar,.scrollbar-hover::-webkit-scrollbar-thumb,.scrollbar-hover::-webkit-scrollbar-track{visibility:hidden}.scrollbar-hover:hover::-webkit-scrollbar,.scrollbar-hover:hover::-webkit-scrollbar-thumb,.scrollbar-hover:hover::-webkit-scrollbar-track{visibility:visible}:root{--avatar-radius:12.5%;--avatar-bg:var(--color-surface)}.avatar{align-items:center;aspect-ratio:1/1;background:var(--avatar-bg);border-radius:var(--avatar-radius);display:inline-flex;justify-content:center;overflow:hidden;width:2rem}.avatar>img{height:100%;margin:0;-o-object-fit:cover;object-fit:cover;width:100%}.avatar.size-xs{width:1.25rem}.avatar.size-sm,.avatar.size-xs{font-size:.75rem;line-height:1rem}.avatar.size-sm{width:1.5rem}.avatar.size-lg{font-size:1.5rem;line-height:2rem;width:3rem}.avatar.size-xl{font-size:2.25rem;line-height:2.5rem;width:5rem}.avatar-group{display:flex;gap:.625rem}.avatar-group>.avatar{box-shadow:0 0 0 1px var(--color-canvas)}.avatar-group>*+*{margin-left:-1rem}.avatar-group.size-xs>*+*{margin-left:-.75rem}.avatar-group.size-sm>*+*{margin-left:-.875rem}.avatar-group.size-lg>*+*{margin-left:-1.25rem}.avatar-group.size-xl>*+*{margin-left:-1.5rem}.btn-group{display:flex;gap:1px}.btn-group>.btn.active{z-index:1}.btn-group>.btn:focus-within,.btn-group>.btn:hover{z-index:2}.btn-group>.btn.disabled,.btn-group>.btn:disabled{z-index:0}.btn-group>.btn:not(:first-child){border-bottom-left-radius:var(--radius-none);border-left-color:rgba(var(--color-canvas-rgb),.2);border-left-width:1px;border-top-left-radius:var(--radius-none)}.btn-group>.btn:not(:first-child):before{left:-1px}.btn-group>.btn:not(:last-child){border-bottom-right-radius:var(--radius-none);border-top-right-radius:var(--radius-none)}.color-picker-heading{align-items:center;font-weight:700;justify-content:space-between;margin-bottom:-.25rem;padding:.5rem}.color-picker-heading,.color-picker-row{display:flex;flex-direction:row}.color-picker-row{flex-wrap:wrap;gap:.5rem;padding:.75rem}.color-picker-item{align-items:center;border-radius:var(--radius-full);display:flex;height:1.25rem;justify-content:center;padding-left:.125rem;padding-right:.125rem;width:1.25rem;--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.pick-container{left:0;pointer-events:none;position:absolute;top:0;z-index:1600}.pick-pop{display:flex;flex-direction:column;opacity:0;pointer-events:auto;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);z-index:1200}.pick-pop.in{opacity:1}.date-picker-menu{--menu-bg:none}.date-picker-menu .mini-calendar{margin-top:-.75rem}.date-pick-menu-month,.date-pick-menu-years{display:flex;flex-direction:row;flex-wrap:wrap;gap:1px;max-height:237px;padding-bottom:.5rem;padding-left:.5rem;padding-right:.5rem}.date-pick-menu-years>.btn{width:2.5rem}.date-pick-menu-years>.btn.is-current{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-100-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.date-pick-menu-month>.btn.active,.date-pick-menu-years>.btn.active{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-500-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.date-pick-menu-month>.btn{width:3rem}.date-picker-menu-footer{border-top-width:1px;display:flex;flex-direction:row;padding:.25rem}.date-picker-menu-footer>.toolbar{flex:1 1 auto;justify-content:center}.date-picker-menu>.menu{border-right-width:1px}.date-picker-menu .menu-item{--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.time-picker-menu{max-height:inherit}.time-picker-menu .menu-item>a{justify-content:center}.datetime-picker-menu{max-height:inherit}.mini-calendar{padding:.5rem}.mini-calendar>.row>.col{align-items:center;justify-content:center;width:14.2857%}.mini-calendar-day{height:2rem}.mini-calendar-day.disabled{pointer-events:none;--tw-bg-opacity:1;background-color:rgba(var(--color-gray-200-rgb),var(--tw-bg-opacity));opacity:.5}.mini-calendar-day>.btn{width:2rem}.mini-calendar-day.is-weekend>.btn{--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.mini-calendar-day.active>.btn,.mini-calendar-day.is-today>.btn{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-100-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.mini-calendar-day.selected>.btn{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-500-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.mini-calendar-day.is-out-month{opacity:.5}.i-time{border-color:currentColor;border-radius:50%;border-width:.08em;display:inline-block;height:1em;position:relative;width:1em}.i-time:after{border-color:currentColor;border-width:0 0 .08em .08em;height:.385em;left:.3846em;position:absolute;top:.08em;width:.385em;--tw-content:"";content:var(--tw-content)}.chevron-down,.chevron-left,.chevron-right,.chevron-up{align-items:center;display:inline-flex;height:1em;justify-content:center;position:relative;width:1em}.chevron-down:before,.chevron-left:before,.chevron-right:before,.chevron-up:before{display:block;height:.6923077em;transform-origin:center;width:.6923077em;--tw-translate-y:-0.125rem;--tw-rotate:45deg;border-color:currentColor;border-width:0 1px 1px 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-content:"";content:var(--tw-content)}.chevron-left:before{--tw-translate-y:0px;--tw-translate-x:0.125rem;--tw-rotate:135deg}.chevron-left:before,.chevron-right:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.chevron-right:before{--tw-translate-y:0px;--tw-translate-x:-0.125rem;--tw-rotate:-45deg}.chevron-up:before{--tw-translate-y:0.125rem;--tw-rotate:225deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.i-calendar{border-radius:2px;display:inline-block;height:.79em;margin-top:.16em;position:relative;width:1em}.i-calendar,.i-calendar:after,.i-calendar:before{border-color:currentColor;border-width:.08em}.i-calendar:after,.i-calendar:before{position:absolute;--tw-content:"";content:var(--tw-content)}.i-calendar:before{border-bottom-width:0;left:.15em;top:.307em;width:.6em}.i-calendar:after{border-bottom-width:0;border-top-width:0;height:.3077em;left:.17em;top:-.154em;width:.538em}:root{--modal-radius:var(--radius-lg);--modal-bg:rgba(var(--color-inverse-rgb),.4);--modal-sm:37.5rem;--modal-base:50rem;--modal-lg:75rem;--modal-xl:90rem}.modal{align-items:center;background-color:var(--modal-bg);bottom:0;display:none;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:1500}.modal.load-indicator:before{background-color:transparent;transition-property:none}.modal.loading:after{--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.modal.loading .modal-dialog{opacity:0!important}.modal.show{display:flex}.modal-no-backdrop{background-color:transparent;pointer-events:none}.modal-hide{opacity:0!important}.modal-dialog{background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity));pointer-events:auto;position:relative;--tw-bg-opacity:0.9;--tw-shadow:var(--shadow-2xl);--tw-shadow-colored:var(--shadow-2xl);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.05;--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);border-radius:var(--modal-radius);width:var(--modal-base)}.modal-content,.modal-dialog{max-height:100vh}.modal-content{display:flex;flex-direction:column;height:100%}.loading>.modal-dialog>.modal-content{opacity:0;visibility:hidden}.close{aspect-ratio:1/1;display:block;position:relative;width:1em}.close:after,.close:before{content:"";display:block;height:1px;left:0;position:absolute;width:100%;--tw-rotate:45deg;background-color:currentColor;border-radius:var(--radius-full);top:calc(50% - .5px)}.close:after,.close:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close:after{--tw-rotate:-45deg}.modal-header{align-items:center;display:flex;flex:none;flex-wrap:nowrap;gap:1rem;padding:1rem 1.25rem;position:relative}.modal-title{flex:1 1 auto;font-size:1rem;font-weight:700;line-height:1.5rem}.modal-actions{position:absolute;right:.75rem;top:.75rem;z-index:15}.modal-body{flex:1 1 auto;overflow:auto;padding:1rem 1.25rem}.modal-footer{align-items:center;display:flex;flex:none;gap:.75rem;padding:1.25rem}.modal-dialog.size-full,.modal-dialog[data-size=full]{border-radius:var(--radius-none);height:100vh;width:100vw}.modal-dialog.size-sm,.modal-dialog[data-size=sm]{width:var(--modal-sm)}.modal-dialog.size-lg,.modal-dialog[data-size=lg]{width:var(--modal-lg)}.modal-dialog.size-xl,.modal-dialog[data-size=xl]{width:var(--modal-xl)}.modal-iframe{flex:1 1 auto;width:100%}.modal-trans{opacity:0;transition-duration:.2s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.modal-trans.in{opacity:1}.modal-trans>.modal-dialog{transition-property:transform,opacity;--tw-scale-x:.95;--tw-scale-y:.95;opacity:0;transition-duration:.3s}.modal-trans.in>.modal-dialog,.modal-trans>.modal-dialog{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-trans.in>.modal-dialog{--tw-scale-x:1;--tw-scale-y:1;opacity:1}.modal-alert .modal-footer{justify-content:flex-end}.modal-alert .modal-header{margin-bottom:-1rem}.modal-alert .modal-body{overflow-wrap:break-word;white-space:pre-line}.modal-alert .modal-actions+.modal-body{padding-right:3rem}.modal-alert .modal-header+.modal-actions+.modal-body{padding-right:1.25rem}.file-selector{gap:.5rem;width:100%}.file-selector,.file-selector-box{display:flex;flex-direction:column}.file-selector-box{border-style:dashed;border-width:1px;gap:0;height:auto;justify-content:center;position:relative;--tw-border-opacity:1;background-color:rgba(var(--color-primary-50-rgb),.3);border-color:rgba(var(--color-primary-400-rgb),var(--tw-border-opacity));padding:.5rem .75rem;--tw-ring-color:transparent;--state-color:rgba(var(--color-primary-500-rgb),.05)}.file-selector-box .text{--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.is-dragging .file-selector-box{border-style:solid}.file-selector-btn{align-items:center;display:flex;gap:.5rem;position:relative}.is-dragging .file-selector-btn{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-50-rgb),var(--tw-bg-opacity))}.file-selector-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;bottom:0;cursor:pointer;left:0;opacity:.1;position:absolute;right:0;top:0}.file-selector-tip{--tw-text-opacity:1;color:rgba(var(--color-gray-400-rgb),var(--tw-text-opacity))}.file-selector.is-mode-button{flex-direction:column-reverse}.file-selector-list.is-empty{display:none}.file-selector-item .item-avatar{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-50-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.file-selector-item .item-subtitle{--tw-text-opacity:1;color:rgba(var(--color-gray-400-rgb),var(--tw-text-opacity))}.file-selector-item .item-content{flex:none;margin-right:.25rem;max-width:100%}.file-selector-item>.listitem:hover{background-color:rgba(var(--color-gray-500-rgb),.05)}.file-selector-item.is-renaming .item-avatar+.item-content{max-width:calc(100% - 32px)}.file-selector-rename-text{max-width:100%;min-width:100px;position:relative}.file-selector-rename-text>div{overflow:hidden;pointer-events:none;visibility:hidden;white-space:nowrap}.file-selector-rename-input{bottom:0;left:0;position:absolute;right:0;top:0}.file-selector-grid{align-items:flex-start;border-color:transparent;border-radius:var(--radius);border-width:1px;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--file-selector-grid-gap);--tw-bg-opacity:1;background-color:rgba(var(--color-surface-light-rgb),var(--tw-bg-opacity));padding:.5rem}.file-selector-grid-item{height:var(--file-selector-grid-height)}.file-selector-grid-btn,.file-selector-grid-item{width:var(--file-selector-grid-width)}.file-selector-grid-btn{aspect-ratio:1/1;border-style:dashed;border-width:1px;display:flex;flex-direction:column;gap:0;height:auto;justify-content:center;--tw-border-opacity:1;background-color:rgba(var(--color-primary-50-rgb),.3);border-color:rgba(var(--color-primary-400-rgb),var(--tw-border-opacity));padding:.5rem;--tw-ring-color:transparent;--state-color:rgba(var(--color-primary-500-rgb),.05)}.file-selector-grid-btn .text{--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.file-selector-grid-item .listitem{flex-direction:column;height:100%;padding:0;position:relative;width:100%}.file-selector-grid-item .item-avatar{border-radius:var(--radius);border-width:1px;width:100%;--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.file-selector-grid-item .item-avatar.has-icon>.icon{font-size:calc(var(--file-selector-grid-width)/2)}.file-selector-grid-item .item-content,.file-selector-grid-item .toolbar{aspect-ratio:1/1;left:0;position:absolute;right:0;top:0;width:100%}.file-selector-grid-item .item-title{bottom:-1.25rem;font-size:.75rem;left:0;line-height:1rem;overflow:hidden;position:absolute;right:1.5rem;white-space:nowrap}.file-selector-grid-item .item-subtitle{border-radius:var(--radius-full);bottom:.25rem;left:.25rem;position:absolute;--tw-bg-opacity:1;background-color:rgba(var(--color-fore-rgb),var(--tw-bg-opacity));font-size:.75rem;line-height:1rem;padding-left:.25rem;padding-right:.25rem;--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity));opacity:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.file-selector-grid-item:hover .item-subtitle{opacity:1}.file-selector-grid-item .toolbar .btn[data-remove-file]{background-color:rgba(var(--color-inverse-rgb),.5);padding:.375rem;position:absolute;right:1px;top:1px;--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.file-selector-grid-item .toolbar .btn[data-rename-file]{bottom:-1.5rem;padding:0;position:absolute;right:0}.file-selector-grid .file-selector-rename{bottom:0;height:1.5rem;position:absolute;top:auto}.file-selector-grid .file-selector-rename-text{width:100%}.is-dragging .file-selector-grid{border-width:1px;--tw-border-opacity:1;border-color:rgba(var(--color-primary-400-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-primary-50-rgb),var(--tw-bg-opacity))}:root{--nav-radius:var(--radius);--nav-active-color:var(--color-primary-500);--nav-active-bg:var(--color-inherit);--nav-heading-color:var(--color-gray-500);--nav-gap:0.25rem;--nav-item-color:inherit;--nav-item-bg:transparent;--nav-item-padding:1rem;--nav-item-height:2rem;--nav-item-gap:0.75rem;--nav-divider-height:calc(var(--nav-item-height)/2);--nav-divider-margin:0.5rem}.nav{list-style-type:none;padding-left:0}.nav,.nav-item{align-items:center;display:flex;position:relative}.nav-item{gap:var(--nav-item-gap)}.nav-item>a{align-items:center;background-color:var(--nav-item-bg);color:var(--nav-item-color);cursor:pointer;display:flex;gap:var(--nav-gap);height:var(--nav-item-height);justify-content:center;padding-left:var(--nav-item-padding);padding-right:var(--nav-item-padding)}.nav-item>a>.text{white-space:nowrap}.nav-item>.active{font-weight:700;--nav-item-color:var(--nav-active-color);--nav-item-bg:var(--nav-active-bg)}.nav-item>.selected{--nav-item-color:var(--nav-selected-color);--nav-item-bg:var(--nav-selected-bg)}.nav-item>.disabled{--nav-item-color:var(--nav-disabled-color);--nav-item-bg:var(--nav-disabled-bg)}.nav-item>.disabled>*{opacity:var(--opacity-disabled)}.nav-divider,.nav>.divider{align-self:center;height:var(--nav-divider-height);margin-left:var(--nav-divider-margin);margin-right:var(--nav-divider-margin)}.nav-heading{align-items:center;color:var(--nav-heading-color);display:flex;font-weight:700;gap:.25rem;height:2rem;justify-content:center;padding-left:1rem;padding-right:1rem}.nav-space{flex:1 1 auto;width:1rem}.nav-compact{--nav-gap:0.25rem;--nav-item-gap:0.5rem;--nav-item-height:1.75rem;--nav-item-padding:0.5rem;--nav-divider-margin:0.25rem}.nav-primary>.nav-item{position:relative}.nav-primary>.nav-item:hover{z-index:10}.nav-primary>.nav-item+.nav-item{margin-left:-1px}.nav-primary>.nav-item>a{border-radius:var(--radius-none);border-width:1px}.nav-primary>.nav-item:first-child>a,.nav-primary>.nav-item:has(.nav-heading)+.nav-item>a{border-bottom-left-radius:var(--nav-radius);border-top-left-radius:var(--nav-radius)}.nav-primary>.nav-item:last-child>a{border-bottom-right-radius:var(--nav-radius);border-top-right-radius:var(--nav-radius)}.nav-primary>.nav-item>.active{--tw-text-opacity:1;background:var(--nav-active-color);border-color:var(--nav-active-color);color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.nav-primary>.nav-divider{display:none}.nav-secondary>.nav-item>a{border-radius:var(--radius-none);position:relative}.nav-secondary>.nav-item>a:after{bottom:-2px;display:block;height:2px;left:0;position:absolute;right:0;--tw-bg-opacity:1;background-color:rgba(var(--color-border-rgb),var(--tw-bg-opacity));--tw-content:"";content:var(--tw-content)}.nav-secondary>.nav-item>.active:after{background-color:currentColor}.nav-secondary>.nav-divider{margin:0 0 0 -1px}.nav-tabs>.nav-item>a{border-bottom-left-radius:var(--radius-none);border-bottom-right-radius:var(--radius-none);position:relative}.nav-tabs>.nav-item>a:after{border-color:transparent;border-width:1px;bottom:-1px;display:block;left:-1px;pointer-events:none;position:absolute;right:-1px;top:-1px;--tw-border-opacity:1;border-bottom-color:rgba(var(--color-border-rgb),var(--tw-border-opacity));--tw-content:"";border-top-left-radius:inherit;border-top-right-radius:inherit;content:var(--tw-content)}.nav-tabs>.nav-item>.active:after{--tw-border-opacity:1;border-color:rgba(var(--color-border-rgb),var(--tw-border-opacity));border-bottom-color:transparent}.nav-tabs>.nav-divider{margin:0 0 0 -1px}.nav-pills>.nav-item>a{border-radius:var(--radius-full)}.nav-pills>.nav-item>.active{--tw-text-opacity:1;background:var(--nav-active-color);border-color:var(--nav-active-color);color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.nav-steps{--nav-item-bg:var(--color-canvas);--nav-active-bg:var(--color-primary-500);--nav-active-color:var(--color-canvas);--nav-selected-bg:var(--color-secondary-500);--nav-selected-color:var(--color-canvas)}.nav-steps>.nav-item+.nav-item>a{padding-left:calc(var(--nav-item-padding) + var(--nav-item-height)/3)}.nav-steps>.nav-item>a:after,.nav-steps>.nav-item>a:before{border-style:solid;height:0;left:100%;position:absolute;width:0;z-index:2;--tw-content:"";border-color:transparent;border-left-color:var(--nav-item-bg,var(--color-canvas));border-width:calc(var(--nav-item-height)/2);border-left-width:calc(var(--nav-item-height)/3);border-right-width:0;content:var(--tw-content)}.nav-steps>.nav-item>a:before{background-color:transparent!important;border-left-color:var(--color-border);bottom:auto;left:calc(100% + 5.5px);opacity:1!important;right:auto;top:.4rem;transform:none;z-index:1;--nav-item-height:1.2rem}.nav-steps>.nav-item:has(+.nav-item>.active)>.selected:before,.nav-steps>.nav-item:has(+.nav-item>.active,+.nav-item>.selected)>a:not(.active,.selected):before,.nav-steps>.nav-item:has(+.nav-item>.selected)>.active:before,.nav-steps>.nav-item:last-child>a:after,.nav-steps>.nav-item:last-child>a:before{display:none}.nav-steps>.nav-item>a:hover{--nav-item-bg:var(--color-gray-100)}.nav-steps>.nav-item>.active:hover{--nav-item-bg:var(--color-primary-600)}.nav-steps>.nav-item>.selected:hover{--nav-item-bg:var(--color-secondary-600)}.nav-stacked{flex-direction:column}.nav-stacked>.nav-item{width:100%}.nav-stacked>.nav-heading,.nav-stacked>.nav-item>a{justify-content:flex-start;width:100%}.nav-stacked>.nav-divider{height:1px;margin:.5rem 0;width:100%}.nav-primary.nav-stacked>.nav-item>a{height:2.5rem}.nav-primary.nav-stacked>.nav-item+.nav-item{margin-left:0;margin-top:-1px}.nav-primary.nav-stacked>.nav-item:first-child>a{border-bottom-left-radius:0;border-top-left-radius:var(--nav-radius);border-top-right-radius:var(--nav-radius)}.nav-primary.nav-stacked>.nav-item:last-child>a{border-bottom-left-radius:var(--nav-radius);border-bottom-right-radius:var(--nav-radius);border-top-right-radius:0}.nav-secondary.nav-stacked>.nav-item>a:after{bottom:0;height:100%;left:auto;right:0;top:0;width:2px;--tw-bg-opacity:1;background-color:rgba(var(--color-border-rgb),var(--tw-bg-opacity))}.nav-secondary.nav-stacked>.nav-item>.active:after{background-color:currentColor}.nav-secondary.nav-stacked>.nav-divider{margin:0}.nav-tabs.nav-stacked>.nav-item>a{border-bottom-left-radius:var(--nav-radius);border-bottom-right-radius:var(--radius-none);border-top-right-radius:var(--radius-none);position:relative}.nav-tabs.nav-stacked>.nav-item>a:after{--tw-border-opacity:1;border-bottom-color:transparent;border-bottom-left-radius:inherit;border-right-color:rgba(var(--color-border-rgb),var(--tw-border-opacity));border-top-left-radius:inherit}.nav-tabs.nav-stacked>.nav-item>a.active:after{--tw-border-opacity:1;border-color:rgba(var(--color-border-rgb),var(--tw-border-opacity));border-right-color:transparent}.nav-tabs.nav-stacked>.nav-divider{margin:0}.nav-pills.nav-stacked>.nav-item+.nav-item{margin-top:.25rem}.nav-justified>.nav-item:not(.flex-none,.nav-divider){flex:1 1 auto}.nav-justified>.nav-item>a{width:100%}.arrow,.arrow:before{background:inherit;height:calc(var(--arrow-size)*1.4142);position:absolute;width:calc(var(--arrow-size)*1.4142)}.arrow{visibility:hidden;--arrow-size:5px}.arrow:before{border:inherit;content:"";visibility:visible;--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.arrow-top,.arrow-up{border-bottom:inherit;border-right:inherit;border-width:1px 0 0 1px;top:calc(1px - var(--arrow-size))}.white>.arrow-top,.white>.arrow-up{top:calc(0px - var(--arrow-size))}.arrow-bottom,.arrow-down{border-left:inherit;border-top:inherit;border-width:0 1px 1px 0;bottom:calc(1px - var(--arrow-size))}.white>.arrow-bottom,.white>.arrow-down{bottom:calc(0px - var(--arrow-size))}.arrow-left{border-right:inherit;border-top:inherit;border-width:0 0 1px 1px;left:calc(1px - var(--arrow-size))}.white>.arrow-left{left:calc(0px - var(--arrow-size))}.arrow-right{border-bottom:inherit;border-left:inherit;border-width:1px 1px 0 0;right:calc(1px - var(--arrow-size))}.white>.arrow-right{right:calc(0px - var(--arrow-size))}.popover{display:none;position:absolute;width:-moz-max-content;width:max-content}.popover.show{display:block}.popover-heading{align-items:center;border-top-left-radius:inherit;border-top-right-radius:inherit;display:flex;gap:1rem;height:2.5rem;justify-content:space-between;position:relative;z-index:1;--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity));padding-left:.75rem;padding-right:.5rem}.popover-title{flex:1 1 auto;font-weight:700}.popover-content{padding:.75rem;position:relative;z-index:1}.popover-arrow{z-index:0}.has-heading>.popover-arrow.arrow-top,.has-heading>.popover-arrow.arrow-up{--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity))}.popover>.btn-close{position:absolute;right:.5rem;top:.625rem;z-index:2}.btn-close+.popover-content{padding-right:3rem}.btn.with-popover-show{--tw-shadow:var(--shadow-inner);--tw-shadow-colored:var(--shadow-inner);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.with-popover-show[data-pop-placement=top]>.caret{--tw-rotate:180deg}.with-popover-show[data-pop-placement=left]>.caret,.with-popover-show[data-pop-placement=top]>.caret{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.with-popover-show[data-pop-placement=left]>.caret{--tw-rotate:90deg}.with-popover-show[data-pop-placement=right]>.caret{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.pager{align-items:center;display:flex;gap:.25rem;white-space:nowrap}.menu.pager-size-menu{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}.menu.pager-size-menu>.menu-item>a{margin:.125rem}.pager .pager-goto-group>.form-control{width:3rem}.pager .pager-goto-group>.input-group-addon{border-width:1px;--tw-border-opacity:1;border-color:rgba(var(--color-gray-300-rgb),var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity))}.pager>.pager-nav.active{--tw-text-opacity:1;box-shadow:0 0 0 1px var(--color-primary-500);color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.panel{border-radius:var(--radius);overflow:hidden;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.05}.panel-heading{background-color:var(--panel-heading-bg);flex-wrap:nowrap;gap:1rem;justify-content:space-between;padding:.5rem 1rem}.panel-heading,.panel-title{align-items:center;display:flex}.panel-title{font-weight:700;gap:.5rem;margin:0}.panel-actions{align-items:center;display:flex;margin-right:-.5rem}.panel-body{padding:.75rem 1rem}.panel-footer{align-items:center;background-color:var(--panel-footer-bg);display:flex;gap:.5rem;padding:.5rem 1rem}.size-sm .panel-body,.size-sm .panel-footer,.size-sm .panel-heading{padding:.375rem .75rem}.size-lg .panel-body,.size-lg .panel-footer,.size-lg .panel-heading{padding:1rem 1.25rem}.picker{position:relative}.picker-select{align-items:center;gap:.25rem;justify-content:space-between}.picker-select,.picker-select.form-control{display:flex}.picker-select-placeholder{flex:1 1 auto;--tw-text-opacity:1;color:rgba(var(--color-placeholder-rgb),var(--tw-text-opacity))}.picker-select-multi .picker-select-placeholder{padding-left:.25rem;padding-right:.25rem}.picker-single-selection{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap}.picker-deselect-btn{border-radius:var(--radius-full);padding:.25rem}.picker-deselect-btn:not(:hover){opacity:.7}.picker-select-multi.form-control{height:auto;min-height:32px;padding-left:.25rem}.picker-multi-selections{display:flex;flex-wrap:wrap;gap:.25rem;min-width:0}.picker-multi-selection{align-items:center;border-radius:var(--radius-full);border-width:1px;display:flex;max-width:100%;--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity));padding-left:.5rem}.readonly .picker-multi-selection{padding-right:.5rem}.picker-multi-selection>.text{max-width:180px;min-width:0;overflow:clip;white-space:nowrap}.picker-no-search{cursor:default}.picker-menu-list{border-style:none;flex:1 1 auto;min-height:0;overflow-y:auto;--tw-shadow:var(--shadow-none);--tw-shadow-colored:var(--shadow-none);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.picker-menu-search+.picker-menu-list.menu{margin-top:-.125rem;padding-top:0}.picker-menu-list.tree{padding:.5rem}.picker-menu-list .tree-item>.selected .item-content{font-weight:400}.picker-menu .search-menu-footer{border-top-width:1px;padding-bottom:.25rem;padding-top:.25rem}.picker-search-input{border-color:transparent;height:1.75rem;outline-width:0!important;padding-left:0;padding-right:2rem;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.picker-search{flex:none;position:relative;width:100%}.picker-search>.magnifier{opacity:.5;position:absolute;right:0;top:.5rem}.picker-search-clear.btn{cursor:pointer;height:1.25rem;position:absolute;right:0;top:.25rem;width:1.25rem}.picker-search.is-inline{min-width:64px;width:4rem}.is-inline>.picker-search-input{height:1.25rem;min-width:64px;padding-left:.25rem;padding-right:.25rem}.picker-search-measure{height:0;left:0;overflow:hidden;position:absolute;top:0;white-space:nowrap}:root{--table-head-bg:var(--color-surface);--table-striped-color:var(--color-gray-50);--table-hover-color:rgba(var(--color-primary-500-rgb),.05);--table-border-color:var(--color-border)}.table{border-color:var(--table-border-color);width:100%}.table>thead{background-color:var(--table-head-bg)}.table>*>tr{border-bottom-width:1px}.table>*>tr>*{padding:.5rem 1rem}.table-striped>tbody>tr:nth-child(2n){background:var(--table-striped-color)}.table-hover>tbody>tr:hover>*{background:var(--table-hover-color)}.table.bordered>*>tr>*{border-width:1px}.table.borderless>*>tr,.table.borderless>*>tr>*{border-style:none}.condensed>*>tr>*{padding:.375rem .75rem}.table-fixed{table-layout:fixed}.table-fixed>*>tr>*{overflow:hidden;white-space:nowrap}.toolbar{align-items:center;display:flex;position:relative}.toolbar>.divider{margin:.5rem;width:1px;--tw-bg-opacity:1;background-color:rgba(var(--color-border-rgb),var(--tw-bg-opacity))}.toolbar-space{flex:1 1 auto;height:1px;width:1px}.toolbar>.dropdown.show{align-items:center;display:flex;position:relative}:root{--tooltip-bg:var(--skin-color,var(--color-inverse));--tooltip-text:var(--skin-text,var(--color-canvas));--tooltip-arrow:6px;--tooltip-delay:0.5s}.hint,[class*=" hint-"],[class^=hint-]{position:relative}.hint:before,[class*=" hint-"]:before,[class^=hint-]:before{border-style:solid;height:0;position:absolute;width:0;--tw-content:"";border-color:var(--tooltip-bg) transparent transparent transparent;border-width:var(--tooltip-arrow) var(--tooltip-arrow) 0 var(--tooltip-arrow);content:var(--tw-content);margin-bottom:calc(0px - var(--tooltip-arrow))}.hint:after,[class*=" hint-"]:after,[class^=hint-]:after{background-color:var(--tooltip-bg);border-color:var(--tooltip-color);border-radius:var(--radius);color:var(--tooltip-text);font-size:.75rem;line-height:1rem;max-width:28rem;overflow:hidden;padding:.25rem .5rem;position:absolute;white-space:nowrap;--tw-shadow:var(--shadow);--tw-shadow-colored:var(--shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-content:attr(data-hint);content:var(--tw-content);text-shadow:0 1px 0 var(--tooltip-bg)}.hint:after,.hint:before,[class*=" hint-"]:after,[class*=" hint-"]:before,[class^=hint-]:after,[class^=hint-]:before{bottom:100%;left:50%;opacity:0;pointer-events:none;transition-delay:0s;transition-duration:.15s;transition-property:opacity,visibility;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1);visibility:hidden;z-index:1800;--tw-translate-x:-50%;--tw-translate-y:calc(var(--tooltip-arrow)*-1);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hint:hover:after,.hint:hover:before,[class*=" hint-"]:hover:after,[class*=" hint-"]:hover:before,[class^=hint-]:hover:after,[class^=hint-]:hover:before{opacity:1;transition-delay:var(--tooltip-delay);visibility:visible}.hint-bottom:before{border-color:transparent transparent var(--tooltip-bg) transparent;border-width:0 var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow);margin-bottom:auto;margin-top:calc(0px - var(--tooltip-arrow))}.hint-bottom:after,.hint-bottom:before{bottom:auto;top:100%;--tw-translate-y:var(--tooltip-arrow);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hint-left:before{border-color:transparent transparent transparent var(--tooltip-bg);border-width:var(--tooltip-arrow) 0 var(--tooltip-arrow) var(--tooltip-arrow);margin-bottom:auto;margin-right:calc(0px - var(--tooltip-arrow))}.hint-left:after,.hint-left:before{bottom:50%;left:auto;right:100%;--tw-translate-x:calc(var(--tooltip-arrow)*-1);--tw-translate-y:50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hint-right:before{border-color:transparent var(--tooltip-bg) transparent;border-width:var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow) 0;margin-bottom:auto;margin-left:calc(0px - var(--tooltip-arrow))}.hint-right:after,.hint-right:before{bottom:50%;left:100%;--tw-translate-x:var(--tooltip-arrow);--tw-translate-y:50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hint-lg:after,.hint-sm .hint-md:after:after,.hint-xl:after{white-space:normal;word-break:break-all}.hint-sm:after{width:4rem}.hint-md:after{width:8rem}.hint-lg:after{width:16rem}.hint-xl:after{width:24rem}.hint-primary{--tooltip-bg:var(--color-primary-500)}.hint-success{--tooltip-bg:var(--color-success-500)}.hint-danger{--tooltip-bg:var(--color-danger-500)}.hint-warning{--tooltip-bg:var(--color-warning-500)}.hint-important{--tooltip-bg:var(--color-important-500)}.hint-special{--tooltip-bg:var(--color-special-500)}.tooltip{background-color:var(--tooltip-bg);border-color:var(--tooltip-color);border-radius:var(--radius);color:var(--tooltip-text);font-size:.75rem;line-height:1rem;max-width:28rem;padding:.25rem .5rem;z-index:1800}.tooltip:not(.white)>.arrow{border-width:0}.tooltip.white>.arrow{border-color:inherit}.tooltip-has-title{--tw-bg-opacity:0.8;padding:.5rem .75rem .75rem;--tw-shadow:var(--shadow-xl);--tw-shadow-colored:var(--shadow-xl);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.tooltip-has-title>.arrow{opacity:.75}.tooltip-heading{align-items:center;display:flex;font-size:.8125rem;font-weight:700;gap:1rem;justify-content:space-between;line-height:1.25rem;padding:.25rem}.tooltip-heading>.btn-close{margin-right:-.25rem}.tooltip-content{padding:.25rem}.dropdown.popover{display:flex;flex-direction:column;position:absolute;z-index:1200}.dropdown.show{display:flex}.dropdown-menu{display:none;--menu-min-width:7rem;--menu-max-width:20rem}.dropdown-menu.show,.menu-wrapper>.dropdown-menu,.show>.dropdown-menu{display:block}.dropdown>.dropdown-menu,.menu-wrapper .dropdown-menu{position:relative}.show>.menu-wrapper{display:flex}.dropdown>.menu-wrapper{height:100%}.dropdown>.menu-wrapper .menu-wrapper{position:absolute}.dropdown>.menu-wrapper.is-tree .menu-wrapper{position:relative}.is-contextmenu .is-nested-show>a:not(:hover){--tw-bg-opacity:1;background-color:rgba(var(--color-primary-100-rgb),var(--tw-bg-opacity))}.is-contextmenu .menu-item.is-nested>.item-inner>.nested-toggle-icon{position:absolute;right:.25rem;top:.375rem}.is-contextmenu .menu-nested .menu-item>.item-inner{padding-left:.5rem;padding-right:1.25rem}.is-contextmenu .menu-nested .menu-item>.item-inner>.item-content{overflow:hidden}.dropdown>.arrow{--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity))}:root{--scrollbar-size:10px;--scrollbar-opacity:.6;--scrollbar-bg:rgba(var(--color-inverse-rgb),.15);--scrollbar-inset:inset 0 0 0 1px rgba(var(--color-inverse-rgb),.05);--scrollbar-bar-bg:rgba(var(--color-inverse-rgb),.3);--scrollbar-hover-bg:rgba(var(--color-inverse-rgb),.4);--scrollbar-drag-bg:rgba(var(--color-inverse-rgb),.5);--scrollbar-radius:var(--radius-sm);--scrollbar-duration:.7s}.scrollbar{background:var(--scrollbar-bg);box-shadow:var(--scrollbar-shadow);opacity:var(--scrollbar-opacity);position:absolute;transition-duration:.15s;transition-duration:var(--scrollbar-duration);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.scrollbar-hover .scrollbar{opacity:0}.scrollbar-hover:hover .scrollbar{opacity:var(--scrollbar-opacity)}.scrollbar.is-dragging,.scrollbar:hover{opacity:1!important}.scrollbar-bar{background:var(--scrollbar-bar-bg);border-radius:var(--scrollbar-radius);position:absolute}.scrollbar-bar:hover{background:var(--scrollbar-hover-bg)}.is-dragging>.scrollbar-bar{background:var(--scrollbar-drag-bg)}.is-horz>.scrollbar-bar{height:100%;z-index:20}.is-vert>.scrollbar-bar{width:100%;z-index:20}:root{--dtable-checked-bg:var(--color-warning-50);--dtable-checked-bg-hover:var(--color-warning-100);--dtable-checked-border:var(--color-border-strong)}.dtable-cell.is-checked,.dtable-striped .dtable-cell.is-odd-row.is-checked{background-color:var(--dtable-checked-bg)}.checkbox-primary.dtable-checkbox{margin-right:-.375rem}.dtable-checkbox{order:-5}.dtable-hover-col .dtable-cell.is-hover-col.is-checked,.dtable-hover-row .dtable-cell.is-hover-row.is-checked{background-color:var(--dtable-checked-bg-hover)}.dtable-cell.is-checked{--dtable-border-color:var(--dtable-checked-border)}.dtable-check-info{flex-shrink:1;margin-right:.5rem;overflow:hidden;white-space:nowrap}:root{--toggle-icon-size:calc(var(--font-size-root)*3/4 + 1px)}.toggle-icon,.toggle-icon-collapse,.toggle-icon-expand{border-color:currentColor;border-width:1px;display:block;opacity:.5;position:relative}.toggle-icon-collapse:hover,.toggle-icon-expand:hover,.toggle-icon:hover{opacity:.9}.toggle-icon,.toggle-icon-collapse,.toggle-icon-expand{border-radius:inherit;height:var(--toggle-icon-size);width:var(--toggle-icon-size)}.is-collapsed .toggle-icon:after,.is-collapsed .toggle-icon:before,.is-expanded .toggle-icon:before,.toggle-icon-collapse:after,.toggle-icon-collapse:before,.toggle-icon-expand:before{background-color:currentColor;content:" ";display:block;height:1px;left:2px;position:absolute;right:2px;top:calc((var(--toggle-icon-size) - 3px)/2)}.is-collapsed .toggle-icon:after,.toggle-icon-collapse:after{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:root{--dtable-nt-size:calc(var(--font-size-root)*3/4 + 1px)}.dtable-nested-indent{flex:none;margin-right:-.25rem;order:-100}.dtable-nested-toggle{align-items:center;border-radius:var(--radius-sm);display:flex;flex:none;height:1.25rem;justify-content:center;margin-left:-.25rem;order:-6;width:1.25rem}.dtable-nested-toggle.is-no-child{margin-right:-.25rem;opacity:0;pointer-events:none}.dtable-child-label{order:-5}.dtable-header-group{align-items:center;background:var(--dtable-header-bg);cursor:default;display:flex;justify-content:center;left:0;position:absolute;top:1px;z-index:30}.dtable-bordered .dtable-header-group{border-bottom:1px solid var(--dtable-border-color);border-left:1px solid var(--dtable-border-color)}.dtable-header-as-group{contain:style;content-visibility:visible;overflow:visible!important}.dtable-sorting{cursor:move}.dtable-cell.is-sorting-from{background-color:var(--dtable-bg);z-index:20}.dtable-cell.is-sorting-from:before{border-top-width:1px}.dtable-sorting .dtable-cell.is-sorting-after{--tw-translate-y:-100%}.dtable-sorting .dtable-cell.is-sorting-after,.dtable-sorting .dtable-cell.is-sorting-before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dtable-sorting .dtable-cell.is-sorting-before{--tw-translate-y:100%}.dtable-cell.is-sorting-before:before,.dtable-cell.is-sorting-from:before{border-bottom-width:1px;border-top-width:1px}:root{--dtable-bg:var(--color-canvas);--dtable-striped-bg:var(--color-gray-50);--dtable-hover-bg:rgba(var(--color-primary-500-rgb),.05);--dtable-header-bg:var(--color-surface);--dtable-footer-bg:var(--color-surface);--dtable-border-color:var(--color-border);--dtable-sorter-size:0.3125rem}.dtable{position:relative;--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity))}.dtable.no-animation *{transition-property:none!important}.dtable-block{overflow:hidden;position:absolute;width:100%}.dtable-header{background-color:var(--dtable-header-bg);border-top-left-radius:inherit;border-top-right-radius:inherit}.dtable-body{overflow:hidden}.dtable-cells{background-color:var(--dtable-bg);height:100%;position:absolute;z-index:0}.dtable-cells-container{height:100%;position:absolute;width:100%}.dtable-header .dtable-cells{background-color:var(--dtable-header-bg)}.dtable-cells.dtable-fixed-left,.dtable-cells.dtable-fixed-right{z-index:10}.dtable-cell{position:absolute;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.dtable-cell:after,.dtable-cell:before{bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:-1px;z-index:2}.dtable-cell:before{border-bottom-width:1px;border-color:var(--dtable-border-color);opacity:1}.dtable-header-cell{align-items:center;display:flex;font-weight:700}.dtable-header-cell:after,.dtable-header-cell:before{top:0}.dtable-cell-content{align-items:center;display:flex;gap:.25rem;height:100%;overflow:hidden;padding-left:.75rem;padding-right:.75rem;position:relative;white-space:nowrap;width:100%;z-index:5}.dtable-body .dtable-cell.is-last-row:before{border-bottom-width:0}.dtable-footer{align-items:center;background-color:var(--dtable-footer-bg);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;border-color:var(--dtable-border-color);border-top-width:1px;display:flex;padding-left:.75rem;padding-right:.75rem;position:absolute;width:100%;z-index:10}.dtable-empty-tip{align-items:center;display:flex;height:100%;justify-content:center}.dtable .scrollbar{z-index:20}.dtable-header{transition-duration:1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.dtable-scrolled-down .dtable-header{border-bottom-color:rgba(var(--color-inverse-rgb),.15);border-bottom-width:1px}.dtable-has-scroll-y:not(.dtable-scrolled-bottom) .dtable-footer{border-top-color:rgba(var(--color-inverse-rgb),.15);border-top-width:1px}.dtable-scroll-shadow{background-image:linear-gradient(90deg,rgba(0,0,0,.03),transparent),linear-gradient(90deg,rgba(0,0,0,.03),transparent 50%);opacity:0;pointer-events:none;position:absolute;top:0;transition-duration:1s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:8px;z-index:20}.dtable:hover .dtable-scroll-shadow{opacity:1}.dtable-scroll-shadow.is-right{margin-left:-7px;--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dtable-scroll-shadow.is-left,.dtable-scrolled-end .dtable-scroll-shadow.is-right{visibility:hidden}.dtable-scroll-shadow.is-right,.dtable-scrolled-right .dtable-scroll-shadow.is-left{visibility:visible}.scrollbar-hover:hover .scrollbar{opacity:0}.scrollbar-hover .dtable-body:hover~.scrollbar{opacity:var(--scrollbar-opacity)}.dtable-sort{display:inline-flex;height:calc(var(--dtable-sorter-size)*12/5);margin-left:.25rem;opacity:.8;position:relative}.dtable-cell:hover .dtable-sort{opacity:1}.dtable-sort:after,.dtable-sort:before{border-color:transparent;border-style:solid;height:0;left:0;opacity:.4;position:absolute;width:0;--tw-content:"";border-width:var(--dtable-sorter-size);content:var(--tw-content)}.dtable-sort:before{border-bottom-color:currentColor;border-top-width:0;top:0}.dtable-sort:after{border-bottom-width:0;border-top-color:currentColor;bottom:0}.dtable-sort.dtable-sort-asc:before,.dtable-sort.dtable-sort-desc:after{opacity:.9}.dtable-sort-link{align-items:center;cursor:pointer;display:inline-flex}.dtable-cells.dtable-fixed-left:before,.dtable-cells.dtable-fixed-right:before{border-color:var(--dtable-border-color);content:"";height:100%;pointer-events:none;position:absolute;width:100%;z-index:5}.dtable-cells.dtable-fixed-left:before{border-right-width:1px;right:-1px}.dtable-cells.dtable-fixed-right:before{border-left-width:1px;left:0}.dtable-bordered:before{border-color:var(--dtable-border-color);border-radius:inherit;border-width:1px;bottom:0;content:"";display:block;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:15}.dtable-bordered .dtable-cell:before{border-width:1px;right:-1px}.dtable-cell.has-border-left:before{border-left-width:1px}.dtable-cell.has-border-right:before{border-right-width:1px;right:-1px}.dtable-striped .dtable-cell.is-odd-row{background-color:var(--dtable-striped-bg)}.dtable-hover-cell .dtable-cell:hover:after,.dtable-hover-col .dtable-cell.is-hover-col:before,.dtable-hover-row .dtable-body .dtable-cell.is-hover-row:before{background-color:var(--dtable-hover-bg)}.tab-pane{display:none}.tab-pane.active{display:block}.arrow,.arrow:before{background:inherit;height:calc(var(--arrow-size)*1.4142);position:absolute;width:calc(var(--arrow-size)*1.4142)}.arrow{visibility:hidden;--arrow-size:5px}.arrow:before{border:inherit;content:"";visibility:visible;--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.arrow-top,.arrow-up{border-bottom:inherit;border-right:inherit;border-width:1px 0 0 1px;top:calc(1px - var(--arrow-size))}.white>.arrow-top,.white>.arrow-up{top:calc(0px - var(--arrow-size))}.arrow-bottom,.arrow-down{border-left:inherit;border-top:inherit;border-width:0 1px 1px 0;bottom:calc(1px - var(--arrow-size))}.white>.arrow-bottom,.white>.arrow-down{bottom:calc(0px - var(--arrow-size))}.arrow-left{border-right:inherit;border-top:inherit;border-width:0 0 1px 1px;left:calc(1px - var(--arrow-size))}.white>.arrow-left{left:calc(0px - var(--arrow-size))}.arrow-right{border-bottom:inherit;border-left:inherit;border-width:1px 1px 0 0;right:calc(1px - var(--arrow-size))}.white>.arrow-right{right:calc(0px - var(--arrow-size))}.caret,.caret-down,.caret-left,.caret-right,.caret-up{align-items:center;display:inline-flex;height:.75rem;justify-content:center;position:relative;width:.75rem}.caret-down:before,.caret-left:before,.caret-right:before,.caret-up:before,.caret:before{display:block;height:.35rem;transform-origin:center;width:.35rem;--tw-translate-y:-1px;--tw-rotate:45deg;border-color:currentColor;border-width:0 1px 1px 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-content:"";content:var(--tw-content)}.caret-left:before{--tw-translate-x:0.125rem;--tw-translate-y:0px;--tw-rotate:135deg}.caret-left:before,.caret-right:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.caret-right:before{--tw-translate-x:-0.125rem;--tw-translate-y:0px;--tw-rotate:-45deg}.caret-up:before{--tw-translate-y:0.125rem;--tw-rotate:225deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:focus>.caret,:hover>.caret{opacity:inherit}.disabled .caret,.readonly .caret{opacity:var(--caret-opacity,.5)}:root{--toggle-icon-size:calc(var(--font-size-root)*3/4 + 1px)}.toggle-icon,.toggle-icon-collapse,.toggle-icon-expand{border-color:currentColor;border-width:1px;display:block;opacity:.5;position:relative}.toggle-icon-collapse:hover,.toggle-icon-expand:hover,.toggle-icon:hover{opacity:.9}.toggle-icon,.toggle-icon-collapse,.toggle-icon-expand{border-radius:inherit;height:var(--toggle-icon-size);width:var(--toggle-icon-size)}.is-collapsed .toggle-icon:after,.is-collapsed .toggle-icon:before,.is-expanded .toggle-icon:before,.toggle-icon-collapse:after,.toggle-icon-collapse:before,.toggle-icon-expand:before{background-color:currentColor;content:" ";display:block;height:1px;left:2px;position:absolute;right:2px;top:calc((var(--toggle-icon-size) - 3px)/2)}.is-collapsed .toggle-icon:after,.toggle-icon-collapse:after{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close{aspect-ratio:1/1;display:block;position:relative;width:1em}.close:after,.close:before{content:"";display:block;height:1px;left:0;position:absolute;width:100%;--tw-rotate:45deg;background-color:currentColor;border-radius:var(--radius-full);top:calc(50% - .5px)}.close:after,.close:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.close:after{--tw-rotate:-45deg}.spinner,.spinner:after,.spinner:before{display:block;height:1em;position:relative;width:1em}.spinner:after,.spinner:before{border-radius:var(--radius-full);content:" ";position:absolute}.spinner:before{animation:-spin 1s cubic-bezier(.6,0,.4,1) infinite;border:.16667em solid transparent;border-top-color:currentcolor}.spinner:after{border:.16667em solid;opacity:.2}.magnifier{display:inline-block;height:1em;position:relative;width:1em}.magnifier:after,.magnifier:before{border-radius:var(--radius-full);content:"";display:block;position:absolute}.magnifier:before{border:1px solid;height:.75em;width:.75em}.magnifier:after{height:1px;left:.55em;top:.7em;width:.5em;--tw-rotate:45deg;background-color:currentColor;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.more,.more-vert{margin:.5rem;position:relative}.more,.more-vert,.more-vert:after,.more-vert:before,.more:after,.more:before{background-color:currentColor;border-radius:var(--radius-full);height:.125rem;width:.125rem}.more-vert:after,.more-vert:before,.more:after,.more:before{display:block;left:-5px;position:absolute;top:0;--tw-content:"";content:var(--tw-content)}.more-vert:after,.more:after{left:5px}.more-vert{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.chevron-down,.chevron-left,.chevron-right,.chevron-up{align-items:center;display:inline-flex;height:1em;justify-content:center;position:relative;width:1em}.chevron-down:before,.chevron-left:before,.chevron-right:before,.chevron-up:before{display:block;height:.6923077em;transform-origin:center;width:.6923077em;--tw-translate-y:-0.125rem;--tw-rotate:45deg;border-color:currentColor;border-width:0 1px 1px 0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-content:"";content:var(--tw-content)}.chevron-left:before{--tw-translate-y:0px;--tw-translate-x:0.125rem;--tw-rotate:135deg}.chevron-left:before,.chevron-right:before{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.chevron-right:before{--tw-translate-y:0px;--tw-translate-x:-0.125rem;--tw-rotate:-45deg}.chevron-up:before{--tw-translate-y:0.125rem;--tw-rotate:225deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.i-time{border-color:currentColor;border-radius:50%;border-width:.08em;display:inline-block;height:1em;position:relative;width:1em}.i-time:after{border-color:currentColor;border-width:0 0 .08em .08em;height:.385em;left:.3846em;position:absolute;top:.08em;width:.385em;--tw-content:"";content:var(--tw-content)}.i-calendar{border-color:currentColor;border-radius:2px;border-width:.08em;display:inline-block;height:.79em;margin-top:.16em;position:relative;width:1em}.i-calendar:after,.i-calendar:before{border-color:currentColor;border-width:.08em;position:absolute;--tw-content:"";content:var(--tw-content)}.i-calendar:before{border-bottom-width:0;left:.15em;top:.307em;width:.6em}.i-calendar:after{border-bottom-width:0;border-top-width:0;height:.3077em;left:.17em;top:-.154em;width:.538em}:root{--state-color:rgba(0,0,0,.05);--state-scale:.9;--opacity-disabled:.7;--opacity-muted:.5;--load-indicator-duration:300ms;--load-indicator-delay:.5s}.btn,.item>a,.state{cursor:pointer;position:relative}.btn:before,.item>a:before,.state:before{background:var(--state-color);border-radius:inherit;bottom:0;content:" ";display:block;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transform:scale(var(--state-scale));transition-duration:.2s;transition-property:opacity,transform,box-shadow,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn.active:not(:hover,:focus-visible,:focus-within,:active):before,.item>a.active:not(:hover,:focus-visible,:focus-within,:active):before,.state.active:not(:hover,:focus-visible,:focus-within,:active):before{background:var(--state-active-color,var(--state-color));opacity:var(--state-active-opacity,0);--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:var(--shadow-inner);--tw-shadow-colored:var(--shadow-inner);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-duration:.7s}.btn.selected:not(:hover,:focus-visible,:focus-within,:active):before,.item>a.selected:not(:hover,:focus-visible,:focus-within,:active):before,.state.selected:not(:hover,:focus-visible,:focus-within,:active):before{background:var(--state-selected-color,var(--state-scale));opacity:var(--state-selected-opacity,.1);--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.btn:focus-visible,.item>a:focus-visible,.state:focus-visible{outline:2px solid transparent;outline-offset:2px}.btn:active:before,.btn:focus-visible:before,.btn:hover:before,.item>a:active:before,.item>a:focus-visible:before,.item>a:hover:before,.state:active:before,.state:focus-visible:before,.state:hover:before{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.btn:hover:before,.item>a:hover:before,.state:hover:before{opacity:var(--state-hover-opacity,1)}.btn:active:before,.item>a:active:before,.state:active:before{background:var(--state-pressed-color,var(--state-color));opacity:var(--state-pressed-opacity,.6);--tw-ring-color:var(--state-ring-color,currentColor);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);transition-duration:.7s}.btn:focus-visible:before,.item>a:focus-visible:before,.state:focus-visible:before{background:var(--state-focus-color,var(--state-color));opacity:var(--state-focus-opacity,1);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-focus-rgb),var(--tw-ring-opacity))}.btn.disabled:before,.btn[disabled]:before,.item>a.disabled:before,.item>a[disabled]:before,.state.disabled:before,.state[disabled]:before{display:none}.btn{--state-active-opacity:1}@-moz-document url-prefix(){.btn,:root{--state-active-opacity:0;--state-focus-opacity:0}}.disabled,.disabled *,[disabled],[disabled] *{cursor:not-allowed!important;opacity:var(--opacity-disabled);--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.load-indicator:after,.load-indicator:before{display:block;opacity:0;position:absolute;transition-delay:0s;transition-duration:.15s;transition-duration:var(--load-indicator-duration);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);visibility:hidden}.load-indicator:before{align-items:center;background-color:rgba(var(--color-canvas-rgb),.7);border-radius:inherit;bottom:0;display:flex;font-size:.75rem;justify-content:center;left:0;line-height:1rem;right:0;top:0;z-index:99;--tw-content:attr(data-loading);content:var(--tw-content)}.load-indicator[data-loading]:before{padding-top:3.5rem}.load-indicator:after{border-color:transparent currentcolor currentcolor;border-radius:var(--radius-full);border-style:dotted;border-width:4px 3px 4px 4px;height:2rem;left:50%;margin-left:-1rem;margin-top:-1rem;top:50%;width:2rem;z-index:100;--tw-content:"";content:var(--tw-content)}.load-indicator.loading:after,.load-indicator.loading:before{opacity:1;transition-delay:var(--load-indicator-delay);visibility:visible}@keyframes -spin{to{transform:rotate(1turn)}}.load-indicator.loading:after{animation:-spin 1s linear infinite;opacity:.5}.events-none,.pointer-events-none{pointer-events:none}.events-auto,.pointer-events-auto{pointer-events:auto}.scroll-auto{scroll-behavior:auto}.scroll-smooth{scroll-behavior:smooth}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-text{-webkit-user-select:text;-moz-user-select:text;user-select:text}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.select-auto{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.cursor-auto{cursor:auto}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.cursor-text{cursor:text}.cursor-move{cursor:move}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.active\:opacity-100.active,.active\:opacity-100:active,.group.active .group-active\:opacity-100,.group:active .group-active\:opacity-100,.group:hover .group-hover\:opacity-100,.hover\:opacity-100:hover{opacity:1}.active\:text-primary.active,.active\:text-primary:active,.group.active .group-active\:text-primary,.group:active .group-active\:text-primary,.group:hover .group-hover\:text-primary,.hover\:text-primary:hover{--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.active\:border-primary.active,.active\:border-primary:active,.group.active .group-active\:border-primary,.group:active .group-active\:border-primary,.group:hover .group-hover\:border-primary,.hover\:border-primary:hover{--tw-border-opacity:1;border-color:rgba(var(--color-primary-500-rgb),var(--tw-border-opacity))}.active\:primary-pale.active,.active\:primary-pale:active,.group.active .group-active\:primary-pale,.group:active .group-active\:primary-pale,.group:hover .group-hover\:primary-pale,.hover\:primary-pale:hover{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-50-rgb),var(--tw-bg-opacity))}.active\:primary.active,.active\:primary:active,.group.active .group-active\:primary,.group:active .group-active\:primary,.group:hover .group-hover\:primary,.hover\:primary:hover{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-500-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.active\:canvas.active,.active\:canvas:active,.group.active .group-active\:canvas,.group:active .group-active\:canvas,.group:hover .group-hover\:canvas,.hover\:canvas:hover{--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity))}.active\:font-bold.active,.active\:font-bold:active,.group.active .group-active\:font-bold,.group:active .group-active\:font-bold,.group:hover .group-hover\:font-bold,.hover\:font-bold:hover{font-weight:700}.active\:shadow.active,.active\:shadow:active,.group.active .group-active\:shadow,.group:active .group-active\:shadow,.group:hover .group-hover\:shadow,.hover\:shadow:hover{--tw-shadow:var(--shadow);--tw-shadow-colored:var(--shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.aspect-auto{aspect-ratio:auto}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.container{margin-left:auto;margin-right:auto}.popup{background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity));border-radius:var(--radius);--tw-bg-opacity:0.85;--tw-shadow:var(--shadow-xl);--tw-shadow-colored:var(--shadow-xl);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.05;--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.table-row{display:table-row}.hidden{display:none!important}.pull-right{float:right}.pull-left{float:left}.clearfix:after{clear:both;content:"";display:block}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-fill{-o-object-fit:fill;object-fit:fill}.object-none{-o-object-fit:none;object-fit:none}.object-scale-down{-o-object-fit:scale-down;object-fit:scale-down}.object-bottom{-o-object-position:bottom;object-position:bottom}.object-center{-o-object-position:center;object-position:center}.object-left{-o-object-position:left;object-position:left}.object-left-bottom{-o-object-position:left bottom;object-position:left bottom}.object-left-top{-o-object-position:left top;object-position:left top}.object-right{-o-object-position:right;object-position:right}.object-right-bottom{-o-object-position:right bottom;object-position:right bottom}.object-right-top{-o-object-position:right top;object-position:right top}.object-top{-o-object-position:top;object-position:top}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-clip{overflow:clip}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-clip{overflow-x:clip}.overflow-y-clip{overflow-y:clip}.overflow-x-visible{overflow-x:visible}.overflow-y-visible{overflow-y:visible}.overflow-x-scroll{overflow-x:scroll}.overflow-y-scroll{overflow-y:scroll}.overflow-overlay{overflow:overlay}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{bottom:0;left:0;right:0;top:0}.inset-auto{bottom:auto;left:auto;right:auto;top:auto}.inset-x-0{left:0;right:0}.inset-y-0{bottom:0;top:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-full{top:100%}.right-full{right:100%}.bottom-full{bottom:100%}.left-full{left:100%}.top-auto{top:auto}.right-auto{right:auto}.bottom-auto{bottom:auto}.left-auto{left:auto}.top-px{top:1px}.right-px{right:1px}.bottom-px{bottom:1px}.left-px{left:1px}.top-0\.5{top:.125rem}.right-0\.5{right:.125rem}.bottom-0\.5{bottom:.125rem}.left-0\.5{left:.125rem}.top-1{top:.25rem}.right-1{right:.25rem}.bottom-1{bottom:.25rem}.left-1{left:.25rem}.top-1\.5{top:.375rem}.right-1\.5{right:.375rem}.bottom-1\.5{bottom:.375rem}.left-1\.5{left:.375rem}.top-2{top:.5rem}.right-2{right:.5rem}.bottom-2{bottom:.5rem}.left-2{left:.5rem}.top-2\.5{top:.625rem}.right-2\.5{right:.625rem}.bottom-2\.5{bottom:.625rem}.left-2\.5{left:.625rem}.top-3{top:.75rem}.right-3{right:.75rem}.bottom-3{bottom:.75rem}.left-3{left:.75rem}.top-3\.5{top:.875rem}.right-3\.5{right:.875rem}.bottom-3\.5{bottom:.875rem}.left-3\.5{left:.875rem}.top-4{top:1rem}.right-4{right:1rem}.bottom-4{bottom:1rem}.left-4{left:1rem}.top-5{top:1.25rem}.right-5{right:1.25rem}.bottom-5{bottom:1.25rem}.left-5{left:1.25rem}.top-6{top:1.5rem}.right-6{right:1.5rem}.bottom-6{bottom:1.5rem}.left-6{left:1.5rem}.top-7{top:1.75rem}.right-7{right:1.75rem}.bottom-7{bottom:1.75rem}.left-7{left:1.75rem}.top-8{top:2rem}.right-8{right:2rem}.bottom-8{bottom:2rem}.left-8{left:2rem}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.z-0{z-index:0}.z-1{z-index:1}.z-5{z-index:5}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-auto{z-index:auto}.z-base{z-index:1100}.z-above{z-index:50}.z-below{z-index:-50}.z-dropdown{z-index:1200}.z-sticky{z-index:1300}.z-fixed{z-index:1400}.z-modal{z-index:1500}.z-overlay{z-index:1600}.z-popover{z-index:1700}.z-tooltip{z-index:1800}.z-messager{z-index:1900}.m-0{margin:0}.m-auto{margin:auto}.m-px{margin:1px}.m-0\.5{margin:.125rem}.m-1{margin:.25rem}.m-1\.5{margin:.375rem}.m-2{margin:.5rem}.m-2\.5{margin:.625rem}.m-3{margin:.75rem}.m-3\.5{margin:.875rem}.m-4{margin:1rem}.m-5{margin:1.25rem}.m-6{margin:1.5rem}.m-7{margin:1.75rem}.m-8{margin:2rem}.m-9{margin:2.25rem}.m-10{margin:2.5rem}.mx-0{margin-left:0;margin-right:0}.my-0{margin-bottom:0}.mt-0,.my-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-bottom:auto}.mt-auto,.my-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mx-px{margin-left:1px;margin-right:1px}.my-px{margin-bottom:1px}.mt-px,.my-px{margin-top:1px}.mr-px{margin-right:1px}.mb-px{margin-bottom:1px}.ml-px{margin-left:1px}.mx-0\.5{margin-left:.125rem;margin-right:.125rem}.my-0\.5{margin-bottom:.125rem}.mt-0\.5,.my-0\.5{margin-top:.125rem}.mr-0\.5{margin-right:.125rem}.mb-0\.5{margin-bottom:.125rem}.ml-0\.5{margin-left:.125rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-bottom:.25rem}.mt-1,.my-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.my-1\.5{margin-bottom:.375rem}.mt-1\.5,.my-1\.5{margin-top:.375rem}.mr-1\.5{margin-right:.375rem}.mb-1\.5{margin-bottom:.375rem}.ml-1\.5{margin-left:.375rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-2{margin-bottom:.5rem}.mt-2,.my-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mx-2\.5{margin-left:.625rem;margin-right:.625rem}.my-2\.5{margin-bottom:.625rem}.mt-2\.5,.my-2\.5{margin-top:.625rem}.mr-2\.5{margin-right:.625rem}.mb-2\.5{margin-bottom:.625rem}.ml-2\.5{margin-left:.625rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-3{margin-bottom:.75rem}.mt-3,.my-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.ml-3{margin-left:.75rem}.mx-3\.5{margin-left:.875rem;margin-right:.875rem}.my-3\.5{margin-bottom:.875rem}.mt-3\.5,.my-3\.5{margin-top:.875rem}.mr-3\.5{margin-right:.875rem}.mb-3\.5{margin-bottom:.875rem}.ml-3\.5{margin-left:.875rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-4{margin-bottom:1rem}.mt-4,.my-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-5{margin-bottom:1.25rem}.mt-5,.my-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-6{margin-bottom:1.5rem}.mt-6,.my-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mx-7{margin-left:1.75rem;margin-right:1.75rem}.my-7{margin-bottom:1.75rem}.mt-7,.my-7{margin-top:1.75rem}.mr-7{margin-right:1.75rem}.mb-7{margin-bottom:1.75rem}.ml-7{margin-left:1.75rem}.mx-8{margin-left:2rem;margin-right:2rem}.my-8{margin-bottom:2rem}.mt-8,.my-8{margin-top:2rem}.mr-8{margin-right:2rem}.mb-8{margin-bottom:2rem}.ml-8{margin-left:2rem}.mx-9{margin-left:2.25rem;margin-right:2.25rem}.my-9{margin-bottom:2.25rem}.mt-9,.my-9{margin-top:2.25rem}.mr-9{margin-right:2.25rem}.mb-9{margin-bottom:2.25rem}.ml-9{margin-left:2.25rem}.mx-10{margin-left:2.5rem;margin-right:2.5rem}.my-10{margin-bottom:2.5rem}.mt-10,.my-10{margin-top:2.5rem}.mr-10{margin-right:2.5rem}.mb-10{margin-bottom:2.5rem}.ml-10{margin-left:2.5rem}.p-0{padding:0}.p-px{padding:1px}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.p-9{padding:2.25rem}.p-10{padding:2.5rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-bottom:0}.pt-0,.py-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.px-px{padding-left:1px;padding-right:1px}.py-px{padding-bottom:1px}.pt-px,.py-px{padding-top:1px}.pr-px{padding-right:1px}.pb-px{padding-bottom:1px}.pl-px{padding-left:1px}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.py-0\.5{padding-bottom:.125rem}.pt-0\.5,.py-0\.5{padding-top:.125rem}.pr-0\.5{padding-right:.125rem}.pb-0\.5{padding-bottom:.125rem}.pl-0\.5{padding-left:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-bottom:.25rem}.pt-1,.py-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.py-1\.5{padding-bottom:.375rem}.pt-1\.5,.py-1\.5{padding-top:.375rem}.pr-1\.5{padding-right:.375rem}.pb-1\.5{padding-bottom:.375rem}.pl-1\.5{padding-left:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-bottom:.5rem}.pt-2,.py-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.py-2\.5{padding-bottom:.625rem}.pt-2\.5,.py-2\.5{padding-top:.625rem}.pr-2\.5{padding-right:.625rem}.pb-2\.5{padding-bottom:.625rem}.pl-2\.5{padding-left:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-bottom:.75rem}.pt-3,.py-3{padding-top:.75rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.py-3\.5{padding-bottom:.875rem}.pt-3\.5,.py-3\.5{padding-top:.875rem}.pr-3\.5{padding-right:.875rem}.pb-3\.5{padding-bottom:.875rem}.pl-3\.5{padding-left:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.py-4{padding-bottom:1rem}.pt-4,.py-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-5{padding-bottom:1.25rem}.pt-5,.py-5{padding-top:1.25rem}.pr-5{padding-right:1.25rem}.pb-5{padding-bottom:1.25rem}.pl-5{padding-left:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-bottom:1.5rem}.pt-6,.py-6{padding-top:1.5rem}.pr-6{padding-right:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-7{padding-bottom:1.75rem}.pt-7,.py-7{padding-top:1.75rem}.pr-7{padding-right:1.75rem}.pb-7{padding-bottom:1.75rem}.pl-7{padding-left:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-8{padding-bottom:2rem}.pt-8,.py-8{padding-top:2rem}.pr-8{padding-right:2rem}.pb-8{padding-bottom:2rem}.pl-8{padding-left:2rem}.px-9{padding-left:2.25rem;padding-right:2.25rem}.py-9{padding-bottom:2.25rem}.pt-9,.py-9{padding-top:2.25rem}.pr-9{padding-right:2.25rem}.pb-9{padding-bottom:2.25rem}.pl-9{padding-left:2.25rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-10{padding-bottom:2.5rem}.pt-10,.py-10{padding-top:2.5rem}.pr-10{padding-right:2.5rem}.pb-10{padding-bottom:2.5rem}.pl-10{padding-left:2.5rem}.space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(0px*(1 - var(--tw-space-x-reverse)));margin-right:calc(0px*var(--tw-space-x-reverse))}.space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))}.space-x-0\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.125rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.125rem*var(--tw-space-x-reverse))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.125rem*var(--tw-space-y-reverse));margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-x-1\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.375rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.375rem*var(--tw-space-x-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-x-2\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.625rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.625rem*var(--tw-space-x-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.625rem*var(--tw-space-y-reverse));margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-x-3\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.875rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.875rem*var(--tw-space-x-reverse))}.space-y-3\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.875rem*var(--tw-space-y-reverse));margin-top:calc(.875rem*(1 - var(--tw-space-y-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-x-5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.25rem*var(--tw-space-x-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.25rem*var(--tw-space-y-reverse));margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-x-7>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.75rem*var(--tw-space-x-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.75rem*var(--tw-space-y-reverse));margin-top:calc(1.75rem*(1 - var(--tw-space-y-reverse)))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2rem*var(--tw-space-x-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.space-x-9>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2.25rem*var(--tw-space-x-reverse))}.space-y-9>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2.25rem*var(--tw-space-y-reverse));margin-top:calc(2.25rem*(1 - var(--tw-space-y-reverse)))}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2.5rem*var(--tw-space-x-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2.5rem*var(--tw-space-y-reverse));margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)))}.space-x-px>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1px*(1 - var(--tw-space-x-reverse)));margin-right:calc(1px*var(--tw-space-x-reverse))}.space-y-px>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1px*var(--tw-space-y-reverse));margin-top:calc(1px*(1 - var(--tw-space-y-reverse)))}.w-0{width:0}.w-px{width:1px}.w-0\.5{width:.125rem}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-32{width:8rem}.w-36{width:9rem}.w-40{width:10rem}.w-44{width:11rem}.w-48{width:12rem}.w-52{width:13rem}.w-56{width:14rem}.w-60{width:15rem}.w-64{width:16rem}.w-72{width:18rem}.w-80{width:20rem}.w-96{width:24rem}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-2\/3{width:66.666667%}.w-1\/4{width:25%}.w-2\/4{width:50%}.w-3\/4{width:75%}.w-1\/5{width:20%}.w-2\/5{width:40%}.w-3\/5{width:60%}.w-4\/5{width:80%}.w-1\/6{width:16.666667%}.w-2\/6{width:33.333333%}.w-3\/6{width:50%}.w-4\/6{width:66.666667%}.w-5\/6{width:83.333333%}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.w-min{width:-moz-min-content;width:min-content}.w-max{width:-moz-max-content;width:max-content}.w-fit{width:-moz-fit-content;width:fit-content}.min-w-0{min-width:0}.min-w-full{min-width:100%}.min-w-min{min-width:-moz-min-content;min-width:min-content}.min-w-max{min-width:-moz-max-content;min-width:max-content}.min-w-fit{min-width:-moz-fit-content;min-width:fit-content}.max-w-0{max-width:0}.max-w-none{max-width:none}.max-w-xs{max-width:20rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}.max-w-min{max-width:-moz-min-content;max-width:min-content}.max-w-max{max-width:-moz-max-content;max-width:max-content}.max-w-fit{max-width:-moz-fit-content;max-width:fit-content}.h-0{height:0}.h-px{height:1px}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}.h-28{height:7rem}.h-32{height:8rem}.h-36{height:9rem}.h-40{height:10rem}.h-44{height:11rem}.h-48{height:12rem}.h-52{height:13rem}.h-56{height:14rem}.h-60{height:15rem}.h-64{height:16rem}.h-72{height:18rem}.h-80{height:20rem}.h-96{height:24rem}.h-1\/2{height:50%}.h-1\/3{height:33.333333%}.h-2\/3{height:66.666667%}.h-1\/4{height:25%}.h-2\/4{height:50%}.h-3\/4{height:75%}.h-1\/5{height:20%}.h-2\/5{height:40%}.h-3\/5{height:60%}.h-4\/5{height:80%}.h-1\/6{height:16.666667%}.h-2\/6{height:33.333333%}.h-3\/6{height:50%}.h-4\/6{height:66.666667%}.h-5\/6{height:83.333333%}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.h-min{height:-moz-min-content;height:min-content}.h-max{height:-moz-max-content;height:max-content}.h-fit{height:-moz-fit-content;height:fit-content}.min-h-0{min-height:0}.min-h-full{min-height:100%}.min-h-min{min-height:-moz-min-content;min-height:min-content}.min-h-max{min-height:-moz-max-content;min-height:max-content}.min-h-fit{min-height:-moz-fit-content;min-height:fit-content}.max-h-0{max-height:0}.max-h-px{max-height:1px}.max-h-none{max-height:none}.max-h-full{max-height:100%}.max-h-min{max-height:-moz-min-content;max-height:min-content}.max-h-screen{max-height:100vh}.max-h-max{max-height:-moz-max-content;max-height:max-content}.max-h-fit{max-height:-moz-fit-content;max-height:fit-content}.canvas,.surface,.surface-light,.surface-strong{--tw-text-opacity:1;color:rgba(var(--color-fore-rgb),var(--tw-text-opacity))}.canvas{--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity))}.surface-light{--tw-bg-opacity:1;background-color:rgba(var(--color-surface-light-rgb),var(--tw-bg-opacity));--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-surface-light-rgb),var(--tw-ring-opacity))}.surface{--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity));--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-surface-rgb),var(--tw-ring-opacity))}.surface-strong{--tw-bg-opacity:1;background-color:rgba(var(--color-surface-strong-rgb),var(--tw-bg-opacity));--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-surface-strong-rgb),var(--tw-ring-opacity))}.inverse{background-color:rgba(var(--color-inverse-rgb),var(--tw-bg-opacity));color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.inverse,.white{--tw-bg-opacity:1;--tw-text-opacity:1}.white{background-color:rgba(var(--color-white-rgb),var(--tw-bg-opacity));color:rgba(var(--color-fore-in-light-rgb),var(--tw-text-opacity));--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-white-rgb),var(--tw-ring-opacity))}.black{--tw-bg-opacity:1;background-color:rgba(var(--color-black-rgb),var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--color-fore-in-dark-rgb),var(--tw-text-opacity));--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-black-rgb),var(--tw-ring-opacity))}.transparent{background-color:transparent;--tw-ring-color:transparent}.skin{--skin-bg:var(--skin-color);--skin-ring:var(--skin-color);--skin-border:var(--skin-color);--skin-hover-text:var(--skin-text);--skin-hover-bg:var(--skin-bg);--tw-ring-color:var(--skin-ring);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--color-link-hover:var(--skin-text);background-color:var(--skin-bg);border-color:var(--skin-border);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);color:var(--skin-text)}.skin:hover{background-color:var(--skin-hover-bg);color:var(--skin-hover-text)}.danger,.darken,.darker,.darkest,.gray,.gray-100,.gray-200,.gray-300,.gray-400,.gray-50,.gray-500,.gray-600,.gray-700,.gray-800,.gray-900,.gray-950,.important,.lighten,.lighter,.lightest,.primary,.secondary,.special,.success,.warning{--skin-bg:var(--skin-color);--skin-ring:var(--skin-color);--skin-border:var(--skin-color);--skin-hover-text:var(--skin-text);--skin-hover-bg:var(--skin-bg);--tw-ring-color:var(--skin-ring);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--color-link-hover:var(--skin-text);background-color:var(--skin-bg);border-color:var(--skin-border);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);color:var(--skin-text)}.danger:hover,.darken:hover,.darker:hover,.darkest:hover,.gray-100:hover,.gray-200:hover,.gray-300:hover,.gray-400:hover,.gray-500:hover,.gray-50:hover,.gray-600:hover,.gray-700:hover,.gray-800:hover,.gray-900:hover,.gray-950:hover,.gray:hover,.important:hover,.lighten:hover,.lighter:hover,.lightest:hover,.primary:hover,.secondary:hover,.special:hover,.success:hover,.warning:hover{background-color:var(--skin-hover-bg);color:var(--skin-hover-text)}.danger,.darken,.darker,.darkest,.gray,.gray-100,.gray-200,.gray-300,.gray-400,.gray-50,.gray-500,.gray-600,.gray-700,.gray-800,.gray-900,.gray-950,.important,.lighten,.lighter,.lightest,.primary,.secondary,.special,.success,.warning{--skin-text:rgba(var(--color-fore-in-dark-rgb),var(--tw-text-opacity));--skin-color:rgba(var(--skin-solid-rgb),1);--state-ring-color:var(--skin-color);--state-active-color:rgba(0,0,0,.1);--state-pressed-color:rgba(0,0,0,.1);--state-color:hsla(0,0%,100%,.1);--state-focus-color:rgba(0,0,0,.1)}.primary{--skin-solid-rgb:var(--color-primary-500-rgb)}.secondary{--skin-solid-rgb:var(--color-secondary-500-rgb)}.success{--skin-solid-rgb:var(--color-success-500-rgb)}.warning{--skin-solid-rgb:var(--color-warning-500-rgb)}.danger{--skin-solid-rgb:var(--color-danger-500-rgb)}.important{--skin-solid-rgb:var(--color-important-500-rgb)}.special{--skin-solid-rgb:var(--color-special-500-rgb)}.gray-50{--skin-bg:rgba(var(--color-gray-50-rgb),var(--tw-bg-opacity));--skin-text:rgba(var(--color-fore),var(--tw-text-opacity))}.gray-100{--skin-solid-rgb:var(--color-gray-100-rgb);--skin-text:rgba(var(--color-fore),var(--tw-text-opacity))}.gray-200,.lightest{--skin-solid-rgb:var(--color-gray-200-rgb);--skin-text:rgba(var(--color-fore),var(--tw-text-opacity))}.gray-300,.lighter{--skin-solid-rgb:var(--color-gray-300-rgb);--skin-text:rgba(var(--color-fore),var(--tw-text-opacity))}.gray-400,.lighten{--skin-solid-rgb:var(--color-gray-400-rgb)}.gray,.gray-500{--skin-solid-rgb:var(--color-gray-500-rgb)}.darken,.gray-600{--skin-solid-rgb:var(--color-gray-600-rgb)}.darker,.gray-700{--skin-solid-rgb:var(--color-gray-700-rgb)}.darkest,.gray-800{--skin-solid-rgb:var(--color-gray-800-rgb)}.gray-900{--skin-solid-rgb:var(--color-gray-900-rgb)}.gray-950{--skin-solid-rgb:var(--color-gray-950-rgb)}.danger-pale,.gray-100-pale,.gray-200-pale,.gray-300-pale,.gray-400-pale,.gray-50-pale,.gray-500-pale,.gray-600-pale,.gray-700-pale,.gray-800-pale,.gray-900-pale,.gray-950-pale,.gray-pale,.important-pale,.pale,.primary-pale,.secondary-pale,.special-pale,.success-pale,.warning-pale{--skin-bg:var(--skin-color);--skin-ring:var(--skin-color);--skin-border:var(--skin-color);--skin-hover-text:var(--skin-text);--skin-hover-bg:var(--skin-bg);--tw-ring-color:var(--skin-ring);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--color-link-hover:var(--skin-text);background-color:var(--skin-bg);border-color:var(--skin-border);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);color:var(--skin-text)}.danger-pale:hover,.gray-100-pale:hover,.gray-200-pale:hover,.gray-300-pale:hover,.gray-400-pale:hover,.gray-50-pale:hover,.gray-500-pale:hover,.gray-600-pale:hover,.gray-700-pale:hover,.gray-800-pale:hover,.gray-900-pale:hover,.gray-950-pale:hover,.gray-pale:hover,.important-pale:hover,.pale:hover,.primary-pale:hover,.secondary-pale:hover,.special-pale:hover,.success-pale:hover,.warning-pale:hover{background-color:var(--skin-hover-bg);color:var(--skin-hover-text)}.danger-pale,.gray-100-pale,.gray-200-pale,.gray-300-pale,.gray-400-pale,.gray-50-pale,.gray-500-pale,.gray-600-pale,.gray-700-pale,.gray-800-pale,.gray-900-pale,.gray-950-pale,.gray-pale,.important-pale,.pale,.primary-pale,.secondary-pale,.special-pale,.success-pale,.warning-pale{--skin-color:rgba(var(--skin-pale-rgb),.1);--skin-text:rgba(var(--skin-pale-rgb),1);--state-color:rgba(var(--skin-pale-rgb),.1)}.pale{--skin-pale-rgb:var(--color-gray-500-rgb)}.primary-pale{--skin-pale-rgb:var(--color-primary-500-rgb)}.secondary-pale{--skin-pale-rgb:var(--color-secondary-500-rgb)}.success-pale{--skin-pale-rgb:var(--color-success-500-rgb)}.warning-pale{--skin-pale-rgb:var(--color-warning-500-rgb)}.danger-pale{--skin-pale-rgb:var(--color-danger-500-rgb)}.important-pale{--skin-pale-rgb:var(--color-important-500-rgb)}.special-pale{--skin-pale-rgb:var(--color-special-500-rgb)}.gray-50-pale{--skin-pale-rgb:var(--color-gray-50-rgb);--skin-text:var(--color-gray-400)}.gray-100-pale{--skin-pale-rgb:var(--color-gray-100-rgb);--skin-text:var(--color-gray-400)}.gray-200-pale{--skin-pale-rgb:var(--color-gray-200-rgb);--skin-text:var(--color-gray-400)}.gray-300-pale{--skin-pale-rgb:var(--color-gray-300-rgb);--skin-text:var(--color-gray-500)}.gray-400-pale{--skin-pale-rgb:var(--color-gray-400-rgb);--skin-text:var(--color-gray-500)}.gray-500-pale,.gray-pale{--skin-pale-rgb:var(--color-gray-500-rgb)}.gray-600-pale{--skin-pale-rgb:var(--color-gray-600-rgb)}.gray-700-pale{--skin-pale-rgb:var(--color-gray-700-rgb)}.gray-800-pale{--skin-pale-rgb:var(--color-gray-800-rgb)}.gray-900-pale{--skin-pale-rgb:var(--color-gray-900-rgb)}.gray-950-pale{--skin-pale-rgb:var(--color-gray-950-rgb)}.danger-outline,.dark-outline,.gray-300-outline,.gray-400-outline,.gray-600-outline,.gray-outline,.important-outline,.light-outline,.outline,.primary-outline,.secondary-outline,.special-outline,.success-outline,.warning-outline{--skin-bg:var(--skin-color);--skin-ring:var(--skin-color);--skin-border:var(--skin-color);--skin-hover-text:var(--skin-text);--skin-hover-bg:var(--skin-bg);--tw-ring-color:var(--skin-ring);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--color-link-hover:var(--skin-text);background-color:var(--skin-bg);border-color:var(--skin-border);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);color:var(--skin-text)}.danger-outline:hover,.dark-outline:hover,.gray-300-outline:hover,.gray-400-outline:hover,.gray-600-outline:hover,.gray-outline:hover,.important-outline:hover,.light-outline:hover,.outline:hover,.primary-outline:hover,.secondary-outline:hover,.special-outline:hover,.success-outline:hover,.warning-outline:hover{background-color:var(--skin-hover-bg);color:var(--skin-hover-text)}.danger-outline,.dark-outline,.gray-300-outline,.gray-400-outline,.gray-600-outline,.gray-outline,.important-outline,.light-outline,.outline,.primary-outline,.secondary-outline,.special-outline,.success-outline,.warning-outline{--skin-text:var(--skin-color,inherit);--skin-bg:transparent;--skin-color:rgba(var(--skin-outline-rgb),1);--state-color:rgba(var(--skin-outline-rgb),.1)}.outline{--skin-outline-rgb:var(--color-fore-rgb)}.primary-outline{--skin-outline-rgb:var(--color-primary-500-rgb)}.secondary-outline{--skin-outline-rgb:var(--color-secondary-500-rgb)}.success-outline{--skin-outline-rgb:var(--color-success-500-rgb)}.warning-outline{--skin-outline-rgb:var(--color-warning-500-rgb)}.danger-outline{--skin-outline-rgb:var(--color-danger-500-rgb)}.important-outline{--skin-outline-rgb:var(--color-important-500-rgb)}.special-outline{--skin-outline-rgb:var(--color-special-500-rgb)}.gray-300-outline{--skin-text:var(--color-gray-500);--skin-outline-rgb:var(--color-gray-300-rgb)}.gray-400-outline{--skin-text:var(--color-gray-500);--skin-outline-rgb:var(--color-gray-400-rgb)}.gray-outline{--skin-outline-rgb:var(--color-gray-500-rgb)}.gray-600-outline{--skin-outline-rgb:var(--color-gray-600-rgb)}.dark-outline{--skin-outline-rgb:var(--color-inverse-rgb)}.light-outline{--skin-outline-rgb:var(--color-canvas-rgb)}.danger-ghost,.ghost,.important-ghost,.primary-ghost,.secondary-ghost,.special-ghost,.success-ghost,.warning-ghost{--skin-bg:var(--skin-color);--skin-ring:var(--skin-color);--skin-border:var(--skin-color);--skin-hover-text:var(--skin-text);--skin-hover-bg:var(--skin-bg);--tw-ring-color:var(--skin-ring);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--color-link-hover:var(--skin-text);background-color:var(--skin-bg);border-color:var(--skin-border);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);color:var(--skin-text)}.danger-ghost:hover,.ghost:hover,.important-ghost:hover,.primary-ghost:hover,.secondary-ghost:hover,.special-ghost:hover,.success-ghost:hover,.warning-ghost:hover{background-color:var(--skin-hover-bg);color:var(--skin-hover-text)}.danger-ghost,.ghost,.important-ghost,.primary-ghost,.secondary-ghost,.special-ghost,.success-ghost,.warning-ghost{--tw-ring-opacity:0;--tw-bg-opacity:0;--skin-text:var(--skin-color,inherit);--skin-bg:transparent;--skin-ring:transparent;--skin-color:rgba(var(--skin-ghost-rgb),1);--state-color:rgba(var(--skin-ghost-rgb),.1)}.ghost{--skin-ghost-rgb:var(--color-fore-rgb);--skin-text:inherit}.primary-ghost{--skin-ghost-rgb:var(--color-primary-500-rgb)}.secondary-ghost{--skin-ghost-rgb:var(--color-secondary-500-rgb)}.success-ghost{--skin-ghost-rgb:var(--color-success-500-rgb)}.warning-ghost{--skin-ghost-rgb:var(--color-warning-500-rgb)}.danger-ghost{--skin-ghost-rgb:var(--color-danger-500-rgb)}.important-ghost{--skin-ghost-rgb:var(--color-important-500-rgb)}.special-ghost{--skin-ghost-rgb:var(--color-special-500-rgb)}.font-sans{font-family:-apple-system,Noto Sans,Helvetica Neue,Helvetica,Nimbus Sans L,Arial,Liberation Sans,PingFang SC,Hiragino Sans GB,Noto Sans CJK SC,Source Han Sans SC,Source Han Sans CN,Microsoft YaHei,Wenquanyi Micro Hei,WenQuanYi Zen Hei,ST Heiti,SimHei,WenQuanYi Zen Hei Sharp,sans-serif}.font-serif{font-family:Nimbus Roman No9 L,Songti SC,Noto Serif CJK SC,Source Han Serif SC,Source Han Serif CN,STSong,AR PL New Sung,AR PL SungtiL GB,NSimSun,SimSun,TW-Sung,WenQuanYi Bitmap Song,AR PL UMing CN,AR PL UMing HK,AR PL UMing TW,AR PL UMing TW MBE,PMingLiU,MingLiU,serif}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-root{font-size:16px}.text-sm{font-size:.75rem;line-height:1rem}.text-base{font-size:.8125rem;line-height:1.25rem}.text-md{font-size:.875rem;line-height:1.3rem}.text-lg{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-thin{font-weight:100}.font-light{font-weight:300}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-black{font-weight:900}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.leading-9{line-height:2.25rem}.leading-10{line-height:2.5rem}.leading-none{line-height:1}.leading-tight{line-height:1.25}.leading-snug{line-height:1.375}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.leading-loose{line-height:2}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{-webkit-line-clamp:3}.line-clamp-3,.line-clamp-4{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.line-clamp-4{-webkit-line-clamp:4}.line-clamp-5{-webkit-line-clamp:5}.line-clamp-5,.line-clamp-6{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.line-clamp-6{-webkit-line-clamp:6}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.align-middle{vertical-align:middle}.align-top{vertical-align:top}.align-bottom{vertical-align:bottom}.align-sub{vertical-align:sub}.align-super{vertical-align:super}.text-primary{--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.text-secondary{--tw-text-opacity:1;color:rgba(var(--color-secondary-500-rgb),var(--tw-text-opacity))}.text-success{--tw-text-opacity:1;color:rgba(var(--color-success-500-rgb),var(--tw-text-opacity))}.text-warning{--tw-text-opacity:1;color:rgba(var(--color-warning-500-rgb),var(--tw-text-opacity))}.text-danger{--tw-text-opacity:1;color:rgba(var(--color-danger-500-rgb),var(--tw-text-opacity))}.text-important{--tw-text-opacity:1;color:rgba(var(--color-important-500-rgb),var(--tw-text-opacity))}.text-special{--tw-text-opacity:1;color:rgba(var(--color-special-500-rgb),var(--tw-text-opacity))}.text-primary-50{--tw-text-opacity:1;color:rgba(var(--color-primary-50-rgb),var(--tw-text-opacity))}.text-primary-100{--tw-text-opacity:1;color:rgba(var(--color-primary-100-rgb),var(--tw-text-opacity))}.text-primary-200{--tw-text-opacity:1;color:rgba(var(--color-primary-200-rgb),var(--tw-text-opacity))}.text-primary-300{--tw-text-opacity:1;color:rgba(var(--color-primary-300-rgb),var(--tw-text-opacity))}.text-primary-400{--tw-text-opacity:1;color:rgba(var(--color-primary-400-rgb),var(--tw-text-opacity))}.text-primary-500{--tw-text-opacity:1;color:rgba(var(--color-primary-500-rgb),var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity:1;color:rgba(var(--color-primary-600-rgb),var(--tw-text-opacity))}.text-primary-700{--tw-text-opacity:1;color:rgba(var(--color-primary-700-rgb),var(--tw-text-opacity))}.text-primary-800{--tw-text-opacity:1;color:rgba(var(--color-primary-800-rgb),var(--tw-text-opacity))}.text-primary-900{--tw-text-opacity:1;color:rgba(var(--color-primary-900-rgb),var(--tw-text-opacity))}.text-primary-950{--tw-text-opacity:1;color:rgba(var(--color-primary-950-rgb),var(--tw-text-opacity))}.text-secondary-50{--tw-text-opacity:1;color:rgba(var(--color-secondary-50-rgb),var(--tw-text-opacity))}.text-secondary-100{--tw-text-opacity:1;color:rgba(var(--color-secondary-100-rgb),var(--tw-text-opacity))}.text-secondary-200{--tw-text-opacity:1;color:rgba(var(--color-secondary-200-rgb),var(--tw-text-opacity))}.text-secondary-300{--tw-text-opacity:1;color:rgba(var(--color-secondary-300-rgb),var(--tw-text-opacity))}.text-secondary-400{--tw-text-opacity:1;color:rgba(var(--color-secondary-400-rgb),var(--tw-text-opacity))}.text-secondary-500{--tw-text-opacity:1;color:rgba(var(--color-secondary-500-rgb),var(--tw-text-opacity))}.text-secondary-600{--tw-text-opacity:1;color:rgba(var(--color-secondary-600-rgb),var(--tw-text-opacity))}.text-secondary-700{--tw-text-opacity:1;color:rgba(var(--color-secondary-700-rgb),var(--tw-text-opacity))}.text-secondary-800{--tw-text-opacity:1;color:rgba(var(--color-secondary-800-rgb),var(--tw-text-opacity))}.text-secondary-900{--tw-text-opacity:1;color:rgba(var(--color-secondary-900-rgb),var(--tw-text-opacity))}.text-secondary-950{--tw-text-opacity:1;color:rgba(var(--color-secondary-950-rgb),var(--tw-text-opacity))}.text-gray-50{--tw-text-opacity:1;color:rgba(var(--color-gray-50-rgb),var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgba(var(--color-gray-100-rgb),var(--tw-text-opacity))}.text-gray-200,.text-lightest{--tw-text-opacity:1;color:rgba(var(--color-gray-200-rgb),var(--tw-text-opacity))}.text-gray-300,.text-lighter{--tw-text-opacity:1;color:rgba(var(--color-gray-300-rgb),var(--tw-text-opacity))}.text-gray-400,.text-lighten{--tw-text-opacity:1;color:rgba(var(--color-gray-400-rgb),var(--tw-text-opacity))}.text-gray,.text-gray-500{--tw-text-opacity:1;color:rgba(var(--color-gray-500-rgb),var(--tw-text-opacity))}.text-darken,.text-gray-600{--tw-text-opacity:1;color:rgba(var(--color-gray-600-rgb),var(--tw-text-opacity))}.text-darker,.text-gray-700{--tw-text-opacity:1;color:rgba(var(--color-gray-700-rgb),var(--tw-text-opacity))}.text-darkest,.text-gray-800{--tw-text-opacity:1;color:rgba(var(--color-gray-800-rgb),var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgba(var(--color-gray-900-rgb),var(--tw-text-opacity))}.text-gray-950{--tw-text-opacity:1;color:rgba(var(--color-gray-950-rgb),var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgba(var(--color-white-rgb),var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgba(var(--color-black-rgb),var(--tw-text-opacity))}.text-transparent{color:transparent}.text-canvas{--tw-text-opacity:1;color:rgba(var(--color-canvas-rgb),var(--tw-text-opacity))}.text-surface-light{--tw-text-opacity:1;color:rgba(var(--color-surface-light-rgb),var(--tw-text-opacity))}.text-surface{--tw-text-opacity:1;color:rgba(var(--color-surface-rgb),var(--tw-text-opacity))}.text-surface-strong{--tw-text-opacity:1;color:rgba(var(--color-surface-strong-rgb),var(--tw-text-opacity))}.text-inverse{--tw-text-opacity:1;color:rgba(var(--color-inverse-rgb),var(--tw-text-opacity))}.text-fore-in-light{--tw-text-opacity:1;color:rgba(var(--color-fore-in-light-rgb),var(--tw-text-opacity))}.text-fore-in-dark{--tw-text-opacity:1;color:rgba(var(--color-fore-in-dark-rgb),var(--tw-text-opacity))}.text-fore{--tw-text-opacity:1;color:rgba(var(--color-fore-rgb),var(--tw-text-opacity))}.text-focus{--tw-text-opacity:1;color:rgba(var(--color-focus-rgb),var(--tw-text-opacity))}.text-link{--tw-text-opacity:1;color:rgba(var(--color-link-rgb),var(--tw-text-opacity))}.text-link-hover{--tw-text-opacity:1;color:rgba(var(--color-link-hover-rgb),var(--tw-text-opacity))}.text-current{color:currentColor}.text-inherit{color:inherit}.clip,.ellipsis,.text-clip,.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clip,.text-clip{text-overflow:clip}.whitespace-normal{white-space:normal}.nowrap,.whitespace-nowrap{white-space:nowrap}.pre,.whitespace-pre{white-space:pre}.pre-line,.whitespace-pre-line{white-space:pre-line}.pre-wrap,.whitespace-pre-wrap{white-space:pre-wrap}.break-normal{overflow-wrap:normal;word-break:normal}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.text-opacity-0{--tw-text-opacity:0}.text-opacity-5{--tw-text-opacity:.05}.text-opacity-10{--tw-text-opacity:.1}.text-opacity-20{--tw-text-opacity:.2}.text-opacity-25{--tw-text-opacity:.25}.text-opacity-30{--tw-text-opacity:.3}.text-opacity-40{--tw-text-opacity:.4}.text-opacity-50{--tw-text-opacity:.5}.text-opacity-60{--tw-text-opacity:.6}.text-opacity-70{--tw-text-opacity:.7}.text-opacity-80{--tw-text-opacity:.8}.text-opacity-90{--tw-text-opacity:.9}.text-opacity-95{--tw-text-opacity:.95}.text-opacity-100{--tw-text-opacity:1}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.list-unstyled{list-style-type:none;padding-left:0}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.bg-primary{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-500-rgb),var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-500-rgb),var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity:1;background-color:rgba(var(--color-success-500-rgb),var(--tw-bg-opacity))}.bg-warning{--tw-bg-opacity:1;background-color:rgba(var(--color-warning-500-rgb),var(--tw-bg-opacity))}.bg-danger{--tw-bg-opacity:1;background-color:rgba(var(--color-danger-500-rgb),var(--tw-bg-opacity))}.bg-important{--tw-bg-opacity:1;background-color:rgba(var(--color-important-500-rgb),var(--tw-bg-opacity))}.bg-special{--tw-bg-opacity:1;background-color:rgba(var(--color-special-500-rgb),var(--tw-bg-opacity))}.bg-primary-50{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-50-rgb),var(--tw-bg-opacity))}.bg-primary-100{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-100-rgb),var(--tw-bg-opacity))}.bg-primary-200{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-200-rgb),var(--tw-bg-opacity))}.bg-primary-300{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-300-rgb),var(--tw-bg-opacity))}.bg-primary-400{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-400-rgb),var(--tw-bg-opacity))}.bg-primary-500{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-500-rgb),var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-600-rgb),var(--tw-bg-opacity))}.bg-primary-700{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-700-rgb),var(--tw-bg-opacity))}.bg-primary-800{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-800-rgb),var(--tw-bg-opacity))}.bg-primary-900{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-900-rgb),var(--tw-bg-opacity))}.bg-primary-950{--tw-bg-opacity:1;background-color:rgba(var(--color-primary-950-rgb),var(--tw-bg-opacity))}.bg-secondary-50{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-50-rgb),var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-100-rgb),var(--tw-bg-opacity))}.bg-secondary-200{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-200-rgb),var(--tw-bg-opacity))}.bg-secondary-300{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-300-rgb),var(--tw-bg-opacity))}.bg-secondary-400{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-400-rgb),var(--tw-bg-opacity))}.bg-secondary-500{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-500-rgb),var(--tw-bg-opacity))}.bg-secondary-600{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-600-rgb),var(--tw-bg-opacity))}.bg-secondary-700{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-700-rgb),var(--tw-bg-opacity))}.bg-secondary-800{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-800-rgb),var(--tw-bg-opacity))}.bg-secondary-900{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-900-rgb),var(--tw-bg-opacity))}.bg-secondary-950{--tw-bg-opacity:1;background-color:rgba(var(--color-secondary-950-rgb),var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-50-rgb),var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-100-rgb),var(--tw-bg-opacity))}.bg-gray-200,.bg-lightest{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-200-rgb),var(--tw-bg-opacity))}.bg-gray-300,.bg-lighter{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-300-rgb),var(--tw-bg-opacity))}.bg-gray-400,.bg-light{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-400-rgb),var(--tw-bg-opacity))}.bg-gray,.bg-gray-500{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-500-rgb),var(--tw-bg-opacity))}.bg-darken,.bg-gray-600{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-600-rgb),var(--tw-bg-opacity))}.bg-darker,.bg-gray-700{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-700-rgb),var(--tw-bg-opacity))}.bg-darkest,.bg-gray-800{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-800-rgb),var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-900-rgb),var(--tw-bg-opacity))}.bg-gray-950{--tw-bg-opacity:1;background-color:rgba(var(--color-gray-950-rgb),var(--tw-bg-opacity))}.bg-canvas{--tw-bg-opacity:1;background-color:rgba(var(--color-canvas-rgb),var(--tw-bg-opacity))}.bg-surface-light{--tw-bg-opacity:1;background-color:rgba(var(--color-surface-light-rgb),var(--tw-bg-opacity))}.bg-surface{--tw-bg-opacity:1;background-color:rgba(var(--color-surface-rgb),var(--tw-bg-opacity))}.bg-surface-strong{--tw-bg-opacity:1;background-color:rgba(var(--color-surface-strong-rgb),var(--tw-bg-opacity))}.bg-inverse{--tw-bg-opacity:1;background-color:rgba(var(--color-inverse-rgb),var(--tw-bg-opacity))}.bg-fore-in-light{--tw-bg-opacity:1;background-color:rgba(var(--color-fore-in-light-rgb),var(--tw-bg-opacity))}.bg-fore-in-dark{--tw-bg-opacity:1;background-color:rgba(var(--color-fore-in-dark-rgb),var(--tw-bg-opacity))}.bg-fore{--tw-bg-opacity:1;background-color:rgba(var(--color-fore-rgb),var(--tw-bg-opacity))}.bg-focus{--tw-bg-opacity:1;background-color:rgba(var(--color-focus-rgb),var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgba(var(--color-white-rgb),var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgba(var(--color-black-rgb),var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-current{background-color:currentColor}.bg-inherit{background-color:inherit}.bg-none{background-image:none}.bg-opacity-0{--tw-bg-opacity:0}.bg-opacity-5{--tw-bg-opacity:.05}.bg-opacity-10{--tw-bg-opacity:.1}.bg-opacity-20{--tw-bg-opacity:.2}.bg-opacity-30{--tw-bg-opacity:.3}.bg-opacity-40{--tw-bg-opacity:.4}.bg-opacity-50{--tw-bg-opacity:.5}.bg-opacity-60{--tw-bg-opacity:.6}.bg-opacity-70{--tw-bg-opacity:.7}.bg-opacity-80{--tw-bg-opacity:.8}.bg-opacity-90{--tw-bg-opacity:.9}.bg-opacity-100{--tw-bg-opacity:1}.bg-auto{background-size:auto}.bg-cover{background-size:cover}.bg-contain{background-size:contain}.bg-repeat{background-repeat:repeat}.bg-no-repeat{background-repeat:no-repeat}.bg-repeat-x{background-repeat:repeat-x}.bg-repeat-y{background-repeat:repeat-y}.bg-repeat-round{background-repeat:round}.bg-repeat-space{background-repeat:space}.bg-bottom{background-position:bottom}.bg-center{background-position:50%}.bg-left{background-position:0}.bg-left-bottom{background-position:0 100%}.bg-left-top{background-position:0 0}.bg-right{background-position:100%}.bg-right-bottom{background-position:100% 100%}.bg-right-top{background-position:100% 0}.bg-top{background-position:top}.bg-fixed{background-attachment:fixed}.bg-local{background-attachment:local}.bg-scroll{background-attachment:scroll}.divider{align-self:stretch;border-color:currentColor;border-left-width:1px;border-top-width:1px;opacity:.1}.border-0{border-width:0}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-t{border-top-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-b{border-bottom-width:1px}.border-t-0{border-top-width:0}.border-r-0{border-right-width:0}.border-b-0{border-bottom-width:0}.border-l-0{border-left-width:0}.border-t-2{border-top-width:2px}.border-l-2{border-left-width:2px}.border-r-2{border-right-width:2px}.border-b-2{border-bottom-width:2px}.border-t-4{border-top-width:4px}.border-l-4{border-left-width:4px}.border-r-4{border-right-width:4px}.border-b-4{border-bottom-width:4px}.border-light{--tw-border-opacity:1;border-color:rgba(var(--color-border-light-rgb),var(--tw-border-opacity))}.border-strong{--tw-border-opacity:1;border-color:rgba(var(--color-border-strong-rgb),var(--tw-border-opacity))}.border-primary{--tw-border-opacity:1;border-color:rgba(var(--color-primary-500-rgb),var(--tw-border-opacity))}.border-secondary{--tw-border-opacity:1;border-color:rgba(var(--color-secondary-500-rgb),var(--tw-border-opacity))}.border-success{--tw-border-opacity:1;border-color:rgba(var(--color-success-500-rgb),var(--tw-border-opacity))}.border-warning{--tw-border-opacity:1;border-color:rgba(var(--color-warning-500-rgb),var(--tw-border-opacity))}.border-danger{--tw-border-opacity:1;border-color:rgba(var(--color-danger-500-rgb),var(--tw-border-opacity))}.border-important{--tw-border-opacity:1;border-color:rgba(var(--color-important-500-rgb),var(--tw-border-opacity))}.border-special{--tw-border-opacity:1;border-color:rgba(var(--color-special-500-rgb),var(--tw-border-opacity))}.border-gray-50{--tw-border-opacity:1;border-color:rgba(var(--color-gray-50-rgb),var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity:1;border-color:rgba(var(--color-gray-100-rgb),var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgba(var(--color-gray-200-rgb),var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgba(var(--color-gray-300-rgb),var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgba(var(--color-gray-400-rgb),var(--tw-border-opacity))}.border-gray,.border-gray-500{--tw-border-opacity:1;border-color:rgba(var(--color-gray-500-rgb),var(--tw-border-opacity))}.border-gray-600{--tw-border-opacity:1;border-color:rgba(var(--color-gray-600-rgb),var(--tw-border-opacity))}.border-gray-700{--tw-border-opacity:1;border-color:rgba(var(--color-gray-700-rgb),var(--tw-border-opacity))}.border-gray-800{--tw-border-opacity:1;border-color:rgba(var(--color-gray-800-rgb),var(--tw-border-opacity))}.border-gray-900{--tw-border-opacity:1;border-color:rgba(var(--color-gray-900-rgb),var(--tw-border-opacity))}.border-gray-950{--tw-border-opacity:1;border-color:rgba(var(--color-gray-950-rgb),var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgba(var(--color-white-rgb),var(--tw-border-opacity))}.border-black{--tw-border-opacity:1;border-color:rgba(var(--color-black-rgb),var(--tw-border-opacity))}.border-canvas{--tw-border-opacity:1;border-color:rgba(var(--color-canvas-rgb),var(--tw-border-opacity))}.border-surface-light{--tw-border-opacity:1;border-color:rgba(var(--color-surface-light-rgb),var(--tw-border-opacity))}.border-surface{--tw-border-opacity:1;border-color:rgba(var(--color-surface-rgb),var(--tw-border-opacity))}.border-surface-strong{--tw-border-opacity:1;border-color:rgba(var(--color-surface-strong-rgb),var(--tw-border-opacity))}.border-inverse{--tw-border-opacity:1;border-color:rgba(var(--color-inverse-rgb),var(--tw-border-opacity))}.border-fore-in-light{--tw-border-opacity:1;border-color:rgba(var(--color-fore-in-light-rgb),var(--tw-border-opacity))}.border-fore-in-dark{--tw-border-opacity:1;border-color:rgba(var(--color-fore-in-dark-rgb),var(--tw-border-opacity))}.border-fore{--tw-border-opacity:1;border-color:rgba(var(--color-fore-rgb),var(--tw-border-opacity))}.border-focus{--tw-border-opacity:1;border-color:rgba(var(--color-focus-rgb),var(--tw-border-opacity))}.border-link{--tw-border-opacity:1;border-color:rgba(var(--color-link-rgb),var(--tw-border-opacity))}.border-link-hover{--tw-border-opacity:1;border-color:rgba(var(--color-link-hover-rgb),var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-current{border-color:currentColor}.border-inherit{border-color:inherit}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-double{border-style:double}.border-hidden{border-style:hidden}.border-none{border-style:none}.border-opacity-0{--tw-border-opacity:0}.border-opacity-5{--tw-border-opacity:.05}.border-opacity-10{--tw-border-opacity:.1}.border-opacity-20{--tw-border-opacity:.2}.border-opacity-25{--tw-border-opacity:.25}.border-opacity-30{--tw-border-opacity:.3}.border-opacity-40{--tw-border-opacity:.4}.border-opacity-50{--tw-border-opacity:.5}.border-opacity-60{--tw-border-opacity:.6}.border-opacity-70{--tw-border-opacity:.7}.border-opacity-80{--tw-border-opacity:.8}.border-opacity-90{--tw-border-opacity:.9}.border-opacity-95{--tw-border-opacity:.95}.border-opacity-100{--tw-border-opacity:1}.rounded-none{border-radius:var(--radius-none)}.rounded-sm{border-radius:var(--radius-sm)}.rounded{border-radius:var(--radius)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.circle,.rounded-full{border-radius:var(--radius-full)}.rounded-l-none{border-bottom-left-radius:var(--radius-none);border-top-left-radius:var(--radius-none)}.rounded-t-none{border-top-left-radius:var(--radius-none)}.rounded-r-none,.rounded-t-none{border-top-right-radius:var(--radius-none)}.rounded-b-none,.rounded-r-none{border-bottom-right-radius:var(--radius-none)}.rounded-b-none{border-bottom-left-radius:var(--radius-none)}.rounded-br-none{border-bottom-right-radius:var(--radius-none)}.rounded-bl-none{border-bottom-left-radius:var(--radius-none)}.rounded-tr-none{border-top-right-radius:var(--radius-none)}.rounded-tl-none{border-top-left-radius:var(--radius-none)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-border-rgb),var(--tw-ring-opacity))}.ring-border-light{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-border-light-rgb),var(--tw-ring-opacity))}.ring-border{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-border-rgb),var(--tw-ring-opacity))}.ring-border-strong{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-border-strong-rgb),var(--tw-ring-opacity))}.ring-light{--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.05}.ring-gray{--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.1}.ring-dark{--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.2}.ring-darker{--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.3}.ring-darkest{--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity));--tw-ring-opacity:0.5}.ring-primary{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-primary-500-rgb),var(--tw-ring-opacity))}.ring-secondary{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-secondary-500-rgb),var(--tw-ring-opacity))}.ring-warning{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-warning-500-rgb),var(--tw-ring-opacity))}.ring-success{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-success-500-rgb),var(--tw-ring-opacity))}.ring-danger{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-danger-500-rgb),var(--tw-ring-opacity))}.ring-important{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-important-500-rgb),var(--tw-ring-opacity))}.ring-special{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-special-500-rgb),var(--tw-ring-opacity))}.ring-gray-50{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-50-rgb),var(--tw-ring-opacity))}.ring-gray-100{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-100-rgb),var(--tw-ring-opacity))}.ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-200-rgb),var(--tw-ring-opacity))}.ring-gray-300{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-300-rgb),var(--tw-ring-opacity))}.ring-gray-400{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-400-rgb),var(--tw-ring-opacity))}.ring-gray-500{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-500-rgb),var(--tw-ring-opacity))}.ring-gray-600{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-600-rgb),var(--tw-ring-opacity))}.ring-gray-700{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-700-rgb),var(--tw-ring-opacity))}.ring-gray-800{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-800-rgb),var(--tw-ring-opacity))}.ring-gray-900{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-900-rgb),var(--tw-ring-opacity))}.ring-gray-950{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-gray-950-rgb),var(--tw-ring-opacity))}.ring-inverse{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-inverse-rgb),var(--tw-ring-opacity))}.ring-canvas{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-canvas-rgb),var(--tw-ring-opacity))}.ring-surface{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-surface-rgb),var(--tw-ring-opacity))}.ring-fore{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-fore-rgb),var(--tw-ring-opacity))}.ring-transparent{--tw-ring-color:transparent}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-black-rgb),var(--tw-ring-opacity))}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgba(var(--color-white-rgb),var(--tw-ring-opacity))}.ring-inherit{--tw-ring-color:inherit}.ring-current{--tw-ring-color:currentColor}.ring-opacity-0{--tw-ring-opacity:0}.ring-opacity-5{--tw-ring-opacity:.05}.ring-opacity-10{--tw-ring-opacity:.1}.ring-opacity-20{--tw-ring-opacity:.2}.ring-opacity-30{--tw-ring-opacity:.3}.ring-opacity-40{--tw-ring-opacity:.4}.ring-opacity-50{--tw-ring-opacity:.5}.ring-opacity-60{--tw-ring-opacity:.6}.ring-opacity-70{--tw-ring-opacity:.7}.ring-opacity-80{--tw-ring-opacity:.8}.ring-opacity-90{--tw-ring-opacity:.9}.ring-opacity-100{--tw-ring-opacity:1}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-0,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-3{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-3,.ring-4{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-8{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.ring-offset-0{--tw-ring-offset-width:0px}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.ring-offset-4{--tw-ring-offset-width:4px}.ring-offset-8{--tw-ring-offset-width:8px}.shadow-sm{--tw-shadow:var(--shadow-sm);--tw-shadow-colored:var(--shadow-sm)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow{--tw-shadow:var(--shadow);--tw-shadow-colored:var(--shadow)}.shadow-md{--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.shadow-xl{--tw-shadow:var(--shadow-xl);--tw-shadow-colored:var(--shadow-xl)}.shadow-2xl,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:var(--shadow-2xl);--tw-shadow-colored:var(--shadow-2xl)}.shadow-inner{--tw-shadow:var(--shadow-inner);--tw-shadow-colored:var(--shadow-inner)}.shadow-inner,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:var(--shadow-none);--tw-shadow-colored:var(--shadow-none)}.muted{opacity:var(--opacity-muted)}.opacity-0{opacity:0}.opacity-5{opacity:.05}.opacity-10{opacity:.1}.opacity-20{opacity:.2}.opacity-25{opacity:.25}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.opacity-95{opacity:.95}.opacity-100{opacity:1}.blur-none{--tw-blur:blur(0)}.blur-none,.blur-sm{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-sm{--tw-blur:blur(4px)}.blur{--tw-blur:blur(8px)}.blur,.blur-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-md{--tw-blur:blur(12px)}.blur-lg{--tw-blur:blur(16px)}.blur-lg,.blur-xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-xl{--tw-blur:blur(24px)}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter-none{filter:none!important}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.drop-shadow-sm{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.drop-shadow-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.drop-shadow-lg,.drop-shadow-xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-xl{--tw-drop-shadow:drop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08))}.drop-shadow-2xl{--tw-drop-shadow:drop-shadow(0 25px 25px rgba(0,0,0,.15));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-none{--tw-backdrop-blur:blur(0)}.backdrop-blur-none,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-md{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px)}.backdrop-blur-lg,.backdrop-blur-xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.backdrop-blur-2xl{--tw-backdrop-blur:blur(40px)}.backdrop-blur-2xl,.backdrop-blur-3xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-3xl{--tw-backdrop-blur:blur(64px)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-shadow{transition-duration:.15s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-none{transition-property:none}.fade,.fade-from-bottom,.fade-from-center,.fade-from-left,.fade-from-right,.fade-from-top{opacity:0;transition-duration:.15s;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.fade-from-bottom,.fade-from-center,.fade-from-left,.fade-from-right,.fade-from-top{--tw-scale-x:.9;--tw-scale-y:.9}.fade-from-bottom,.fade-from-center,.fade-from-left,.fade-from-right,.fade-from-top{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.fade-from-bottom{--tw-translate-y:25%}.fade-from-top{--tw-translate-y:-25%}.fade-from-left,.fade-from-top{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.fade-from-left{--tw-translate-x:-25%}.fade-from-right{--tw-translate-x:25%}.fade-from-bottom.in,.fade-from-center.in,.fade-from-left.in,.fade-from-right,.fade-from-right.in,.fade-from-top.in,.fade.in{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.fade-from-bottom.in,.fade-from-center.in,.fade-from-left.in,.fade-from-right.in,.fade-from-top.in,.fade.in{--tw-translate-x:0px;--tw-translate-y:0px;--tw-scale-x:1;--tw-scale-y:1;opacity:1}.duration-75{transition-duration:75ms}.duration-100{transition-duration:.1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-1000{transition-duration:1s}@keyframes -spin{to{transform:rotate(1turn)}}.animate-spin,.spin{animation:-spin 1s linear infinite}@keyframes -ping{75%,to{opacity:0;transform:scale(2)}}.animate-ping,.ping{animation:-ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes -pulse{50%{opacity:.5}}.animate-pulse,.pulse{animation:-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes -bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}.animate-bounce,.bounce{animation:-bounce 1s infinite}.scale-0{--tw-scale-x:0;--tw-scale-y:0}.scale-0,.scale-50{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-50{--tw-scale-x:.5;--tw-scale-y:.5}.scale-75{--tw-scale-x:.75;--tw-scale-y:.75}.scale-75,.scale-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-90{--tw-scale-x:.9;--tw-scale-y:.9}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-100,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.scale-105,.scale-110{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.scale-125{--tw-scale-x:1.25;--tw-scale-y:1.25}.scale-125,.scale-150{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5}.flip-x{--tw-scale-x:-1}.flip-x,.flip-y{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flip-y{--tw-scale-y:-1}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-1{--tw-rotate:1deg}.rotate-2{--tw-rotate:2deg}.rotate-2,.rotate-3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-3{--tw-rotate:3deg}.rotate-6{--tw-rotate:6deg}.rotate-12,.rotate-6{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-12{--tw-rotate:12deg}.rotate-45{--tw-rotate:45deg}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.rotate-135{--tw-rotate:135deg}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.rotate-270{--tw-rotate:270deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.basis-0{flex-basis:0px}.basis-1{flex-basis:0.25rem}.basis-2{flex-basis:0.5rem}.basis-3{flex-basis:0.75rem}.basis-4{flex-basis:1rem}.basis-5{flex-basis:1.25rem}.basis-6{flex-basis:1.5rem}.basis-7{flex-basis:1.75rem}.basis-8{flex-basis:2rem}.basis-9{flex-basis:2.25rem}.basis-10{flex-basis:2.5rem}.basis-11{flex-basis:2.75rem}.basis-12{flex-basis:3rem}.basis-14{flex-basis:3.5rem}.basis-16{flex-basis:4rem}.basis-20{flex-basis:5rem}.basis-24{flex-basis:6rem}.basis-28{flex-basis:7rem}.basis-32{flex-basis:8rem}.basis-36{flex-basis:9rem}.basis-40{flex-basis:10rem}.basis-44{flex-basis:11rem}.basis-48{flex-basis:12rem}.basis-52{flex-basis:13rem}.basis-56{flex-basis:14rem}.basis-60{flex-basis:15rem}.basis-64{flex-basis:16rem}.basis-72{flex-basis:18rem}.basis-80{flex-basis:20rem}.basis-96{flex-basis:24rem}.basis-auto{flex-basis:auto}.basis-px{flex-basis:1px}.basis-0\.5{flex-basis:0.125rem}.basis-1\.5{flex-basis:0.375rem}.basis-2\.5{flex-basis:0.625rem}.basis-3\.5{flex-basis:0.875rem}.basis-1\/2{flex-basis:50%}.basis-1\/3{flex-basis:33.333333%}.basis-2\/3{flex-basis:66.666667%}.basis-1\/4{flex-basis:25%}.basis-2\/4{flex-basis:50%}.basis-3\/4{flex-basis:75%}.basis-1\/5{flex-basis:20%}.basis-2\/5{flex-basis:40%}.basis-3\/5{flex-basis:60%}.basis-4\/5{flex-basis:80%}.basis-1\/6{flex-basis:16.666667%}.basis-2\/6{flex-basis:33.333333%}.basis-3\/6{flex-basis:50%}.basis-4\/6{flex-basis:66.666667%}.basis-5\/6{flex-basis:83.333333%}.basis-1\/12{flex-basis:8.333333%}.basis-2\/12{flex-basis:16.666667%}.basis-3\/12{flex-basis:25%}.basis-4\/12{flex-basis:33.333333%}.basis-5\/12{flex-basis:41.666667%}.basis-6\/12{flex-basis:50%}.basis-7\/12{flex-basis:58.333333%}.basis-8\/12{flex-basis:66.666667%}.basis-9\/12{flex-basis:75%}.basis-10\/12{flex-basis:83.333333%}.basis-11\/12{flex-basis:91.666667%}.basis-full{flex-basis:100%}.row{display:flex;flex-direction:row}.center,.col{display:flex;flex-direction:column}.center,.center-row{align-items:center;justify-content:center}.center-row{display:flex;flex-direction:row}.center-x,.center-y{align-items:center;display:flex}.center-y{flex-direction:column}.row-reverse{display:flex;flex-direction:row-reverse}.col-reverse{display:flex;flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.grow{flex-grow:1!important}.grow-0{flex-grow:0!important}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.order-first{order:-9999}.order-last{order:9999}.order-none{order:0}.gap-0{gap:0}.gap-x-0{-moz-column-gap:0;column-gap:0}.gap-y-0{row-gap:0}.gap-px{gap:1px}.gap-x-px{-moz-column-gap:1px;column-gap:1px}.gap-y-px{row-gap:1px}.gap-0\.5{gap:.125rem}.gap-x-0\.5{-moz-column-gap:.125rem;column-gap:.125rem}.gap-y-0\.5{row-gap:.125rem}.gap-3px{gap:3px}.gap-1{gap:.25rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-y-1{row-gap:.25rem}.gap-1\.5{gap:.375rem}.gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-y-1\.5{row-gap:.375rem}.gap-2{gap:.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-y-2{row-gap:.5rem}.gap-2\.5{gap:.625rem}.gap-x-2\.5{-moz-column-gap:.625rem;column-gap:.625rem}.gap-y-2\.5{row-gap:.625rem}.gap-3{gap:.75rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-y-3{row-gap:.75rem}.gap-3\.5{gap:.875rem}.gap-x-3\.5{-moz-column-gap:.875rem;column-gap:.875rem}.gap-y-3\.5{row-gap:.875rem}.gap-4{gap:1rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-4{row-gap:1rem}.gap-5{gap:1.25rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-y-5{row-gap:1.25rem}.gap-6{gap:1.5rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-6{row-gap:1.5rem}.gap-7{gap:1.75rem}.gap-x-7{-moz-column-gap:1.75rem;column-gap:1.75rem}.gap-y-7{row-gap:1.75rem}.gap-8{gap:2rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-8{row-gap:2rem}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}.self-baseline{align-self:baseline}.content-center{align-content:center}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-evenly{align-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch} \ No newline at end of file diff --git a/dev/zui/zui.esm.js b/dev/zui/zui.esm.js index c1603451d5..e83a6e44bc 100644 --- a/dev/zui/zui.esm.js +++ b/dev/zui/zui.esm.js @@ -1,46 +1,46 @@ -var ps = (n, t, e) => { +var ms = (n, t, e) => { if (!t.has(n)) throw TypeError("Cannot " + e); }; -var rt = (n, t, e) => (ps(n, t, "read from private field"), e ? e.call(n) : t.get(n)), lt = (n, t, e) => { +var rt = (n, t, e) => (ms(n, t, "read from private field"), e ? e.call(n) : t.get(n)), lt = (n, t, e) => { if (t.has(n)) throw TypeError("Cannot add the same private member more than once"); t instanceof WeakSet ? t.add(n) : t.set(n, e); -}, _t = (n, t, e, s) => (ps(n, t, "write to private field"), s ? s.call(n, e) : t.set(n, e), e); -var gs = (n, t, e) => (ps(n, t, "access private method"), e); -const Ru = "3.0.0-alpha.4", Du = 1720589577844, Ht = document, xn = window, Rr = Ht.documentElement, fe = Ht.createElement.bind(Ht), Dr = fe("div"), ms = fe("table"), qa = fe("tbody"), Xi = fe("tr"), { isArray: Gn, prototype: Lr } = Array, { concat: Ga, filter: ei, indexOf: zr, map: Fr, push: Ya, slice: Or, some: ni, splice: Ja } = Lr, Za = /^#(?:[\w-]|\\.|[^\x00-\xa0])*$/, Xa = /^\.(?:[\w-]|\\.|[^\x00-\xa0])*$/, Qa = /<.+>/, tl = /^\w+$/; -function si(n, t) { +}, mt = (n, t, e, s) => (ms(n, t, "write to private field"), s ? s.call(n, e) : t.set(n, e), e); +var _s = (n, t, e) => (ms(n, t, "access private method"), e); +const Pu = "3.0.0-alpha.4", Ru = 1720929697527, Ht = document, Tn = window, Rr = Ht.documentElement, fe = Ht.createElement.bind(Ht), Dr = fe("div"), ys = fe("table"), qa = fe("tbody"), Xi = fe("tr"), { isArray: Yn, prototype: Lr } = Array, { concat: Ga, filter: ni, indexOf: zr, map: Fr, push: Ya, slice: Or, some: si, splice: Ja } = Lr, Za = /^#(?:[\w-]|\\.|[^\x00-\xa0])*$/, Xa = /^\.(?:[\w-]|\\.|[^\x00-\xa0])*$/, Qa = /<.+>/, tl = /^\w+$/; +function ii(n, t) { const e = el(t); return !n || !e && !ce(t) && !Z(t) ? [] : !e && Xa.test(n) ? t.getElementsByClassName(n.slice(1).replace(/\\/g, "")) : !e && tl.test(n) ? t.getElementsByTagName(n) : t.querySelectorAll(n); } -class Yn { +class Jn { constructor(t, e) { if (!t) return; - if (As(t)) + if (Is(t)) return t; let s = t; if (nt(t)) { const i = e || Ht; - if (s = Za.test(t) && ce(i) ? i.getElementById(t.slice(1).replace(/\\/g, "")) : Qa.test(t) ? jr(t) : As(i) ? i.find(t) : nt(i) ? d(i).find(t) : si(t, i), !s) + if (s = Za.test(t) && ce(i) ? i.getElementById(t.slice(1).replace(/\\/g, "")) : Qa.test(t) ? jr(t) : Is(i) ? i.find(t) : nt(i) ? d(i).find(t) : ii(t, i), !s) return; } else if (pe(t)) return this.ready(t); - (s.nodeType || s === xn) && (s = [s]), this.length = s.length; + (s.nodeType || s === Tn) && (s = [s]), this.length = s.length; for (let i = 0, r = this.length; i < r; i++) this[i] = s[i]; } init(t, e) { - return new Yn(t, e); + return new Jn(t, e); } } -const C = Yn.prototype, d = C.init; -d.fn = d.prototype = C; -C.length = 0; -C.splice = Ja; -typeof Symbol == "function" && (C[Symbol.iterator] = Lr[Symbol.iterator]); -function As(n) { - return n instanceof Yn; +const S = Jn.prototype, d = S.init; +d.fn = d.prototype = S; +S.length = 0; +S.splice = Ja; +typeof Symbol == "function" && (S[Symbol.iterator] = Lr[Symbol.iterator]); +function Is(n) { + return n instanceof Jn; } function ke(n) { return !!n && n === n.window; @@ -66,7 +66,7 @@ function pe(n) { function nt(n) { return typeof n == "string"; } -function pt(n) { +function ft(n) { return n === void 0; } function Ue(n) { @@ -75,7 +75,7 @@ function Ue(n) { function Hr(n) { return !isNaN(parseFloat(n)) && isFinite(n); } -function ii(n) { +function ri(n) { if (typeof n != "object" || n === null) return !1; const t = Object.getPrototypeOf(n); @@ -83,16 +83,16 @@ function ii(n) { } d.isWindow = ke; d.isFunction = pe; -d.isArray = Gn; +d.isArray = Yn; d.isNumeric = Hr; -d.isPlainObject = ii; +d.isPlainObject = ri; function X(n, t, e) { if (e) { let s = n.length; for (; s--; ) if (t.call(n[s], s, n[s]) === !1) return n; - } else if (ii(n)) { + } else if (ri(n)) { const s = Object.keys(n); for (let i = 0, r = s.length; i < r; i++) { const o = s[i]; @@ -106,49 +106,49 @@ function X(n, t, e) { return n; } d.each = X; -C.each = function(n) { +S.each = function(n) { return X(this, n); }; -C.empty = function() { +S.empty = function() { return this.each((n, t) => { for (; t.firstChild; ) t.removeChild(t.firstChild); }); }; -function Tn(...n) { +function Nn(...n) { const t = sl(n[0]) ? n.shift() : !1, e = n.shift(), s = n.length; if (!e) return {}; if (!s) - return Tn(t, d, e); + return Nn(t, d, e); for (let i = 0; i < s; i++) { const r = n[i]; for (const o in r) - t && (Gn(r[o]) || ii(r[o])) ? ((!e[o] || e[o].constructor !== r[o].constructor) && (e[o] = new r[o].constructor()), Tn(t, e[o], r[o])) : e[o] = r[o]; + t && (Yn(r[o]) || ri(r[o])) ? ((!e[o] || e[o].constructor !== r[o].constructor) && (e[o] = new r[o].constructor()), Nn(t, e[o], r[o])) : e[o] = r[o]; } return e; } -d.extend = Tn; -C.extend = function(n) { - return Tn(C, n); +d.extend = Nn; +S.extend = function(n) { + return Nn(S, n); }; const il = /\S+/g; -function Jn(n) { +function Zn(n) { return nt(n) ? n.match(il) || [] : []; } -C.toggleClass = function(n, t) { - const e = Jn(n), s = !pt(t); +S.toggleClass = function(n, t) { + const e = Zn(n), s = !ft(t); return this.each((i, r) => { Z(r) && X(e, (o, a) => { s ? t ? r.classList.add(a) : r.classList.remove(a) : r.classList.toggle(a); }); }); }; -C.addClass = function(n) { +S.addClass = function(n) { return this.toggleClass(n, !0); }; -C.removeAttr = function(n) { - const t = Jn(n); +S.removeAttr = function(n) { + const t = Zn(n); return this.each((e, s) => { Z(s) && X(t, (i, r) => { s.removeAttribute(r); @@ -164,7 +164,7 @@ function rl(n, t) { const e = this[0].getAttribute(n); return Ue(e) ? void 0 : e; } - return pt(t) ? this : Ue(t) ? this.removeAttr(n) : this.each((e, s) => { + return ft(t) ? this : Ue(t) ? this.removeAttr(n) : this.each((e, s) => { Z(s) && s.setAttribute(n, t); }); } @@ -173,35 +173,35 @@ function rl(n, t) { return this; } } -C.attr = rl; -C.removeClass = function(n) { +S.attr = rl; +S.removeClass = function(n) { return arguments.length ? this.toggleClass(n, !1) : this.attr("class", ""); }; -C.hasClass = function(n) { - return !!n && ni.call(this, (t) => Z(t) && t.classList.contains(n)); +S.hasClass = function(n) { + return !!n && si.call(this, (t) => Z(t) && t.classList.contains(n)); }; -C.get = function(n) { - return pt(n) ? Or.call(this) : (n = Number(n), this[n < 0 ? n + this.length : n]); +S.get = function(n) { + return ft(n) ? Or.call(this) : (n = Number(n), this[n < 0 ? n + this.length : n]); }; -C.eq = function(n) { +S.eq = function(n) { return d(this.get(n)); }; -C.first = function() { +S.first = function() { return this.eq(0); }; -C.last = function() { +S.last = function() { return this.eq(-1); }; function ol(n) { - return pt(n) ? this.get().map((t) => Z(t) || nl(t) ? t.textContent : "").join("") : this.each((t, e) => { + return ft(n) ? this.get().map((t) => Z(t) || nl(t) ? t.textContent : "").join("") : this.each((t, e) => { Z(e) && (e.textContent = n); }); } -C.text = ol; +S.text = ol; function Wt(n, t, e) { if (!Z(n)) return; - const s = xn.getComputedStyle(n, null); + const s = Tn.getComputedStyle(n, null); return e ? s.getPropertyValue(t) || void 0 : s[t] || n.style[t]; } function Et(n, t) { @@ -210,14 +210,14 @@ function Et(n, t) { function Qi(n, t) { return Et(n, `border${t ? "Left" : "Top"}Width`) + Et(n, `padding${t ? "Left" : "Top"}`) + Et(n, `padding${t ? "Right" : "Bottom"}`) + Et(n, `border${t ? "Right" : "Bottom"}Width`); } -const _s = {}; +const vs = {}; function al(n) { - if (_s[n]) - return _s[n]; + if (vs[n]) + return vs[n]; const t = fe(n); Ht.body.insertBefore(t, null); const e = Wt(t, "display"); - return Ht.body.removeChild(t), _s[n] = e !== "none" ? e : "block"; + return Ht.body.removeChild(t), vs[n] = e !== "none" ? e : "block"; } function tr(n) { return Wt(n, "display") === "none"; @@ -226,17 +226,17 @@ function Wr(n, t) { const e = n && (n.matches || n.webkitMatchesSelector || n.msMatchesSelector); return !!e && !!t && e.call(n, t); } -function Zn(n) { - return nt(n) ? (t, e) => Wr(e, n) : pe(n) ? n : As(n) ? (t, e) => n.is(e) : n ? (t, e) => e === n : () => !1; +function Xn(n) { + return nt(n) ? (t, e) => Wr(e, n) : pe(n) ? n : Is(n) ? (t, e) => n.is(e) : n ? (t, e) => e === n : () => !1; } -C.filter = function(n) { - const t = Zn(n); - return d(ei.call(this, (e, s) => t.call(e, s, e))); +S.filter = function(n) { + const t = Xn(n); + return d(ni.call(this, (e, s) => t.call(e, s, e))); }; function ee(n, t) { return t ? n.filter(t) : n; } -C.detach = function(n) { +S.detach = function(n) { return ee(this, n).each((t, e) => { e.parentNode && e.parentNode.removeChild(e); }), this; @@ -246,9 +246,9 @@ const ll = /^\s*<(\w+)[^>]*>/, cl = /^<(\w+)\s*\/?>(?:<\/\1>)?$/, er = { tr: qa, td: Xi, th: Xi, - thead: ms, - tbody: ms, - tfoot: ms + thead: ys, + tbody: ys, + tfoot: ys }; function jr(n) { if (!nt(n)) @@ -259,16 +259,16 @@ function jr(n) { return e.innerHTML = n, d(e.childNodes).detach().get(); } d.parseHTML = jr; -C.has = function(n) { - const t = nt(n) ? (e, s) => si(n, s).length : (e, s) => s.contains(n); +S.has = function(n) { + const t = nt(n) ? (e, s) => ii(n, s).length : (e, s) => s.contains(n); return this.filter(t); }; -C.not = function(n) { - const t = Zn(n); +S.not = function(n) { + const t = Xn(n); return this.filter((e, s) => (!nt(n) || Z(s)) && !t.call(s, e, s)); }; function Bt(n, t, e, s) { - const i = [], r = pe(t), o = s && Zn(s); + const i = [], r = pe(t), o = s && Xn(s); for (let a = 0, l = n.length; a < l; a++) if (r) { const c = t(n[a]); @@ -281,55 +281,55 @@ function Bt(n, t, e, s) { return i; } function Br(n) { - return n.multiple && n.options ? Bt(ei.call(n.options, (t) => t.selected && !t.disabled && !t.parentNode.disabled), "value") : n.value || ""; + return n.multiple && n.options ? Bt(ni.call(n.options, (t) => t.selected && !t.disabled && !t.parentNode.disabled), "value") : n.value || ""; } function hl(n) { return arguments.length ? this.each((t, e) => { const s = e.multiple && e.options; if (s || Zr.test(e.type)) { - const i = Gn(n) ? Fr.call(n, String) : Ue(n) ? [] : [String(n)]; + const i = Yn(n) ? Fr.call(n, String) : Ue(n) ? [] : [String(n)]; s ? X(e.options, (r, o) => { o.selected = i.indexOf(o.value) >= 0; }, !0) : e.checked = i.indexOf(e.value) >= 0; } else - e.value = pt(n) || Ue(n) ? "" : n; + e.value = ft(n) || Ue(n) ? "" : n; }) : this[0] && Br(this[0]); } -C.val = hl; -C.is = function(n) { - const t = Zn(n); - return ni.call(this, (e, s) => t.call(e, s, e)); +S.val = hl; +S.is = function(n) { + const t = Xn(n); + return si.call(this, (e, s) => t.call(e, s, e)); }; d.guid = 1; function It(n) { - return n.length > 1 ? ei.call(n, (t, e, s) => zr.call(s, t) === e) : n; + return n.length > 1 ? ni.call(n, (t, e, s) => zr.call(s, t) === e) : n; } d.unique = It; -C.add = function(n, t) { +S.add = function(n, t) { return d(It(this.get().concat(d(n, t).get()))); }; -C.children = function(n) { +S.children = function(n) { return ee(d(It(Bt(this, (t) => t.children))), n); }; -C.parent = function(n) { +S.parent = function(n) { return ee(d(It(Bt(this, "parentNode"))), n); }; -C.index = function(n) { +S.index = function(n) { const t = n ? d(n)[0] : this[0], e = n ? this : d(t).parent().children(); return zr.call(e, t); }; -C.closest = function(n) { +S.closest = function(n) { const t = this.filter(n); if (t.length) return t; const e = this.parent(); return e.length ? e.closest(n) : t; }; -C.siblings = function(n) { +S.siblings = function(n) { return ee(d(It(Bt(this, (t) => d(t).parent().children().not(t)))), n); }; -C.find = function(n) { - return d(It(Bt(this, (t) => si(n, t)))); +S.find = function(n) { + return d(It(Bt(this, (t) => ii(n, t)))); }; const ul = /^\s*\s*$/g, dl = /^$|^module$|\/(java|ecma)script/i, fl = ["type", "src", "nonce", "noModule"]; function pl(n, t) { @@ -349,100 +349,100 @@ function gl(n, t, e, s, i) { function ne(n, t, e, s, i, r, o, a) { return X(n, (l, c) => { X(d(c), (u, h) => { - X(d(t), (g, f) => { - const m = e ? h : f, _ = e ? f : h, y = e ? u : g; + X(d(t), (p, f) => { + const m = e ? h : f, _ = e ? f : h, y = e ? u : p; gl(m, y ? _.cloneNode(!0) : _, s, i, !y); }, a); }, o); }, r), t; } -C.after = function() { +S.after = function() { return ne(arguments, this, !1, !1, !1, !0, !0); }; -C.append = function() { +S.append = function() { return ne(arguments, this, !1, !1, !0); }; function ml(n) { if (!arguments.length) return this[0] && this[0].innerHTML; - if (pt(n)) + if (ft(n)) return this; const t = /]/.test(n); return this.each((e, s) => { Z(s) && (t ? d(s).empty().append(n) : s.innerHTML = n); }); } -C.html = ml; -C.appendTo = function(n) { +S.html = ml; +S.appendTo = function(n) { return ne(arguments, this, !0, !1, !0); }; -C.wrapInner = function(n) { +S.wrapInner = function(n) { return this.each((t, e) => { const s = d(e), i = s.contents(); i.length ? i.wrapAll(n) : s.append(n); }); }; -C.before = function() { +S.before = function() { return ne(arguments, this, !1, !0); }; -C.wrapAll = function(n) { +S.wrapAll = function(n) { let t = d(n), e = t[0]; for (; e.children.length; ) e = e.firstElementChild; return this.first().before(t), this.appendTo(e); }; -C.wrap = function(n) { +S.wrap = function(n) { return this.each((t, e) => { const s = d(n)[0]; d(e).wrapAll(t ? s.cloneNode(!0) : s); }); }; -C.insertAfter = function(n) { +S.insertAfter = function(n) { return ne(arguments, this, !0, !1, !1, !1, !1, !0); }; -C.insertBefore = function(n) { +S.insertBefore = function(n) { return ne(arguments, this, !0, !0); }; -C.prepend = function() { +S.prepend = function() { return ne(arguments, this, !1, !0, !0, !0, !0); }; -C.prependTo = function(n) { +S.prependTo = function(n) { return ne(arguments, this, !0, !0, !0, !1, !1, !0); }; -C.contents = function() { +S.contents = function() { return d(It(Bt(this, (n) => n.tagName === "IFRAME" ? [n.contentDocument] : n.tagName === "TEMPLATE" ? n.content.childNodes : n.childNodes))); }; -C.next = function(n, t, e) { +S.next = function(n, t, e) { return ee(d(It(Bt(this, "nextElementSibling", t, e))), n); }; -C.nextAll = function(n) { +S.nextAll = function(n) { return this.next(n, !0); }; -C.nextUntil = function(n, t) { +S.nextUntil = function(n, t) { return this.next(t, !0, n); }; -C.parents = function(n, t) { +S.parents = function(n, t) { return ee(d(It(Bt(this, "parentElement", !0, t))), n); }; -C.parentsUntil = function(n, t) { +S.parentsUntil = function(n, t) { return this.parents(t, n); }; -C.prev = function(n, t, e) { +S.prev = function(n, t, e) { return ee(d(It(Bt(this, "previousElementSibling", t, e))), n); }; -C.prevAll = function(n) { +S.prevAll = function(n) { return this.prev(n, !0); }; -C.prevUntil = function(n, t) { +S.prevUntil = function(n, t) { return this.prev(t, !0, n); }; -C.map = function(n) { +S.map = function(n) { return d(Ga.apply([], Fr.call(this, (t, e) => n.call(t, e, t)))); }; -C.clone = function() { +S.clone = function() { return this.map((n, t) => t.cloneNode(!0)); }; -C.offsetParent = function() { +S.offsetParent = function() { return this.map((n, t) => { let e = t.offsetParent; for (; e && Wt(e, "position") === "static"; ) @@ -450,18 +450,18 @@ C.offsetParent = function() { return e || Rr; }); }; -C.slice = function(n, t) { +S.slice = function(n, t) { return d(Or.call(this, n, t)); }; const _l = /-([a-z])/g; -function ri(n) { +function oi(n) { return n.replace(_l, (t, e) => e.toUpperCase()); } -C.ready = function(n) { +S.ready = function(n) { const t = () => setTimeout(n, 0, d); return Ht.readyState !== "loading" ? t() : Ht.addEventListener("DOMContentLoaded", t), this; }; -C.unwrap = function() { +S.unwrap = function() { return this.parent().each((n, t) => { if (t.tagName === "BODY") return; @@ -469,17 +469,17 @@ C.unwrap = function() { e.replaceWith(e.children()); }), this; }; -C.offset = function() { +S.offset = function() { const n = this[0]; if (!n) return; const t = n.getBoundingClientRect(); return { - top: t.top + xn.pageYOffset, - left: t.left + xn.pageXOffset + top: t.top + Tn.pageYOffset, + left: t.left + Tn.pageXOffset }; }; -C.position = function() { +S.position = function() { const n = this[0]; if (!n) return; @@ -515,7 +515,7 @@ const Vr = { /* IMAGE */ usemap: "useMap" }; -C.prop = function(n, t) { +S.prop = function(n, t) { if (n) { if (nt(n)) return n = Vr[n] || n, arguments.length < 2 ? this[0] && this[0][n] : this.each((e, s) => { @@ -526,27 +526,27 @@ C.prop = function(n, t) { return this; } }; -C.removeProp = function(n) { +S.removeProp = function(n) { return this.each((t, e) => { delete e[Vr[n] || n]; }); }; const yl = /^--/; -function oi(n) { +function ai(n) { return yl.test(n); } -const ys = {}, { style: vl } = Dr, wl = ["webkit", "moz", "ms"]; -function bl(n, t = oi(n)) { +const ws = {}, { style: vl } = Dr, wl = ["webkit", "moz", "ms"]; +function bl(n, t = ai(n)) { if (t) return n; - if (!ys[n]) { - const e = ri(n), s = `${e[0].toUpperCase()}${e.slice(1)}`, i = `${e} ${wl.join(`${s} `)}${s}`.split(" "); + if (!ws[n]) { + const e = oi(n), s = `${e[0].toUpperCase()}${e.slice(1)}`, i = `${e} ${wl.join(`${s} `)}${s}`.split(" "); X(i, (r, o) => { if (o in vl) - return ys[n] = o, !1; + return ws[n] = o, !1; }); } - return ys[n]; + return ws[n]; } const Cl = { animationIterationCount: !0, @@ -568,12 +568,12 @@ const Cl = { widows: !0, zIndex: !0 }; -function Ur(n, t, e = oi(n)) { +function Ur(n, t, e = ai(n)) { return !e && !Cl[n] && Hr(t) ? `${t}px` : t; } function Sl(n, t) { if (nt(n)) { - const e = oi(n); + const e = ai(n); return n = bl(n, e), arguments.length < 2 ? this[0] && Wt(this[0], n, e) : n ? (t = Ur(n, t, e), this.each((s, i) => { Z(i) && (e ? i.style.setProperty(n, t) : i.style[n] = t); })) : this; @@ -582,7 +582,7 @@ function Sl(n, t) { this.css(e, n[e]); return this; } -C.css = Sl; +S.css = Sl; function Kr(n, t) { try { return n(t); @@ -592,11 +592,11 @@ function Kr(n, t) { } const kl = /^\s+|\s+$/; function nr(n, t) { - const e = n.dataset[t] || n.dataset[ri(t)]; + const e = n.dataset[t] || n.dataset[oi(t)]; return kl.test(e) ? e : Kr(JSON.parse, e); } function xl(n, t, e) { - e = Kr(JSON.stringify, e), n.dataset[ri(t)] = e; + e = Kr(JSON.stringify, e), n.dataset[oi(t)] = e; } function Tl(n, t) { if (!n) { @@ -608,14 +608,14 @@ function Tl(n, t) { return e; } if (nt(n)) - return arguments.length < 2 ? this[0] && nr(this[0], n) : pt(t) ? this : this.each((e, s) => { + return arguments.length < 2 ? this[0] && nr(this[0], n) : ft(t) ? this : this.each((e, s) => { xl(s, n, t); }); for (const e in n) this.data(e, n[e]); return this; } -C.data = Tl; +S.data = Tl; function qr(n, t) { const e = n.documentElement; return Math.max(n.body[`scroll${t}`], e[`scroll${t}`], n.body[`offset${t}`], e[`offset${t}`], e[`client${t}`]); @@ -623,7 +623,7 @@ function qr(n, t) { X([!0, !1], (n, t) => { X(["Width", "Height"], (e, s) => { const i = `${t ? "outer" : "inner"}${s}`; - C[i] = function(r) { + S[i] = function(r) { if (this[0]) return ke(this[0]) ? t ? this[0][`inner${s}`] : this[0].document.documentElement[`client${s}`] : ce(this[0]) ? qr(this[0], s) : this[0][`${t ? "offset" : "client"}${s}`] + (r && t ? Et(this[0], `margin${e ? "Top" : "Left"}`) + Et(this[0], `margin${e ? "Bottom" : "Right"}`) : 0); }; @@ -631,9 +631,9 @@ X([!0, !1], (n, t) => { }); X(["Width", "Height"], (n, t) => { const e = t.toLowerCase(); - C[e] = function(s) { + S[e] = function(s) { if (!this[0]) - return pt(s) ? void 0 : this; + return ft(s) ? void 0 : this; if (!arguments.length) return ke(this[0]) ? this[0].document.documentElement[`client${t}`] : ce(this[0]) ? qr(this[0], t) : this[0].getBoundingClientRect()[e] - Qi(this[0], !n); const i = parseInt(s, 10); @@ -646,38 +646,38 @@ X(["Width", "Height"], (n, t) => { }; }); const sr = "___cd"; -C.toggle = function(n) { +S.toggle = function(n) { return this.each((t, e) => { if (!Z(e)) return; const s = tr(e); - (pt(n) ? s : n) ? (e.style.display = e[sr] || "", tr(e) && (e.style.display = al(e.tagName))) : s || (e[sr] = Wt(e, "display"), e.style.display = "none"); + (ft(n) ? s : n) ? (e.style.display = e[sr] || "", tr(e) && (e.style.display = al(e.tagName))) : s || (e[sr] = Wt(e, "display"), e.style.display = "none"); }); }; -C.hide = function() { +S.hide = function() { return this.toggle(!1); }; -C.show = function() { +S.show = function() { return this.toggle(!0); }; -const ir = "___ce", ai = ".", li = { focus: "focusin", blur: "focusout" }, Gr = { mouseenter: "mouseover", mouseleave: "mouseout" }, Nl = /^(mouse|pointer|contextmenu|drag|drop|click|dblclick)/i; -function ci(n) { - return Gr[n] || li[n] || n; -} +const ir = "___ce", li = ".", ci = { focus: "focusin", blur: "focusout" }, Gr = { mouseenter: "mouseover", mouseleave: "mouseout" }, Nl = /^(mouse|pointer|contextmenu|drag|drop|click|dblclick)/i; function hi(n) { - const t = n.split(ai); + return Gr[n] || ci[n] || n; +} +function ui(n) { + const t = n.split(li); return [t[0], t.slice(1).sort()]; } -C.trigger = function(n, t) { +S.trigger = function(n, t) { if (nt(n)) { - const [s, i] = hi(n), r = ci(s); + const [s, i] = ui(n), r = hi(s); if (!r) return this; const o = Nl.test(r) ? "MouseEvents" : "HTMLEvents"; - n = Ht.createEvent(o), n.initEvent(r, !0, !0), n.namespace = i.join(ai), n.___ot = s; + n = Ht.createEvent(o), n.initEvent(r, !0, !0), n.namespace = i.join(li), n.___ot = s; } n.___td = t; - const e = n.___ot in li; + const e = n.___ot in ci; return this.each((s, i) => { e && pe(i[n.___ot]) && (i[`___i${n.type}`] = !0, i[n.___ot](), i[`___i${n.type}`] = !1), i.dispatchEvent(n); }); @@ -690,9 +690,9 @@ function El(n, t, e, s, i) { r[t] = r[t] || [], r[t].push([e, s, i]), n.addEventListener(t, i); } function Jr(n, t) { - return !t || !ni.call(t, (e) => n.indexOf(e) < 0); + return !t || !si.call(t, (e) => n.indexOf(e) < 0); } -function Nn(n, t, e, s, i) { +function En(n, t, e, s, i) { const r = Yr(n); if (t) r[t] && (r[t] = r[t].filter(([o, a, l]) => { @@ -702,18 +702,18 @@ function Nn(n, t, e, s, i) { })); else for (t in r) - Nn(n, t, e, s, i); + En(n, t, e, s, i); } -C.off = function(n, t, e) { - if (pt(n)) +S.off = function(n, t, e) { + if (ft(n)) this.each((s, i) => { - !Z(i) && !ce(i) && !ke(i) || Nn(i); + !Z(i) && !ce(i) && !ke(i) || En(i); }); else if (nt(n)) - pe(t) && (e = t, t = ""), X(Jn(n), (s, i) => { - const [r, o] = hi(i), a = ci(r); + pe(t) && (e = t, t = ""), X(Zn(n), (s, i) => { + const [r, o] = ui(i), a = hi(r); this.each((l, c) => { - !Z(c) && !ce(c) && !ke(c) || Nn(c, a, o, t, e); + !Z(c) && !ce(c) && !ke(c) || En(c, a, o, t, e); }); }); else @@ -721,13 +721,13 @@ C.off = function(n, t, e) { this.off(s, n[s]); return this; }; -C.remove = function(n) { +S.remove = function(n) { return ee(this, n).detach().off(), this; }; -C.replaceWith = function(n) { +S.replaceWith = function(n) { return this.before(n).remove(); }; -C.replaceAll = function(n) { +S.replaceAll = function(n) { return d(n).replaceWith(this), this; }; function $l(n, t, e, s, i) { @@ -736,15 +736,15 @@ function $l(n, t, e, s, i) { this.on(r, t, e, n[r], i); return this; } - return nt(t) || (pt(t) || Ue(t) ? t = "" : pt(e) ? (e = t, t = "") : (s = e, e = t, t = "")), pe(s) || (s = e, e = void 0), s ? (X(Jn(n), (r, o) => { - const [a, l] = hi(o), c = ci(a), u = a in Gr, h = a in li; - c && this.each((g, f) => { + return nt(t) || (ft(t) || Ue(t) ? t = "" : ft(e) ? (e = t, t = "") : (s = e, e = t, t = "")), pe(s) || (s = e, e = void 0), s ? (X(Zn(n), (r, o) => { + const [a, l] = ui(o), c = hi(a), u = a in Gr, h = a in ci; + c && this.each((p, f) => { if (!Z(f) && !ce(f) && !ke(f)) return; const m = function(_) { if (_.target[`___i${_.type}`]) return _.stopImmediatePropagation(); - if (_.namespace && !Jr(l, _.namespace.split(ai)) || !t && (h && (_.target !== f || _.___ot === c) || u && _.relatedTarget && f.contains(_.relatedTarget))) + if (_.namespace && !Jr(l, _.namespace.split(li)) || !t && (h && (_.target !== f || _.___ot === c) || u && _.relatedTarget && f.contains(_.relatedTarget))) return; let y = f; if (t) { @@ -771,32 +771,32 @@ function $l(n, t, e, s, i) { } }); const v = s.call(y, _, _.___td); - i && Nn(f, c, l, t, m), v === !1 && (_.preventDefault(), _.stopPropagation()); + i && En(f, c, l, t, m), v === !1 && (_.preventDefault(), _.stopPropagation()); }; m.guid = s.guid = s.guid || d.guid++, El(f, c, l, t, m); }); }), this) : this; } -C.on = $l; +S.on = $l; function Al(n, t, e, s) { return this.on(n, t, e, s, !0); } -C.one = Al; +S.one = Al; const Ml = /\r?\n/g; function Il(n, t) { return `&${encodeURIComponent(n)}=${encodeURIComponent(t.replace(Ml, `\r `))}`; } const Pl = /file|reset|submit|button|image/i, Zr = /radio|checkbox/i; -C.serialize = function() { +S.serialize = function() { let n = ""; return this.each((t, e) => { X(e.elements || [e], (s, i) => { if (i.disabled || !i.name || i.tagName === "FIELDSET" || Pl.test(i.type) || Zr.test(i.type) && !i.checked) return; const r = Br(i); - if (!pt(r)) { - const o = Gn(r) ? r : [r]; + if (!ft(r)) { + const o = Yn(r) ? r : [r]; X(o, (a, l) => { n += Il(i.name, l); }); @@ -849,32 +849,32 @@ function K(n, ...t) { } return n; } -var ui = /* @__PURE__ */ ((n) => (n[n.B = 1] = "B", n[n.KB = 1024] = "KB", n[n.MB = 1048576] = "MB", n[n.GB = 1073741824] = "GB", n[n.TB = 1099511627776] = "TB", n))(ui || {}); +var di = /* @__PURE__ */ ((n) => (n[n.B = 1] = "B", n[n.KB = 1024] = "KB", n[n.MB = 1048576] = "MB", n[n.GB = 1073741824] = "GB", n[n.TB = 1099511627776] = "TB", n))(di || {}); function Pt(n, t = 2, e) { - return Number.isNaN(n) ? "?KB" : (e || (n < 1024 ? e = "B" : n < 1048576 ? e = "KB" : n < 1073741824 ? e = "MB" : n < 1099511627776 ? e = "GB" : e = "TB"), (n / ui[e]).toFixed(t) + e); + return Number.isNaN(n) ? "?KB" : (e || (n < 1024 ? e = "B" : n < 1048576 ? e = "KB" : n < 1073741824 ? e = "MB" : n < 1099511627776 ? e = "GB" : e = "TB"), (n / di[e]).toFixed(t) + e); } -const fn = (n) => { +const pn = (n) => { const t = /^[0-9]*(B|KB|MB|GB|TB)$/; n = n.toUpperCase(); const e = n.match(t); if (!e) return 0; const s = e[1]; - return n = n.replace(s, ""), Number.parseInt(n, 10) * ui[s]; + return n = n.replace(s, ""), Number.parseInt(n, 10) * di[s]; }; -let di = (document.documentElement.getAttribute("lang") || "zh_cn").toLowerCase().replace("-", "_"), Ft; +let fi = (document.documentElement.getAttribute("lang") || "zh_cn").toLowerCase().replace("-", "_"), Ft; function Dl() { - return di; + return fi; } function Ll(n) { - di = n.toLowerCase().replace("-", "_"); + fi = n.toLowerCase().replace("-", "_"); } function Qr(n, t) { Ft || (Ft = {}), typeof n == "string" && (n = { [n]: t ?? {} }), d.extend(!0, Ft, n); } function H(n, t, e, s, i, r) { Array.isArray(n) ? Ft && n.unshift(Ft) : n = Ft ? [Ft, n] : [n], typeof e == "string" && (r = i, i = s, s = e, e = void 0); - const o = i || di; + const o = i || fi; let a; for (const l of n) { if (!l) @@ -1021,7 +1021,7 @@ class to { timeout: c, dataFilter: u, beforeSend: h, - success: g, + success: p, error: f, complete: m, ..._ @@ -1034,7 +1034,7 @@ class to { const v = _.headers || {}; rr(v, "X-Requested-With", "XMLHttpRequest"), r && rr(v, "Content-Type", r), _.headers = v, _.signal && _.signal.addEventListener("abort", () => { this.abort(); - }), g && this.success(g), f && this.fail(f), m && this.complete(m), _.signal = this._controller.signal, this.url = t, this.request = _; + }), p && this.success(p), f && this.fail(f), m && this.complete(m), _.signal = this._controller.signal, this.url = t, this.request = _; } _emit(t, ...e) { this._callbacks[t].forEach((s) => { @@ -1055,16 +1055,16 @@ class to { a = await fetch(this.url, this.request), this.response = a; const { statusText: h } = a; if (a.ok) { - const g = (u = a.headers.get("Content-Disposition")) == null ? void 0 : u.startsWith("attachment"), f = g ? "blob" : e || Fl(a.headers.get("Content-Type"), s); - g || f === "blob" || f === "file" ? c = await a.blob() : f === "json" ? typeof o == "function" ? (c = await a.text(), c = o(c)) : c = await a.json() : c = await a.text(), this.data = c; + const p = (u = a.headers.get("Content-Disposition")) == null ? void 0 : u.startsWith("attachment"), f = p ? "blob" : e || Fl(a.headers.get("Content-Type"), s); + p || f === "blob" || f === "file" ? c = await a.blob() : f === "json" ? typeof o == "function" ? (c = await a.text(), c = o(c)) : c = await a.json() : c = await a.text(), this.data = c; const m = (i == null ? void 0 : i(c, f)) ?? c; this._emit("success", m, h, a); } else throw this.data = await a.text(), new Error(h); } catch (h) { l = h; - let g = !1; - l.name === "AbortError" && (this._abortError ? l = this._abortError : g = !0), this.error = l, g || this._emit("error", l, a == null ? void 0 : a.statusText, l.message); + let p = !1; + l.name === "AbortError" && (this._abortError ? l = this._abortError : p = !0), this.error = l, p || this._emit("error", l, a == null ? void 0 : a.statusText, l.message); } if (this._timeoutID && clearTimeout(this._timeoutID), this._emit("complete", a, a == null ? void 0 : a.statusText), l && r) throw l; @@ -1100,7 +1100,7 @@ d.fn.load = function(n, t, e) { i && (r = d(r).find(i).html()), d(this).html(r), e == null || e.call(this, r, o, a); }, "html"), this; }; -async function fi(n, t = [], e) { +async function pi(n, t = [], e) { const s = { throws: !0, dataType: "json" }; if (typeof n == "string") s.url = n; @@ -1114,39 +1114,46 @@ async function fi(n, t = [], e) { const i = new to(s), [r] = await i.send(); return r; } -function Lu(n) { +function Du(n) { return !!(n && (typeof n == "string" || typeof n == "object" && n.url || typeof n == "function")); } -d.fetch = fi; -function dt() { +d.fetch = pi; +function ut() { return d.guid++; } -function Ms(n, t) { +function Ps(n, t) { if (n === t) return !1; - if (n && t && typeof n == "object" && typeof t == "object") { - const e = Array.isArray(n), s = Array.isArray(t); + if (n && t) { + const e = typeof n, s = typeof t; if (e !== s) return !0; - if (e && s) { - if (n.length !== t.length) + if (e === "object" && s === "object") { + const i = Array.isArray(n), r = Array.isArray(t); + if (i !== r) return !0; - for (let o = 0; o < n.length; o++) - if (Ms(n[o], t[o])) + if (i && r) { + if (n.length !== t.length) + return !0; + for (let l = 0; l < n.length; l++) + if (Ps(n[l], t[l])) + return !0; + return !0; + } + const o = Object.keys(n), a = Object.keys(t); + if (o.length !== a.length) + return !0; + for (const l of o) + if (Ps(n[l], t[l])) return !0; return !0; } - const i = Object.keys(n), r = Object.keys(t); - if (i.length !== r.length) - return !0; - for (const o of i) - if (Ms(n[o], t[o])) - return !0; - return !0; + if (e === "function" && s === "function") + return n.toString() !== t.toString(); } return !0; } -class En { +class $n { /** * Creates a new Computed instance. * @param compute The function that computes the value. @@ -1183,7 +1190,7 @@ class En { compute(t) { t !== void 0 && (this._dependencies = t), t = this._dependencies, typeof t == "function" && (t = t()); const e = this._lastDependencies; - return (!e || t.some((s, i) => Ms(s instanceof En ? s.value : s, e[i]))) && (this._value = this._compute(), this._lastDependencies = t.map((s) => s instanceof En ? s.cache : s)), this._value; + return (!e || t.some((s, i) => Ps(s instanceof $n ? s.value : s, e[i]))) && (this._value = this._compute(), this._lastDependencies = t.map((s) => s instanceof $n ? s.cache : s)), this._value; } } function eo(...n) { @@ -1226,14 +1233,14 @@ d.fn.data = function(...n) { d.fn.removeData = function(n = null) { return this.each((t, e) => no(e, n)); }; -function $n(n, ...t) { +function An(n, ...t) { return n.includes("RAWJS") && (n = n.split('"RAWJS<').join("").split('>RAWJS"').join("").split("").join('"').split("").join(` `)), new Function(`return ${n}`)(...t); } -function zu(n, ...t) { - return n.includes("RAWJS") ? $n(n, ...t) : JSON.parse(n); +function Lu(n, ...t) { + return n.includes("RAWJS") ? An(n, ...t) : JSON.parse(n); } -function An(n, t) { +function Mn(n, t) { const e = d(n)[0]; if (!e) return; @@ -1243,14 +1250,14 @@ function An(n, t) { }, l = Array.isArray(r) ? new Set(r) : void 0; return Array.from(e.attributes).reduce((c, u) => { let { name: h } = u; - const { value: g } = u; - let f = g; + const { value: p } = u; + let f = p; if (h.startsWith(s)) { if (h = h.slice(s.length).replace(/-([a-z])/g, (m) => m[1].toUpperCase()), i) - f = i(h, g); + f = i(h, p); else try { - r && (!l || l.has(h)) || r === void 0 && g.includes("RAWJS") ? f = $n(g, ...a) : o && (f = JSON.parse(g)); + r && (!l || l.has(h)) || r === void 0 && p.includes("RAWJS") ? f = An(p, ...a) : o && (f = JSON.parse(p)); } catch { } c[h] = f; @@ -1269,10 +1276,10 @@ function Hl(...n) { var e; const t = n.length; if (!t) - return An(this); + return Mn(this); if (t === 1) { const [s] = n; - return typeof s == "string" ? (e = An(this)) == null ? void 0 : e[s] : (d.isPlainObject(s) && or(this, s), this); + return typeof s == "string" ? (e = Mn(this)) == null ? void 0 : e[s] : (d.isPlainObject(s) && or(this, s), this); } return or(this, { [n[0]]: n[1] }), this; } @@ -1294,12 +1301,12 @@ d.Event || (d.Event = (n, t) => { }); return i.namespace = s.join("."), i.___ot = e, i.___td = t, i; }); -const Mn = (n, t) => new Promise((e) => { +const In = (n, t) => new Promise((e) => { const s = window.setTimeout(e, n); t && t(s); }), Wl = {}; d.share = Wl; -var Xn, W, io, St, oe, ar, ro, Is, pi, Ps, Rs, Ke = {}, oo = [], jl = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, Qn = Array.isArray; +var Qn, W, io, Ct, oe, ar, ro, Rs, gi, Ds, Ls, Ke = {}, oo = [], jl = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, ts = Array.isArray; function Yt(n, t) { for (var e in t) n[e] = t[e]; @@ -1309,16 +1316,16 @@ function ao(n) { var t = n.parentNode; t && t.removeChild(n); } -function yt(n, t, e) { +function _t(n, t, e) { var s, i, r, o = {}; for (r in t) r == "key" ? s = t[r] : r == "ref" ? i = t[r] : o[r] = t[r]; - if (arguments.length > 2 && (o.children = arguments.length > 3 ? Xn.call(arguments, 2) : e), typeof n == "function" && n.defaultProps != null) + if (arguments.length > 2 && (o.children = arguments.length > 3 ? Qn.call(arguments, 2) : e), typeof n == "function" && n.defaultProps != null) for (r in n.defaultProps) o[r] === void 0 && (o[r] = n.defaultProps[r]); - return _n(n, o, s, i, null); + return yn(n, o, s, i, null); } -function _n(n, t, e, s, i) { +function yn(n, t, e, s, i) { var r = { type: n, props: t, key: e, ref: s, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, constructor: void 0, __v: i ?? ++io, __i: -1, __u: 0 }; return i == null && W.vnode != null && W.vnode(r), r; } @@ -1351,27 +1358,27 @@ function lo(n) { } } function lr(n) { - (!n.__d && (n.__d = !0) && oe.push(n) && !In.__r++ || ar !== W.debounceRendering) && ((ar = W.debounceRendering) || ro)(In); + (!n.__d && (n.__d = !0) && oe.push(n) && !Pn.__r++ || ar !== W.debounceRendering) && ((ar = W.debounceRendering) || ro)(Pn); } -function In() { +function Pn() { var n, t, e, s, i, r, o, a; - for (oe.sort(Is); n = oe.shift(); ) - n.__d && (t = oe.length, s = void 0, r = (i = (e = n).__v).__e, o = [], a = [], e.__P && ((s = Yt({}, i)).__v = i.__v + 1, W.vnode && W.vnode(s), gi(e.__P, s, i, e.__n, e.__P.namespaceURI, 32 & i.__u ? [r] : null, o, r ?? he(i), !!(32 & i.__u), a), s.__v = i.__v, s.__.__k[s.__i] = s, uo(o, s, a), s.__e != r && lo(s)), oe.length > t && oe.sort(Is)); - In.__r = 0; + for (oe.sort(Rs); n = oe.shift(); ) + n.__d && (t = oe.length, s = void 0, r = (i = (e = n).__v).__e, o = [], a = [], e.__P && ((s = Yt({}, i)).__v = i.__v + 1, W.vnode && W.vnode(s), mi(e.__P, s, i, e.__n, e.__P.namespaceURI, 32 & i.__u ? [r] : null, o, r ?? he(i), !!(32 & i.__u), a), s.__v = i.__v, s.__.__k[s.__i] = s, uo(o, s, a), s.__e != r && lo(s)), oe.length > t && oe.sort(Rs)); + Pn.__r = 0; } function co(n, t, e, s, i, r, o, a, l, c, u) { - var h, g, f, m, _, y = s && s.__k || oo, v = t.length; + var h, p, f, m, _, y = s && s.__k || oo, v = t.length; for (e.__d = l, Bl(e, t, y), l = e.__d, h = 0; h < v; h++) - (f = e.__k[h]) != null && typeof f != "boolean" && typeof f != "function" && (g = f.__i === -1 ? Ke : y[f.__i] || Ke, f.__i = h, gi(n, f, g, i, r, o, a, l, c, u), m = f.__e, f.ref && g.ref != f.ref && (g.ref && mi(g.ref, null, f), u.push(f.ref, f.__c || m, f)), _ == null && m != null && (_ = m), 65536 & f.__u || g.__k === f.__k ? (l && typeof f.type == "string" && !n.contains(l) && (l = he(g)), l = ho(f, l, n)) : typeof f.type == "function" && f.__d !== void 0 ? l = f.__d : m && (l = m.nextSibling), f.__d = void 0, f.__u &= -196609); + (f = e.__k[h]) != null && typeof f != "boolean" && typeof f != "function" && (p = f.__i === -1 ? Ke : y[f.__i] || Ke, f.__i = h, mi(n, f, p, i, r, o, a, l, c, u), m = f.__e, f.ref && p.ref != f.ref && (p.ref && _i(p.ref, null, f), u.push(f.ref, f.__c || m, f)), _ == null && m != null && (_ = m), 65536 & f.__u || p.__k === f.__k ? (l && typeof f.type == "string" && !n.contains(l) && (l = he(p)), l = ho(f, l, n)) : typeof f.type == "function" && f.__d !== void 0 ? l = f.__d : m && (l = m.nextSibling), f.__d = void 0, f.__u &= -196609); e.__d = l, e.__e = _; } function Bl(n, t, e) { var s, i, r, o, a, l = t.length, c = e.length, u = c, h = 0; for (n.__k = [], s = 0; s < l; s++) - o = s + h, (i = n.__k[s] = (i = t[s]) == null || typeof i == "boolean" || typeof i == "function" ? null : typeof i == "string" || typeof i == "number" || typeof i == "bigint" || i.constructor == String ? _n(null, i, null, null, null) : Qn(i) ? _n(Ee, { children: i }, null, null, null) : i.constructor === void 0 && i.__b > 0 ? _n(i.type, i.props, i.key, i.ref ? i.ref : null, i.__v) : i) != null ? (i.__ = n, i.__b = n.__b + 1, a = Vl(i, e, o, u), i.__i = a, r = null, a !== -1 && (u--, (r = e[a]) && (r.__u |= 131072)), r == null || r.__v === null ? (a == -1 && h--, typeof i.type != "function" && (i.__u |= 65536)) : a !== o && (a == o - 1 ? h = a - o : a == o + 1 ? h++ : a > o ? u > l - o ? h += a - o : h-- : a < o && h++, a !== s + h && (i.__u |= 65536))) : (r = e[o]) && r.key == null && r.__e && !(131072 & r.__u) && (r.__e == n.__d && (n.__d = he(r)), Ds(r, r, !1), e[o] = null, u--); + o = s + h, (i = n.__k[s] = (i = t[s]) == null || typeof i == "boolean" || typeof i == "function" ? null : typeof i == "string" || typeof i == "number" || typeof i == "bigint" || i.constructor == String ? yn(null, i, null, null, null) : ts(i) ? yn(Ee, { children: i }, null, null, null) : i.constructor === void 0 && i.__b > 0 ? yn(i.type, i.props, i.key, i.ref ? i.ref : null, i.__v) : i) != null ? (i.__ = n, i.__b = n.__b + 1, a = Vl(i, e, o, u), i.__i = a, r = null, a !== -1 && (u--, (r = e[a]) && (r.__u |= 131072)), r == null || r.__v === null ? (a == -1 && h--, typeof i.type != "function" && (i.__u |= 65536)) : a !== o && (a == o - 1 ? h = a - o : a == o + 1 ? h++ : a > o ? u > l - o ? h += a - o : h-- : a < o && h++, a !== s + h && (i.__u |= 65536))) : (r = e[o]) && r.key == null && r.__e && !(131072 & r.__u) && (r.__e == n.__d && (n.__d = he(r)), zs(r, r, !1), e[o] = null, u--); if (u) for (s = 0; s < c; s++) - (r = e[s]) != null && !(131072 & r.__u) && (r.__e == n.__d && (n.__d = he(r)), Ds(r, r)); + (r = e[s]) != null && !(131072 & r.__u) && (r.__e == n.__d && (n.__d = he(r)), zs(r, r)); } function ho(n, t, e) { var s, i; @@ -1386,9 +1393,9 @@ function ho(n, t, e) { while (t != null && t.nodeType === 8); return t; } -function Pn(n, t) { - return t = t || [], n == null || typeof n == "boolean" || (Qn(n) ? n.some(function(e) { - Pn(e, t); +function Rn(n, t) { + return t = t || [], n == null || typeof n == "boolean" || (ts(n) ? n.some(function(e) { + Rn(e, t); }) : t.push(n)), t; } function Vl(n, t, e, s) { @@ -1413,7 +1420,7 @@ function Vl(n, t, e, s) { function cr(n, t, e) { t[0] === "-" ? n.setProperty(t, e ?? "") : n[t] = e == null ? "" : typeof e != "number" || jl.test(t) ? e : e + "px"; } -function pn(n, t, e, s, i) { +function gn(n, t, e, s, i) { var r; t: if (t === "style") @@ -1428,7 +1435,7 @@ function pn(n, t, e, s, i) { s && e[t] === s[t] || cr(n.style, t, e[t]); } else if (t[0] === "o" && t[1] === "n") - r = t !== (t = t.replace(/(PointerCapture)$|Capture$/i, "$1")), t = t.toLowerCase() in n || t === "onFocusOut" || t === "onFocusIn" ? t.toLowerCase().slice(2) : t.slice(2), n.l || (n.l = {}), n.l[t + r] = e, e ? s ? e.u = s.u : (e.u = pi, n.addEventListener(t, r ? Rs : Ps, r)) : n.removeEventListener(t, r ? Rs : Ps, r); + r = t !== (t = t.replace(/(PointerCapture)$|Capture$/i, "$1")), t = t.toLowerCase() in n || t === "onFocusOut" || t === "onFocusIn" ? t.toLowerCase().slice(2) : t.slice(2), n.l || (n.l = {}), n.l[t + r] = e, e ? s ? e.u = s.u : (e.u = gi, n.addEventListener(t, r ? Ls : Ds, r)) : n.removeEventListener(t, r ? Ls : Ds, r); else { if (i == "http://www.w3.org/2000/svg") t = t.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s"); @@ -1446,25 +1453,25 @@ function hr(n) { if (this.l) { var e = this.l[t.type + n]; if (t.t == null) - t.t = pi++; + t.t = gi++; else if (t.t < e.u) return; return e(W.event ? W.event(t) : t); } }; } -function gi(n, t, e, s, i, r, o, a, l, c) { - var u, h, g, f, m, _, y, v, w, b, S, T, E, A, $, P, k = t.type; +function mi(n, t, e, s, i, r, o, a, l, c) { + var u, h, p, f, m, _, y, v, w, b, C, T, E, A, $, P, k = t.type; if (t.constructor !== void 0) return null; 128 & e.__u && (l = !!(32 & e.__u), r = [a = t.__e = e.__e]), (u = W.__b) && u(t); t: if (typeof k == "function") try { - if (v = t.props, w = "prototype" in k && k.prototype.render, b = (u = k.contextType) && s[u.__c], S = u ? b ? b.props.value : u.__ : s, e.__c ? y = (h = t.__c = e.__c).__ = h.__E : (w ? t.__c = h = new k(v, S) : (t.__c = h = new B(v, S), h.constructor = k, h.render = Kl), b && b.sub(h), h.props = v, h.state || (h.state = {}), h.context = S, h.__n = s, g = h.__d = !0, h.__h = [], h._sb = []), w && h.__s == null && (h.__s = h.state), w && k.getDerivedStateFromProps != null && (h.__s == h.state && (h.__s = Yt({}, h.__s)), Yt(h.__s, k.getDerivedStateFromProps(v, h.__s))), f = h.props, m = h.state, h.__v = t, g) + if (v = t.props, w = "prototype" in k && k.prototype.render, b = (u = k.contextType) && s[u.__c], C = u ? b ? b.props.value : u.__ : s, e.__c ? y = (h = t.__c = e.__c).__ = h.__E : (w ? t.__c = h = new k(v, C) : (t.__c = h = new B(v, C), h.constructor = k, h.render = Kl), b && b.sub(h), h.props = v, h.state || (h.state = {}), h.context = C, h.__n = s, p = h.__d = !0, h.__h = [], h._sb = []), w && h.__s == null && (h.__s = h.state), w && k.getDerivedStateFromProps != null && (h.__s == h.state && (h.__s = Yt({}, h.__s)), Yt(h.__s, k.getDerivedStateFromProps(v, h.__s))), f = h.props, m = h.state, h.__v = t, p) w && k.getDerivedStateFromProps == null && h.componentWillMount != null && h.componentWillMount(), w && h.componentDidMount != null && h.__h.push(h.componentDidMount); else { - if (w && k.getDerivedStateFromProps == null && v !== f && h.componentWillReceiveProps != null && h.componentWillReceiveProps(v, S), !h.__e && (h.shouldComponentUpdate != null && h.shouldComponentUpdate(v, h.__s, S) === !1 || t.__v === e.__v)) { + if (w && k.getDerivedStateFromProps == null && v !== f && h.componentWillReceiveProps != null && h.componentWillReceiveProps(v, C), !h.__e && (h.shouldComponentUpdate != null && h.shouldComponentUpdate(v, h.__s, C) === !1 || t.__v === e.__v)) { for (t.__v !== e.__v && (h.props = v, h.state = h.__s, h.__d = !1), t.__e = e.__e, t.__k = e.__k, t.__k.forEach(function(M) { M && (M.__ = t); }), T = 0; T < h._sb.length; T++) @@ -1472,11 +1479,11 @@ function gi(n, t, e, s, i, r, o, a, l, c) { h._sb = [], h.__h.length && o.push(h); break t; } - h.componentWillUpdate != null && h.componentWillUpdate(v, h.__s, S), w && h.componentDidUpdate != null && h.__h.push(function() { + h.componentWillUpdate != null && h.componentWillUpdate(v, h.__s, C), w && h.componentDidUpdate != null && h.__h.push(function() { h.componentDidUpdate(f, m, _); }); } - if (h.context = S, h.props = v, h.__P = n, h.__e = !1, E = W.__r, A = 0, w) { + if (h.context = C, h.props = v, h.__P = n, h.__e = !1, E = W.__r, A = 0, w) { for (h.state = h.__s, h.__d = !1, E && E(t), u = h.render(h.props, h.state, h.context), $ = 0; $ < h._sb.length; $++) h.__h.push(h._sb[$]); h._sb = []; @@ -1484,7 +1491,7 @@ function gi(n, t, e, s, i, r, o, a, l, c) { do h.__d = !1, E && E(t), u = h.render(h.props, h.state, h.context), h.state = h.__s; while (h.__d && ++A < 25); - h.state = h.__s, h.getChildContext != null && (s = Yt(Yt({}, s), h.getChildContext())), w && !g && h.getSnapshotBeforeUpdate != null && (_ = h.getSnapshotBeforeUpdate(f, m)), co(n, Qn(P = u != null && u.type === Ee && u.key == null ? u.props.children : u) ? P : [P], t, e, s, i, r, o, a, l, c), h.base = t.__e, t.__u &= -161, h.__h.length && o.push(h), y && (h.__E = h.__ = null); + h.state = h.__s, h.getChildContext != null && (s = Yt(Yt({}, s), h.getChildContext())), w && !p && h.getSnapshotBeforeUpdate != null && (_ = h.getSnapshotBeforeUpdate(f, m)), co(n, ts(P = u != null && u.type === Ee && u.key == null ? u.props.children : u) ? P : [P], t, e, s, i, r, o, a, l, c), h.base = t.__e, t.__u &= -161, h.__h.length && o.push(h), y && (h.__E = h.__ = null); } catch (M) { t.__v = null, l || r != null ? (t.__e = a, t.__u |= l ? 160 : 32, r[r.indexOf(a)] = null) : (t.__e = e.__e, t.__k = e.__k), W.__e(M, t, e); } @@ -1495,7 +1502,7 @@ function gi(n, t, e, s, i, r, o, a, l, c) { function uo(n, t, e) { t.__d = void 0; for (var s = 0; s < e.length; s++) - mi(e[s], e[++s], e[++s]); + _i(e[s], e[++s], e[++s]); W.__c && W.__c(t, n), n.some(function(i) { try { n = i.__h, i.__h = [], n.some(function(r) { @@ -1507,7 +1514,7 @@ function uo(n, t, e) { }); } function Ul(n, t, e, s, i, r, o, a, l) { - var c, u, h, g, f, m, _, y = e.props, v = t.props, w = t.type; + var c, u, h, p, f, m, _, y = e.props, v = t.props, w = t.type; if (w === "svg" ? i = "http://www.w3.org/2000/svg" : w === "math" ? i = "http://www.w3.org/1998/Math/MathML" : i || (i = "http://www.w3.org/1999/xhtml"), r != null) { for (c = 0; c < r.length; c++) if ((f = r[c]) && "setAttribute" in f == !!w && (w ? f.localName === w : f.nodeType === 3)) { @@ -1523,7 +1530,7 @@ function Ul(n, t, e, s, i, r, o, a, l) { if (w === null) y === v || a && n.data === v || (n.data = v); else { - if (r = r && Xn.call(n.childNodes), y = e.props || Ke, !a && r != null) + if (r = r && Qn.call(n.childNodes), y = e.props || Ke, !a && r != null) for (y = {}, c = 0; c < n.attributes.length; c++) y[(f = n.attributes[c]).name] = f.value; for (c in y) @@ -1533,30 +1540,30 @@ function Ul(n, t, e, s, i, r, o, a, l) { else if (c !== "key" && !(c in v)) { if (c == "value" && "defaultValue" in v || c == "checked" && "defaultChecked" in v) continue; - pn(n, c, null, f, i); + gn(n, c, null, f, i); } } for (c in v) - f = v[c], c == "children" ? g = f : c == "dangerouslySetInnerHTML" ? u = f : c == "value" ? m = f : c == "checked" ? _ = f : c === "key" || a && typeof f != "function" || y[c] === f || pn(n, c, f, y[c], i); + f = v[c], c == "children" ? p = f : c == "dangerouslySetInnerHTML" ? u = f : c == "value" ? m = f : c == "checked" ? _ = f : c === "key" || a && typeof f != "function" || y[c] === f || gn(n, c, f, y[c], i); if (u) a || h && (u.__html === h.__html || u.__html === n.innerHTML) || (n.innerHTML = u.__html), t.__k = []; - else if (h && (n.innerHTML = ""), co(n, Qn(g) ? g : [g], t, e, s, w === "foreignObject" ? "http://www.w3.org/1999/xhtml" : i, r, o, r ? r[0] : e.__k && he(e, 0), a, l), r != null) + else if (h && (n.innerHTML = ""), co(n, ts(p) ? p : [p], t, e, s, w === "foreignObject" ? "http://www.w3.org/1999/xhtml" : i, r, o, r ? r[0] : e.__k && he(e, 0), a, l), r != null) for (c = r.length; c--; ) r[c] != null && ao(r[c]); - a || (c = "value", m !== void 0 && (m !== n[c] || w === "progress" && !m || w === "option" && m !== y[c]) && pn(n, c, m, y[c], i), c = "checked", _ !== void 0 && _ !== n[c] && pn(n, c, _, y[c], i)); + a || (c = "value", m !== void 0 && (m !== n[c] || w === "progress" && !m || w === "option" && m !== y[c]) && gn(n, c, m, y[c], i), c = "checked", _ !== void 0 && _ !== n[c] && gn(n, c, _, y[c], i)); } return n; } -function mi(n, t, e) { +function _i(n, t, e) { try { typeof n == "function" ? n(t) : n.current = t; } catch (s) { W.__e(s, e); } } -function Ds(n, t, e) { +function zs(n, t, e) { var s, i; - if (W.unmount && W.unmount(n), (s = n.ref) && (s.current && s.current !== n.__e || mi(s, null, t)), (s = n.__c) != null) { + if (W.unmount && W.unmount(n), (s = n.ref) && (s.current && s.current !== n.__e || _i(s, null, t)), (s = n.__c) != null) { if (s.componentWillUnmount) try { s.componentWillUnmount(); @@ -1567,7 +1574,7 @@ function Ds(n, t, e) { } if (s = n.__k) for (i = 0; i < s.length; i++) - s[i] && Ds(s[i], t, e || typeof n.type != "function"); + s[i] && zs(s[i], t, e || typeof n.type != "function"); e || n.__e == null || ao(n.__e), n.__c = n.__ = n.__e = n.__d = void 0; } function Kl(n, t, e) { @@ -1575,9 +1582,9 @@ function Kl(n, t, e) { } function Ce(n, t, e) { var s, i, r, o; - W.__ && W.__(n, t), i = (s = typeof e == "function") ? null : e && e.__k || t.__k, r = [], o = [], gi(t, n = (!s && e || t).__k = yt(Ee, null, [n]), i || Ke, Ke, t.namespaceURI, !s && e ? [e] : i ? null : t.firstChild ? Xn.call(t.childNodes) : null, r, !s && e ? e : i ? i.__e : t.firstChild, s, o), uo(r, n, o); + W.__ && W.__(n, t), i = (s = typeof e == "function") ? null : e && e.__k || t.__k, r = [], o = [], mi(t, n = (!s && e || t).__k = _t(Ee, null, [n]), i || Ke, Ke, t.namespaceURI, !s && e ? [e] : i ? null : t.firstChild ? Qn.call(t.childNodes) : null, r, !s && e ? e : i ? i.__e : t.firstChild, s, o), uo(r, n, o); } -Xn = oo.slice, W = { __e: function(n, t, e, s) { +Qn = oo.slice, W = { __e: function(n, t, e, s) { for (var i, r, o; t = t.__; ) if ((i = t.__c) && !i.__) try { @@ -1587,22 +1594,22 @@ Xn = oo.slice, W = { __e: function(n, t, e, s) { n = a; } throw n; -} }, io = 0, St = function(n) { +} }, io = 0, Ct = function(n) { return n != null && n.constructor == null; }, B.prototype.setState = function(n, t) { var e; e = this.__s != null && this.__s !== this.state ? this.__s : this.__s = Yt({}, this.state), typeof n == "function" && (n = n(Yt({}, e), this.props)), n && Yt(e, n), n != null && this.__v && (t && this._sb.push(t), lr(this)); }, B.prototype.forceUpdate = function(n) { this.__v && (this.__e = !0, n && this.__h.push(n), lr(this)); -}, B.prototype.render = Ee, oe = [], ro = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, Is = function(n, t) { +}, B.prototype.render = Ee, oe = [], ro = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, Rs = function(n, t) { return n.__v.__b - t.__v.__b; -}, In.__r = 0, pi = 0, Ps = hr(!1), Rs = hr(!0); +}, Pn.__r = 0, gi = 0, Ds = hr(!1), Ls = hr(!0); function O(n, ...t) { return t.forEach((e) => { !e || typeof e != "object" || Object.keys(e).forEach((s) => { let i = e[s]; const r = n[s]; - i !== r && (r !== void 0 && (s === "className" || s.endsWith("Class") ? i = [r, i] : s === "children" ? i = [...Pn(r), ...Pn(i)] : typeof r == "object" && (s === "style" || s.endsWith("Style") || s === "attrs" || s.endsWith("Attrs") || s === "props") && (i = d.extend(r, i))), n[s] = i); + i !== r && (r !== void 0 && (s === "className" || s.endsWith("Class") ? i = [r, i] : s === "children" ? i = [...Rn(r), ...Rn(i)] : typeof r == "object" && (s === "style" || s.endsWith("Style") || s === "attrs" || s.endsWith("Attrs") || s === "props") && (i = d.extend(r, i))), n[s] = i); }); }), n; } @@ -1646,7 +1653,7 @@ d.fn.disableScroll = function(n = !0) { d.fn.enableScroll = function(n = !0) { return this.disableScroll(!n); }; -function vs(n, t, e) { +function bs(n, t, e) { if (!(e.on || "click").split(" ").includes(t.type)) return; const s = e.selector ? d(t.target).closest(e.selector) : n; @@ -1675,7 +1682,7 @@ function vs(n, t, e) { let c; if (typeof l == "string" ? c = /^[$A-Z_][0-9A-Z_$.]*$/i.test(l) ? Xr(window, l) : a(l) : c = l, typeof c == "function") { const u = [], h = e.params; - e.params = u, typeof h == "string" && h.length ? h[0] === "[" ? u.push(...r(h)) : u.push(...h.split(", ").map((g) => (g = g.trim(), g === "$element" ? n : g === "event" ? t : g === "options" ? e : g.startsWith("$element.") || g.startsWith("event.") || g.startsWith("options.") ? a(g) : r(g)))) : Array.isArray(h) ? u.push(...h) : u.push(h), c(...u); + e.params = u, typeof h == "string" && h.length ? h[0] === "[" ? u.push(...r(h)) : u.push(...h.split(", ").map((p) => (p = p.trim(), p === "$element" ? n : p === "event" ? t : p === "options" ? e : p.startsWith("$element.") || p.startsWith("event.") || p.startsWith("options.") ? a(p) : r(p)))) : Array.isArray(h) ? u.push(...h) : u.push(h), c(...u); } } e.do && a(e.do); @@ -1684,14 +1691,14 @@ function Gl(n) { const t = d(this), e = n.type, s = t.attr("zui-on"); if (s) { const [o, a] = s.split("~").map((l) => l.trim()); - o && a && vs(t, n, d.extend({ + o && a && bs(t, n, d.extend({ on: o - }, a.startsWith("{") ? $n(a) : { do: a })); + }, a.startsWith("{") ? An(a) : { do: a })); } const i = t.attr(`zui-on-${e}`); - i && vs(t, n, d.extend({ + i && bs(t, n, d.extend({ on: e - }, i.startsWith("{") ? $n(i) : { do: i })), t.attr("data-on") && (vs(t, n, An(t, { prefix: "data-", evalValue: ["call", "if", "do"] })), console.warn(`[ZUI] Use [zui-on-${e}] instead of [data-on="${e}"] on element: `, t[0])); + }, i.startsWith("{") ? An(i) : { do: i })), t.attr("data-on") && (bs(t, n, Mn(t, { prefix: "data-", evalValue: ["call", "if", "do"] })), console.warn(`[ZUI] Use [zui-on-${e}] instead of [data-on="${e}"] on element: `, t[0])); } function Yl(n) { d(document).off(".zui.global").on(n.map((t) => `${t}.zui.global`).join(" "), `[zui-on],${n.map((t) => `[zui-on-${t}]`)},[data-on]`, Gl); @@ -1705,7 +1712,7 @@ function po(n) { let t = n.match(/(\d+)(%|px)?/); return t ? [parseInt(t[1]), t[2]] : (t = n.match(/(\d+)\/(\d+)/), t ? [100 * parseInt(t[1]) / parseInt(t[2]), "%"] : [NaN]); } -function yn(n) { +function vn(n) { if (n == null) return null; const [t, e = "px"] = po(n); @@ -1748,7 +1755,7 @@ d.one = jt.one.bind(jt); d.off = jt.off.bind(jt); d.trigger = jt.trigger.bind(jt); var Zl = ["Shift", "Meta", "Alt", "Control"], go = typeof navigator == "object" ? navigator.platform : "", mo = /Mac|iPod|iPhone|iPad/.test(go), Xl = mo ? "Meta" : "Control", Ql = go === "Win32" ? ["Control", "Alt"] : mo ? ["Alt"] : []; -function ws(n, t) { +function Cs(n, t) { return typeof n.getModifierState == "function" && (n.getModifierState(t) || Ql.includes(t) && n.getModifierState("AltGraph")); } function tc(n) { @@ -1768,13 +1775,13 @@ function _o(n, t) { return function(a) { a instanceof KeyboardEvent && (i.forEach(function(l) { var c = l[0], u = l[1], h = r.get(c) || c; - (function(g, f) { - return !(f[1].toUpperCase() !== g.key.toUpperCase() && f[1] !== g.code || f[0].find(function(m) { - return !ws(g, m); + (function(p, f) { + return !(f[1].toUpperCase() !== p.key.toUpperCase() && f[1] !== p.code || f[0].find(function(m) { + return !Cs(p, m); }) || Zl.find(function(m) { - return !f[0].includes(m) && f[1] !== m && ws(g, m); + return !f[0].includes(m) && f[1] !== m && Cs(p, m); })); - })(a, h[0]) ? h.length > 1 ? r.set(c, h.slice(1)) : (r.delete(c), u(a)) : ws(a, a.key) || r.delete(c); + })(a, h[0]) ? h.length > 1 ? r.set(c, h.slice(1)) : (r.delete(c), u(a)) : Cs(a, a.key) || r.delete(c); }), o && clearTimeout(o), o = setTimeout(r.clear.bind(r), s)); }; } @@ -1817,7 +1824,7 @@ function vo(n, t, e) { function wo(n, t) { return d(n).off(`.zui.hotkeys${t ? `.${t}` : ""}`); } -const Fu = ec; +const zu = ec; d.fn.hotkeys = function(n, t) { return vo(this, n, t); }; @@ -1830,7 +1837,7 @@ d.hotkeys = function(n, t) { d.unbindHotkeys = function(n) { wo(window, n); }; -function _i() { +function yi() { return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement; } async function nc(n) { @@ -1849,15 +1856,15 @@ async function nc(n) { e == null || e.call(a, c); } document.zuiBindFullscreenChange || (document.zuiBindFullscreenChange = !0, d(document).on("fullscreenchange.zui webkitfullscreenchange.zui mozfullscreenchange.zui", (c) => { - const u = _i(); + const u = yi(); let h = u; u ? d(u).addClass("is-in-fullscreen") : (h = d(document).find(".is-in-fullscreen")[0] || document, d(h).removeClass("is-in-fullscreen")), d("body").toggleClass("has-in-fullscreen", !!u); - const g = { event: c, target: h, fullscreenElement: u }; - d(h).trigger(u ? "enterFullscreen" : "exitFullscreen", g).trigger("toggleFullscreen", g); + const p = { event: c, target: h, fullscreenElement: u }; + d(h).trigger(u ? "enterFullscreen" : "exitFullscreen", p).trigger("toggleFullscreen", p); })); } async function bo(n) { - const t = _i(); + const t = yi(); return n === !1 && !!t === n ? n : t ? (document.exitFullscreen(), !1) : (await nc(n), !0); } d.fn.fullscreen = function(n) { @@ -1866,7 +1873,7 @@ d.fn.fullscreen = function(n) { ...n }); }; -d.getFullscreenElement = _i; +d.getFullscreenElement = yi; d.toggleFullscreen = bo; function ge(n) { return n.parentNode === document ? !1 : n.parentNode ? ge(n.parentNode) : !0; @@ -1876,24 +1883,24 @@ d.fn.isDetached = function() { const n = this[0]; return !n || ge(n); }; -class mt { +class gt { /** * The component constructor. * * @param options The component initial options. */ constructor(t, e) { - this._inited = !1, this._autoDestory = 0; + this._inited = !1, this._autoDestory = 0, this._destroyed = !1; const { KEY: s, DATA_KEY: i, DEFAULT: r, MULTI_INSTANCE: o, NAME: a, ATTR_KEY: l } = this.constructor; if (!a) throw new Error('[ZUI] The component must have a "NAME" static property.'); const c = d(t); if (c.data(s) && !o) throw new Error("[ZUI] The component has been initialized on element."); - const u = c[0], h = dt(); + const u = c[0], h = ut(); this._gid = h, this._element = u; - const g = c.parent(); - if (g.length && (this._mobs = new MutationObserver((f) => { + const p = c.parent(); + if (p.length && (this._mobs = new MutationObserver((f) => { f.forEach((m) => { m.removedNodes.forEach((_) => { _ === u && (this._autoDestory && clearTimeout(this._autoDestory), this._autoDestory = window.setTimeout(() => { @@ -1901,7 +1908,7 @@ class mt { }, 100)); }); }); - }), this._mobs.observe(g[0], { childList: !0, subtree: !1 })), this._options = { ...r, ...(e == null ? void 0 : e.$optionsFromDataset) !== !1 ? c.dataset() : {} }, this.setOptions(e), this._key = this.options.key ?? `__${h}`, c.data(s, this).attr(i, `${h}`).attr(l, ""), o) { + }), this._mobs.observe(p[0], { childList: !0, subtree: !1 })), this._options = { ...r, ...(e == null ? void 0 : e.$optionsFromDataset) !== !1 ? c.dataset() : {} }, this.setOptions(e), this._key = this.options.key ?? `__${h}`, c.data(s, this).attr(i, `${h}`).attr(l, ""), o) { const f = `${s}:ALL`; let m = c.data(f); m || (m = /* @__PURE__ */ new Map(), c.data(f, m)), m.set(this._key, this); @@ -1928,18 +1935,36 @@ class mt { static get NAMESPACE() { return `.zui.${this.ZUI}`; } + /** + * @deprecated Use ATTR_KEY instead. + */ static get DATA_KEY() { return `data-zui-${this.NAME}`; } + /** + * Component attribute key, like "z-use-menu" + */ static get ATTR_KEY() { return `z-use-${this.NAME}`; } + /** + * The component default selector. + */ static get SELECTOR() { return `[${this.DATA_KEY}]`; } + /** + * Get the component initialized flag. + */ get inited() { return this._inited; } + /** + * Get the component destroyed flag. + */ + get destroyed() { + return this._destroyed; + } /** * Get the component element. */ @@ -1994,8 +2019,8 @@ class mt { * * @param options The component options to override before render. */ - render(t) { - this.setOptions(t); + render(t, e) { + this.setOptions(t, e); } /** * Destroy the component. @@ -2003,7 +2028,7 @@ class mt { destroy() { var o; const { KEY: t, DATA_KEY: e, MULTI_INSTANCE: s, ATTR_KEY: i } = this.constructor, { $element: r } = this; - if (this.emit("destroyed"), (o = this._mobs) == null || o.disconnect(), r.off(this.namespace).removeData(t).removeAttr(i).removeAttr(e), s) { + if (this.emit("destroyed"), this._destroyed = !0, (o = this._mobs) == null || o.disconnect(), r.off(this.namespace).removeData(t).removeAttr(i).removeAttr(e), s) { const a = this.$element.data(`${t}:ALL`); if (a) if (a.delete(this._key), a.size === 0) @@ -2020,7 +2045,7 @@ class mt { * @param options The component options to set. * @returns The component options. */ - setOptions(t) { + setOptions(t, e) { return t && d.extend(this._options, t), this._options; } /** @@ -2176,8 +2201,8 @@ class mt { return this.each((c, u) => { let h = s.get(u); if (h ? o && h.render(o) : h = new s(u, o), a) { - let g = h[a], f = h; - g === void 0 && (f = h.$, g = f[a]), typeof g == "function" ? l = g.call(f, ...r) : l = g; + let p = h[a], f = h; + p === void 0 && (f = h.$, p = f[a]), typeof p == "function" ? l = p.call(f, ...r) : l = p; } }), l !== void 0 ? l : this; } @@ -2187,14 +2212,14 @@ class mt { t = t || this, this.map.set((e ?? t.NAME).toLowerCase(), t); } } -mt.DEFAULT = {}; -mt.MULTI_INSTANCE = !1; -mt.map = /* @__PURE__ */ new Map(); -function yi(n) { - return mt.map.get(n.toLowerCase()); +gt.DEFAULT = {}; +gt.MULTI_INSTANCE = !1; +gt.map = /* @__PURE__ */ new Map(); +function es(n) { + return gt.map.get(n.toLowerCase()); } function sc(n, t, e = {}) { - const s = yi(n); + const s = es(n); if (!s) return null; if (!s.MULTI_INSTANCE) { @@ -2204,11 +2229,11 @@ function sc(n, t, e = {}) { } return new s(t, e); } -function bs(n, t, e = {}) { +function Ss(n, t, e = {}) { requestAnimationFrame(() => sc(n, t, e)); } function ic(n, t) { - mt.register(n, t); + gt.register(n, t); } function rc() { const { zui: n } = window; @@ -2217,9 +2242,9 @@ function rc() { !e.NAME || !e.ZUI || ic(e); }); } -function Ou(n) { +function Fu(n) { var t; - n ? (t = yi(n)) == null || t.defineFn() : (rc(), mt.map.forEach((e) => { + n ? (t = es(n)) == null || t.defineFn() : (rc(), gt.map.forEach((e) => { e.defineFn(); })); } @@ -2232,9 +2257,9 @@ function oc(n, t = {}) { }; if (typeof s == "string") { s = s.trim(); - const o = s.length ? s.split(",").map((c) => c.trim()) : [], a = An(n, { prefix: "zui-create-", evalValue: !0 }), l = Object.keys(a); + const o = s.length ? s.split(",").map((c) => c.trim()) : [], a = Mn(n, { prefix: "zui-create-", evalValue: !0 }), l = Object.keys(a); if (!l.length && o.length === 1) - bs(o[0], n, { + Ss(o[0], n, { ...r, ...e.dataset() }); @@ -2244,7 +2269,7 @@ function oc(n, t = {}) { if (c.has(u)) return; const h = a[u]; - bs(u, n, { + Ss(u, n, { ...r, ...h }), delete a[u], c.add(u); @@ -2254,18 +2279,54 @@ function oc(n, t = {}) { const o = e.dataset(), a = o == null ? void 0 : o.zui; if (!a) return; - console.warn("[ZUI] create component instance with [data-zui] is deprecated, use [zui-create] instead.", { element: n, options: t }), delete o.zui, bs(a, n, { + console.warn("[ZUI] create component instance with [data-zui] is deprecated, use [zui-create] instead.", { element: n, options: t }), delete o.zui, Ss(a, n, { ...r, ...o }); } } +function ac() { + d(document).on("click.zui.toggle pointerenter.zui.toggle", "[data-toggle],[z-toggle]", function(n) { + const t = d(this), e = t.dataset("toggle") || t.attr("z-toggle"); + if (!e) + return; + const s = es(e), i = s == null ? void 0 : s.toggle; + if (!i) + return; + const { trigger: r = "click", skip: o = "[disabled],.disabled", check: a } = i, l = n.type === "pointerenter" ? "hover" : "click"; + if (!r.includes(l) || a && !a.call(s, this, l, n) || o && t.is(o)) + return; + const { onGet: c, onCreate: u, setOptions: h = !0, prevent: p = !0, onToggle: f } = i; + let m = c ? c.call(s, this) : s.get(this); + const _ = t.dataset(); + if (m) + h && m.setOptions(_); + else { + const y = u ? u.call(s, this, n, _) : new s(this, _); + if (!y) + return; + m = y; + } + if (f) { + if (f.call(s, m, n) === !1) + return; + } else { + const { shown: y, show: v, hide: w, toggle: b } = m; + let C; + if (b ? C = b : v && w ? y ? C = w : C = v : v && (C = v), C) + C.call(m); + else + return; + } + p && n.preventDefault(); + }); +} d.fn.zuiInit = function(n) { return this.find("[zui-create],[data-zui]").each(function() { - oc(this, n); + var t; + ((t = n == null ? void 0 : n.beforeCreate) == null ? void 0 : t.call(n, this)) !== !1 && oc(this, n); }), this.find("[zui-init]").each(function() { - const t = d(this); - t.z("zuiInited") || d.runJS(t.z("zuiInited", !0).attr("zui-init"), ["$element", t]); + this.hasAttribute("z-zui-inited") || (this.setAttribute("z-zui-inited", ""), d.runJS(this.getAttribute("zui-init"), ["$element", d(this)])); }), this.find(".hide-before-init").removeClass("invisible hidden opacity-0"), this.find(".scroll-into-view").scrollIntoView(), this.find('[data-on="inited"]').each((t, e) => { const s = d(e); s.zui() || s.trigger("inited"); @@ -2285,7 +2346,7 @@ d.fn.zui = function(n, t) { } }), n === !0 ? r : o; } - const s = yi(n); + const s = es(n); return s ? t === !0 ? s.getAll(e) : s.query(e, t) : d(e).data(`zui.${n}`); }; d.fn.zuiCall = function(n, t = []) { @@ -2295,9 +2356,9 @@ d.fn.zuiCall = function(n, t = []) { }), this; }; d(() => { - d("body").zuiInit({ update: !0 }); + d("body").zuiInit({ update: !0 }), ac(); }); -class ac extends mt { +class lc extends gt { init() { const { offset: t = 1, side: e, zIndex: s, pinnedClass: i = "is-pinned", targets: r, scrollContainer: o } = this.options, { $element: a } = this, l = r ? a.find(r) : a; if (l.css({ position: "sticky", zIndex: s }), e && l.css(e, -t), o) { @@ -2310,7 +2371,7 @@ class ac extends mt { return; } const h = c.getBoundingClientRect(); - l.each((g, f) => { + l.each((p, f) => { const _ = f.getBoundingClientRect()[e || "top"] === h[e || "top"]; f.classList.toggle(i, _); }); @@ -2334,8 +2395,8 @@ class ac extends mt { (t = this._ob) == null || t.disconnect(), this._container && (this._container.removeEventListener("scroll", this._scrollListener), this._raf && cancelAnimationFrame(this._raf)); } } -ac.NAME = "Sticky"; -function ts(n, t = {}) { +lc.NAME = "Sticky"; +function ns(n, t = {}) { const e = d(n)[0]; if (!e) return !1; @@ -2353,17 +2414,17 @@ function ts(n, t = {}) { const { left: l, top: c, width: u, height: h } = s; if (t.fullyCheck) return i >= l && r >= c && i + o <= u + l && r + a <= h + c; - const g = i <= l + u && i + o >= l; - return r <= c + h && r + a >= c && g; + const p = i <= l + u && i + o >= l; + return r <= c + h && r + a >= c && p; } d.fn.isVisible = function(n) { - return ts(this, n); + return ns(this, n); }; function vi(n, t, e = !1) { const s = d(n); if (t !== void 0) { if (t.length) { - const i = `zui-runjs-${dt()}`; + const i = `zui-runjs-${ut()}`; s.append(``);\n if (removeAfterRun) {\n $element.find(`#${id}`).remove();\n }\n }\n return;\n }\n $element.find('script').each((_, script) => {\n runJS($element, (script as HTMLScriptElement).innerHTML);\n script.remove();\n });\n}\n\n/* Declare types. */\ndeclare module 'cash-dom' {\n interface Cash {\n runJS(jsCode?: string): this;\n }\n\n interface CashStatic {\n runJS(jsCode: string, ...args: [name: string, value: unknown][]): T;\n }\n}\n\n/* Extend as $.runJS() */\n$.runJS = (jsCode: string, ...args: [name: string, value: unknown][]): T => {\n jsCode = jsCode.trim();\n if (!jsCode.startsWith('return ') && !jsCode.endsWith(';')) {\n jsCode = `return ${jsCode}`;\n }\n // eslint-disable-next-line @typescript-eslint/no-implied-eval\n const func = new Function(...args.map(([name]) => name), jsCode);\n return func(...args.map(([, value]) => value));\n};\n\n/* Extend as $.fn.runJS() */\n$.fn.runJS = function (this: Cash, jsCode?: string) {\n return this.each((_, ele) => {\n runJS(ele, jsCode);\n });\n};\n","import {$, Cash, Selector, Comparator} from '../cash';\nimport {isVisible} from './is-visible';\n\n/**\n * Options for {@link scrollIntoView}.\n */\ntype CashScrollIntoViewOptions = ScrollIntoViewOptions & {\n ifNeeded?: boolean;\n container?: Comparator;\n};\n\nfunction hasScrollbar(element: HTMLElement, direction: 'vert' | 'horz' | 'both' = 'both') {\n if (direction === 'vert' || direction === 'both') {\n if (element.clientHeight < element.scrollHeight) {\n return true;\n }\n }\n\n if (direction === 'horz' || direction === 'both') {\n if (element.clientWidth < element.scrollWidth) {\n return true;\n }\n }\n\n return false;\n}\n\n/**\n * Scroll into view.\n *\n * @param selector Element selector to scroll into view.\n * @param options Options.\n * @returns True if the element is visible.\n * @see https://stackoverflow.com/a/26039199\n */\nexport function scrollIntoView(selector: Selector, options?: CashScrollIntoViewOptions): Cash {\n const $element = $(selector);\n const {ifNeeded = true, container, ...other} = options || {};\n $element.each((_, ele) => {\n if (container) {\n const $container = $(ele).closest(container);\n if (!$container.length || !hasScrollbar($container[0] as HTMLElement)) {\n return;\n }\n }\n if (ifNeeded) {\n if ((ele as unknown as {scrollIntoViewIfNeeded?: (options: ScrollIntoViewOptions) => void}).scrollIntoViewIfNeeded) {\n return (ele as unknown as {scrollIntoViewIfNeeded: (options: ScrollIntoViewOptions) => void}).scrollIntoViewIfNeeded(other);\n }\n if (isVisible(ele, {viewport: ele.getBoundingClientRect()})) {\n return;\n }\n }\n ele.scrollIntoView(other);\n });\n return $element;\n}\n\n/* Declare types. */\ndeclare module 'cash-dom' {\n interface Cash {\n scrollIntoView(options?: CashScrollIntoViewOptions): this;\n }\n}\n\n/* Extend as $.fn.scrollIntoView() */\n$.fn.scrollIntoView = function (this: Cash, options?: CashScrollIntoViewOptions) {\n return this.each((_, ele) => {\n scrollIntoView(ele, options);\n });\n};\n","import {$} from '../cash';\n\nexport type GetLibCallback = () => void;\n\nexport interface LoadJSOptions {\n src: string;\n id?: string;\n async?: boolean;\n defer?: boolean;\n noModule?: boolean;\n type?: string;\n integrity?: string;\n}\n\nexport interface LoadCSSOptions {\n src: string;\n id?: string;\n type?: 'css';\n}\n\nexport type GetLibOptions = {\n src: string | (string | LoadJSOptions | LoadCSSOptions)[];\n id?: string;\n async?: boolean;\n defer?: boolean;\n noModule?: boolean;\n type?: string;\n integrity?: string;\n name?: string;\n root?: string;\n css?: string;\n check?: string | boolean | (() => boolean | Promise);\n success?: GetLibCallback;\n};\n\n/* Declare types. */\ndeclare module 'cash-dom' {\n interface CashStatic {\n libRoot?: string;\n\n libMap?: Record;\n\n setLibRoot(root: string): void;\n\n registerLib(name: string, options: GetLibOptions): void;\n\n getLib(options: GetLibOptions): Promise;\n getLib(src: string | string[]): Promise;\n getLib(src: string | string[], options: Omit): Promise;\n getLib(src: string | string[], callback: GetLibCallback): Promise;\n getLib(src: string | string[], options: GetLibCallback, callback?: GetLibCallback): Promise;\n getLib(optionsOrSrc: string | string[] | GetLibOptions, optionsOrCallback?: Omit | GetLibCallback, callback?: GetLibCallback): Promise;\n\n /**\n * @deprecated Use $.getLib instead.\n */\n getScript(optionsOrSrc: string | (GetLibOptions & {src: string}), optionsOrCallback?: Omit | GetLibCallback, callback?: GetLibCallback): Promise;\n }\n}\n\n/** Define the $.libRoot property. */\n$.setLibRoot = function (root: string): void {\n $.libRoot = root;\n};\n\n/** Define the $.libMap property. */\n$.registerLib = function (name: string, options: GetLibOptions): void {\n if (!$.libMap) {\n $.libMap = {};\n }\n if (!options.name && options.id) {\n options.id = `zui-lib-${name}`;\n }\n $.libMap[name] = options;\n};\n\n/**\n * Load a CSS file by append a link tag to the head.\n */\nfunction loadCSS(options: string | LoadCSSOptions): Promise {\n return new Promise((resolve, reject) => {\n if (typeof options === 'string') {\n options = {src: options};\n }\n const {src, id} = options;\n const $oldLinks = $(id ? `#${id}` : `link[href=\"${src}\"]`);\n if ($oldLinks.length) {\n resolve();\n return;\n }\n const link = document.createElement('link');\n link.onload = () => {\n resolve();\n };\n link.onerror = () => {\n reject(new Error(`[ZUI] Failed to load CSS from: ${src}`));\n };\n link.rel = 'stylesheet';\n link.href = src;\n if (id) {\n link.id = id;\n }\n $('head').append(link);\n });\n}\n\nfunction loadJS(options: string | LoadJSOptions): Promise {\n return new Promise((resolve, reject) => {\n if (typeof options === 'string') {\n options = {src: options};\n }\n const {src, id} = options;\n const $oldScripts = $(id ? `#${id}` : `script[src=\"${src}\"]`);\n if ($oldScripts.length) {\n if ($oldScripts.dataset('loaded')) {\n resolve();\n } else {\n const callbacks = $oldScripts.data('loadCalls') || [];\n callbacks.push(resolve);\n $oldScripts.data('loadCalls', callbacks);\n }\n return;\n }\n const {async = true, defer = false, noModule = false, type, integrity} = options;\n const script = document.createElement('script');\n script.async = async;\n script.defer = defer;\n script.noModule = noModule;\n if (type) {\n script.type = type;\n }\n if (integrity) {\n script.integrity = integrity;\n }\n\n script.onload = () => {\n resolve();\n const callbacks: GetLibCallback[] = $(script).dataset('loaded', true).data('loadCalls') || [];\n callbacks.forEach(x => x());\n $(script).removeData('loadCalls');\n };\n script.onerror = () => {\n reject(new Error(`[ZUI] Failed to load JS from: ${src}`));\n };\n $('head').append(script);\n script.src = src;\n });\n}\n\n/** Define the $.getLib method. */\n$.getLib = async function (optionsOrSrc: string | string[] | GetLibOptions, optionsOrCallback?: Omit | GetLibCallback, callback?: GetLibCallback): Promise {\n if (typeof optionsOrSrc === 'string') {\n optionsOrSrc = ($.libMap?.[optionsOrSrc] || {src: optionsOrSrc}) as GetLibOptions;\n }\n let options: GetLibOptions = Array.isArray(optionsOrSrc) ? {src: optionsOrSrc} : $.extend({}, optionsOrSrc);\n if (typeof optionsOrCallback === 'function') {\n options.success = optionsOrCallback;\n } else if (optionsOrCallback) {\n $.extend(options, optionsOrCallback);\n }\n if (callback) {\n options.success = callback;\n }\n\n let {src: srcList} = options;\n const {name, success} = options;\n const lib = ($.libMap && name) ? $.libMap[name] : null;\n if (lib) {\n options = $.extend({}, lib, options);\n srcList = lib.src || options.src;\n }\n if (typeof srcList === 'string') {\n srcList = [srcList];\n }\n if (!srcList || !srcList.length) {\n throw new Error('[ZUI] No src provided for $.getLib.');\n }\n\n let {check = true} = options;\n if (check === true && name) {\n check = name;\n }\n const libVarName = typeof check === 'string' ? check : name;\n const getLibVar = (): T | undefined => {\n return libVarName ? ((window as unknown as Record)[libVarName] as T) : undefined;\n };\n if (typeof check === 'string') {\n check = () => !!getLibVar();\n }\n const onSuccess = () => {\n success?.();\n return getLibVar();\n };\n if (typeof check === 'function') {\n const checkResult = await check();\n if (checkResult) {\n return onSuccess();\n }\n }\n\n const {root = $.libRoot} = options;\n for (let srcOptions of srcList) {\n if (typeof srcOptions === 'string') {\n srcOptions = {src: srcOptions};\n }\n let {src} = srcOptions;\n if (root) {\n src = `${root}${(root.endsWith('/') || src.startsWith('/')) ? '' : '/'}${src}`;\n }\n const loadOptions = {\n ...options,\n ...srcOptions,\n src,\n };\n if (srcOptions.type === 'css' || (!srcOptions.type && src.endsWith('.css'))) {\n await loadCSS(loadOptions as LoadCSSOptions);\n continue;\n }\n await loadJS(loadOptions as LoadJSOptions);\n }\n return onSuccess();\n};\n\n/** Define the $.getScript method. */\n$.getScript = $.getLib;\n","import {$, Cash, Selector} from '../cash';\n\n/**\n * Listen element resize with ResizeObserver.\n *\n * @param selector Element selector to check.\n * @returns True if the element is disabled.\n */\nexport function listenResize(selector: Selector, callback: ResizeObserverCallback): ResizeObserver {\n const $elements = $(selector);\n const observer = new ResizeObserver(callback);\n\n $elements.each((_, ele) => {\n observer.observe(ele);\n });\n\n return observer;\n}\n\n/* Declare types. */\ndeclare module 'cash-dom' {\n interface Cash {\n resize(callback: ResizeObserverCallback): ResizeObserver;\n }\n}\n\n/* Extend as $.fn.resize() */\n$.fn.resize = function (this: Cash, callback: ResizeObserverCallback) {\n return listenResize(this, callback);\n};\n","import type {ComponentType} from 'preact';\n\nexport const reactComponents: Record = {};\n\nexport function registerReactComponent

    (name: string, component?: ComponentType

    ): void;\n\nexport function registerReactComponent(componentMap: Record): void;\n\nexport function registerReactComponent(nameOrMap: string | Record, component?: ComponentType): void {\n if (typeof nameOrMap === 'object') {\n Object.keys(nameOrMap).forEach(name => {\n registerReactComponent(name, nameOrMap[name] as ComponentType);\n });\n } else if (component) {\n reactComponents[nameOrMap.toLowerCase()] = component;\n }\n}\n\nexport function getReactComponent

    (name: string): ComponentType

    | undefined {\n return reactComponents[name.toLowerCase()] as (ComponentType

    | undefined);\n}\n","import {h, Component} from 'preact';\nimport {nextGid} from '../../helpers/gid';\nimport {classes} from '../../helpers/classes';\nimport {getReactComponent} from './components';\nimport {i18n} from '../../i18n';\n\nimport type {JSX, ComponentType, RenderableProps, ComponentChildren} from 'preact';\nimport type {ClassNameLike} from '../../helpers/classes';\nimport type {HElementProps} from '../types';\nimport type {I18nLangMap} from '../../i18n';\n\n/**\n * The base HTML element.\n */\nexport class HElement

    extends Component {\n static HElement = true;\n\n static customProps: string[] = [];\n\n /**\n * The component name.\n * It usually equals to the class name.\n * The name must be provided in subclass.\n */\n static NAME: string;\n\n /**\n * The component i18n data.\n * It will be merged with global i18n data.\n */\n static i18n: I18nLangMap | undefined;\n\n /**\n * Access to static properties via this.constructor.\n *\n * @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146\n */\n declare ['constructor']: typeof HElement;\n\n protected _gid = nextGid();\n\n get gid() {\n return this._gid;\n }\n\n get element() {\n return document.querySelector(`[z-gid-${this._gid}]`);\n }\n\n /**\n * Get the component i18n data.\n */\n get i18nData(): (I18nLangMap | undefined)[] {\n return [this.props.i18n, this.constructor.i18n];\n }\n\n /**\n * Get the i18n text.\n *\n * @param key The i18n key.\n * @param defaultValue The default value if the key is not found.\n */\n i18n(key: string, defaultValue?: string): string;\n\n /**\n * Get the i18n text.\n *\n * @param key The i18n key.\n * @param args The i18n arguments.\n * @param defaultValue The default value if the key is not found.\n */\n i18n(key: string, args?: (string | number)[], defaultValue?: string): string;\n\n /**\n * Get the i18n text.\n *\n * @param key The i18n key.\n * @param args The i18n arguments.\n * @param defaultValue The default value if the key is not found.\n */\n i18n(key: string, args?: Record, defaultValue?: string): string;\n\n /**\n * Get the i18n text.\n *\n * @param key The i18n key.\n * @param args The i18n arguments or the default value.\n * @param defaultValue The default value if the key is not found.\n * @returns The i18n text.\n */\n i18n(key: string, args?: string | (string | number)[] | Record, defaultValue?: string): string {\n const {i18nData} = this;\n return i18n(i18nData, key, args, defaultValue, this.props.lang, this.constructor.NAME)\n ?? i18n(i18nData, key, args, defaultValue, this.props.lang)\n ?? `{i18n:${key}}`;\n }\n\n changeState(state: Partial | ((prevState: Readonly) => Partial), callback?: () => void): Promise {\n return new Promise(resolve => {\n this.setState(state, () => {\n callback?.();\n resolve(this.state);\n });\n });\n }\n\n protected _getClassName(props: RenderableProps

    ): ClassNameLike {\n return props.className;\n }\n\n protected _getProps(props: RenderableProps

    ): Record {\n const {className, attrs, props: componentProps, data, forwardRef, children, component, style, class: classNameAlt, ...others} = props;\n const customProps = new Set((this.constructor as typeof HElement).customProps);\n const strDangerouslySetInnerHTML = 'dangerouslySetInnerHTML';\n const other = Object.keys(others).reduce>((map, key) => {\n if (!customProps.has(key) && (key === strDangerouslySetInnerHTML || /^(on[A-Z]|data-|zui-|z-)[a-zA-Z-]+/.test(key))) {\n const val = others[key as keyof typeof others];\n map[key] = (key !== strDangerouslySetInnerHTML && val && typeof val === 'object') ? JSON.stringify(val) : val;\n }\n return map;\n }, {});\n return {ref: forwardRef, className: classes(this._getClassName(props), classNameAlt) || undefined, style, [`z-gid-${this._gid}`]: '', ...other, ...attrs, ...componentProps};\n }\n\n protected _getComponent(props: RenderableProps

    ): ComponentType | keyof JSX.IntrinsicElements {\n const {component = 'div'} = props;\n return (typeof component === 'string' ? getReactComponent(component as string) : component) || component;\n }\n\n protected _getChildren(props: RenderableProps

    ): ComponentChildren {\n return props.children;\n }\n\n protected _beforeRender(props: RenderableProps

    ): RenderableProps

    | undefined | void {\n return props;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected _onRender(component: ComponentType | keyof JSX.IntrinsicElements, componentProps: Record, children: ComponentChildren, _props: RenderableProps

    ): [component: ComponentType | keyof JSX.IntrinsicElements, componentProps: Record, children: ComponentChildren] | void {\n return [component, componentProps, children];\n }\n\n render(props: RenderableProps

    ) {\n props = this._beforeRender(props) || props;\n let component = this._getComponent(props);\n let children = this._getChildren(props);\n let componentProps = this._getProps(props);\n const renderResult = this._onRender(component, componentProps, children, props);\n if (renderResult) {\n [component, componentProps, children] = renderResult;\n }\n return h(component as ComponentType, componentProps, children);\n }\n}\n","import{options as r,Fragment as e}from\"preact\";export{Fragment}from\"preact\";var t=/[\"&<]/;function n(r){if(0===r.length||!1===t.test(r))return r;for(var e=0,n=0,o=\"\",f=\"\";n

    Hello world

    \n * Hello world\" />\n *\n * // Render and execute script\n * alert('Hello world')\" executeScript />\n */\nexport class HtmlContent extends Component {\n protected _ref = createRef();\n\n protected _runJS() {\n if (!this.props.executeScript) {\n return;\n }\n $(this._ref.current).runJS().zuiInit();\n }\n\n componentDidMount(): void {\n this._runJS();\n }\n\n componentDidUpdate(previousProps: Readonly): void {\n if (this.props.html !== previousProps.html) {\n this._runJS();\n }\n }\n\n render(props: HtmlContentProps) {\n const {executeScript, html, ...others} = props;\n return ;\n }\n}\n","import {h as _h, isValidElement, ComponentChildren, JSX, Attributes} from 'preact';\nimport {classes, ClassNameLike} from '../../helpers';\n\n/**\n * @deprecated Use `CustomContent` instead.\n */\nexport type CustomRenderResultItem = Partial<{\n html: string;\n __html: string;\n style: JSX.CSSProperties;\n className: ClassNameLike;\n children: ComponentChildren;\n attrs: JSX.HTMLAttributes;\n [prop: string]: unknown;\n}>;\n\n/**\n * @deprecated Use `CustomContent` instead.\n */\nexport type CustomRenderResultGenerator = unknown[], THIS = unknown> = (this: THIS, result: ComponentChildren[], ...args: T) => (ComponentChildren | CustomRenderResultItem)[] | undefined | void;\n\n/**\n * @deprecated Use `CustomContent` instead.\n */\nexport type CustomRenderResult = unknown[], THIS = unknown> = CustomRenderResultGenerator | CustomRenderResultItem | ComponentChildren;\n\n/**\n * @deprecated Use `CustomContent` instead.\n */\nexport type CustomRenderResultList = unknown[], THIS = unknown> = CustomRenderResult[];\n\n/**\n * @deprecated Use `CustomContent` instead.\n */\nexport type CustomRenderProps = unknown[], THIS = unknown> = {\n tag?: string;\n className?: ClassNameLike;\n style?: JSX.CSSProperties;\n renders: CustomRenderResultList;\n generateArgs?: T;\n generators?: Record>;\n generatorThis?: THIS;\n onGenerate?: (this: THIS, generator: CustomRenderResultGenerator, result: ComponentChildren[], ...args: T) => (ComponentChildren | CustomRenderResultItem)[];\n onRenderItem?: (item: CustomRenderResultItem) => ComponentChildren;\n children?: ComponentChildren;\n};\n\n/**\n * @deprecated Use `renderCustomContent` instead.\n */\nexport function renderCustomResult(props: CustomRenderProps): [JSX.HTMLAttributes, ComponentChildren[]] {\n const {\n tag,\n className,\n style,\n renders,\n generateArgs = [],\n generatorThis,\n generators,\n onGenerate,\n onRenderItem,\n ...others\n } = props;\n const classList: ClassNameLike = [className];\n const rootStyle: JSX.CSSProperties = {...style};\n const result: ComponentChildren[] = [];\n const rawHtml: string[] = [];\n renders.forEach(render => {\n const items: (CustomRenderResultItem | ComponentChildren)[] = [];\n if (typeof render === 'string' && generators && generators[render]) {\n render = generators[render];\n }\n if (typeof render === 'function') {\n if (onGenerate) {\n items.push(...onGenerate.call(generatorThis, render as CustomRenderResultGenerator, result, ...generateArgs));\n } else {\n const renderResult = (render as CustomRenderResultGenerator).call(generatorThis, result, ...generateArgs);\n if (renderResult) {\n if (Array.isArray(renderResult)) {\n items.push(...renderResult);\n } else {\n items.push(renderResult);\n }\n }\n }\n } else {\n items.push(render);\n }\n items.forEach(item => {\n if (item === undefined || item === null) {\n return;\n }\n if (typeof item === 'object' && !isValidElement(item) && ('html' in item || '__html' in item || 'className' in item || 'style' in item || 'attrs' in item || 'children' in item)) {\n if (item.html) {\n result.push(\n
    )}>
    ,\n );\n } else if (item.__html) {\n rawHtml.push(item.__html);\n } else {\n if (item.style) {\n Object.assign(rootStyle, item.style);\n }\n if (item.className) {\n classList.push(item.className);\n }\n if (item.children) {\n result.push(item.children);\n }\n if (item.attrs) {\n Object.assign(others, item.attrs);\n }\n }\n } else {\n result.push(item);\n }\n });\n });\n\n if (rawHtml.length) {\n Object.assign(others, {dangerouslySetInnerHTML: {__html: rawHtml}});\n }\n\n return [{\n className: classes(classList),\n style: rootStyle,\n ...others,\n }, result];\n}\n\n/**\n * @deprecated Use `CustomContent` instead.\n */\nexport function CustomRender({\n tag = 'div',\n ...props\n}: CustomRenderProps) {\n const [attrs, children] = renderCustomResult(props);\n return _h(tag, attrs as Attributes, ...children);\n}\n","import {isValidElement} from 'preact';\nimport {HtmlContent} from './html-content';\nimport {HElement} from './h-element';\nimport {mergeProps} from '../../helpers';\n\nimport type {ComponentChildren, VNode} from 'preact';\nimport type {HtmlContentProps, HElementProps, CustomContentType, CustomContentGenerator, CustomContentProps} from '../types';\n\n/**\n * Render custom content.\n *\n * @param content The content to render.\n * @param generatorThis The `this` value to use when calling the generator.\n * @param generatorArgs The arguments to pass to the generator.\n * @returns The rendered content.\n */\nexport function renderCustomContent(props: CustomContentProps): ComponentChildren {\n const {content: contentSetting, generatorArgs, generatorThis, ...others} = props;\n let content = contentSetting;\n if (typeof content === 'function') {\n content = (content as CustomContentGenerator).call(generatorThis, ...(generatorArgs || []));\n }\n if (Array.isArray(content)) {\n return content.map((x) => renderCustomContent({...others, content: x, generatorThis, generatorArgs}));\n }\n if ((typeof content === 'string' || typeof content === 'number')) {\n if (Object.keys(others).length) {\n return
    {content}
    ;\n }\n return content;\n }\n if (content && typeof content === 'object' && (typeof (content as HtmlContentProps).html === 'string' || (content as HtmlContentProps).component)) {\n if ((content as HtmlContentProps).html) {\n return ;\n }\n let {children} = content as HElementProps;\n if (children) {\n children = Array.isArray(children) ? children : [children];\n content = mergeProps({children: (children as CustomContentType[]).map((x) => renderCustomContent({...others, content: x, generatorThis, generatorArgs}))}, content);\n }\n return ;\n }\n if (isValidElement(content)) {\n return content;\n }\n if (content) {\n console.groupCollapsed('[ZUI] CustomContent format error');\n console.trace('content:', content);\n console.log('props:', props);\n console.groupEnd();\n }\n return null;\n}\n\n/**\n * Component for rendering custom content.\n *\n * @param props Custom content props.\n * @returns Custom content.\n */\nexport function CustomContent(props: CustomContentProps): VNode | null {\n const result = renderCustomContent(props);\n if (result === undefined || result === null || typeof result === 'boolean') {\n return null;\n }\n if (isValidElement(result)) {\n return result;\n }\n return <>{result};\n}\n","import {isValidElement} from 'preact';\nimport {classes} from '../../helpers/classes';\n\nimport type {ClassNameLike} from '../../helpers/classes';\nimport type {IconProps} from '../types';\n\nconst createIconClass = (icon: string) => icon.startsWith('icon-') ? icon : `icon-${icon}`;\n\n/**\n * Component for rendering icons.\n *\n * @param props Icon properties.\n * @returns Icon element.\n */\nexport function Icon(props: IconProps) {\n const {icon, className, ...others} = props;\n if (!icon) {\n return null;\n }\n if (isValidElement(icon)) {\n return icon;\n }\n const classList: ClassNameLike[] = ['icon', className as string];\n if (typeof icon === 'string') {\n classList.push(createIconClass(icon));\n } else if (typeof icon === 'object') {\n const {className: iconClass, icon: finalIcon, ...iconOthers} = icon;\n classList.push(iconClass as string, finalIcon ? createIconClass(finalIcon as string) : '');\n Object.assign(others, iconOthers);\n }\n return ;\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {createElement, render} from 'preact';\n\nimport type {VNode, RenderableProps, ContainerNode} from 'preact';\n\n/**\n * @param {import('../../src/index').RenderableProps<{ context: any }>} props\n */\nfunction ContextProvider(this: any, props: RenderableProps<{context: any}>) {\n this.getChildContext = () => props.context;\n return props.children;\n}\n\n/**\n * Portal component\n * @this {import('preact').Component}\n * @param {object | null | undefined} props\n *\n * TODO: use createRoot() instead of fake root\n */\nexport function Portal(this: any, props: any) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const that = this;\n const container = props._container;\n\n that.componentWillUnmount = function () {\n render(null, that._temp);\n that._temp = null;\n that._container = null;\n };\n\n // When we change container we should clear our old container and\n // indicate a new mount.\n if (that._container && that._container !== container) {\n that.componentWillUnmount();\n }\n\n // When props.vnode is undefined/false/null we are dealing with some kind of\n // conditional vnode. This should not trigger a render.\n if (props._vnode) {\n if (!that._temp) {\n that._container = container;\n\n // Create a fake DOM parent node that manages a subset of `container`'s children:\n that._temp = {\n nodeType: 1,\n parentNode: container,\n childNodes: [],\n appendChild(child: VNode) {\n this.childNodes.push(child);\n that._container.appendChild(child);\n },\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n insertBefore(child: VNode, _before: VNode) {\n this.childNodes.push(child);\n that._container.appendChild(child);\n },\n removeChild(child: VNode) {\n this.childNodes.splice(this.childNodes.indexOf(child) >>> 1, 1);\n that._container.removeChild(child);\n },\n };\n }\n\n // Render our wrapping element into temp.\n render(\n createElement(ContextProvider as any, {context: that.context}, props._vnode),\n that._temp,\n );\n } else if (that._temp) {\n // When we come from a conditional render, on a mounted\n // portal we should clear the DOM.\n that.componentWillUnmount();\n }\n}\n\n/**\n * Create a `Portal` to continue rendering the vnode tree at a different DOM node\n *\n * @param {import('preact').VNode} vnode The vnode to render\n * @param {import('preact').PreactElement} container The DOM node to continue rendering in to.\n * @see https://github.com/developit/preact-portal/blob/master/src/preact-portal.js\n */\nexport function createPortal(vnode: VNode, container: ContainerNode): VNode {\n const el = createElement(Portal as any, {_vnode: vnode, _container: container}) as any;\n el.containerInfo = container;\n return el;\n}\n","import {HElement} from './h-element';\nimport {HtmlContent} from './html-content';\nimport {CustomContent} from './custom-content';\nimport {Icon} from './icon';\nimport {Portal} from './portals';\nimport {registerReactComponent} from './components';\n\nregisterReactComponent({\n HElement,\n element: HElement,\n HtmlContent,\n html: HtmlContent,\n CustomContent,\n custom: CustomContent,\n Icon,\n Portal,\n});\n","import {createRef, render, h} from 'preact';\nimport {Component as ComponentBase} from '../component';\nimport {mergeProps} from '../helpers';\n\nimport type {ComponentEventsDefnition} from '../component';\nimport type {Component as ComponentReact, ComponentClass} from 'preact';\nimport {I18nLangMap} from '../i18n';\n\nexport class ComponentFromReact = ComponentReact, E extends ComponentEventsDefnition = {}, U extends HTMLElement = HTMLElement> extends ComponentBase {\n /**\n * The React component class.\n */\n static Component: unknown;\n\n /**\n * Whether replace the element.\n */\n static replace: boolean | keyof HTMLElementTagNameMap | (string & {}) = false;\n\n /**\n * Access to static properties via this.constructor.\n *\n * @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146\n */\n declare ['constructor']: typeof ComponentFromReact;\n\n /**\n * The React ref for component instance.\n */\n protected _ref = createRef();\n\n /**\n * The React component instance.\n */\n get $(): C | null {\n return this._ref.current;\n }\n\n /**\n * The i18n data.\n */\n get i18nData() {\n const {i18n, i18nData} = this.constructor.Component as {i18n?: I18nLangMap, i18nData?: (I18nLangMap | undefined)[]};\n if (i18nData) {\n return [...i18nData, this.constructor.i18n];\n }\n return [i18n, ...super.i18nData];\n }\n\n /**\n * Render after component init.\n */\n afterInit() {\n this.render();\n }\n\n /**\n * Destroy component.\n */\n destroy() {\n this.$?.componentWillUnmount?.();\n if (this.element) {\n this.element.innerHTML = '';\n }\n super.destroy();\n }\n\n /**\n * Render component.\n *\n * @param options new options.\n */\n render(options?: Partial) {\n const {element} = this;\n const {Component, replace} = this.constructor;\n const {$replace = replace, ...userOptions} = this.setOptions(options);\n const props = {\n ref: this._ref,\n ...userOptions,\n };\n if ($replace && (Component as {HElement?: boolean}).HElement && (element.tagName.toLowerCase() === $replace || $replace === true)) {\n const attrs = Array.from(element.attributes).reduce>((data, attribute) => {\n const {name, value} = attribute;\n data[name === 'class' ? 'className' : name] = value;\n return data;\n }, {});\n return render(\n h(Component as ComponentClass, mergeProps({component: element.tagName.toLowerCase(), attrs}, props)),\n element.parentElement!,\n element,\n );\n }\n render(\n h(Component as ComponentClass, props),\n element,\n );\n }\n\n static renderHTML(options: Record): string {\n const tmpNode = document.createElement('div');\n render(h(this.Component as ComponentClass, options), tmpNode);\n return tmpNode.innerHTML;\n }\n}\n","import {HElement, Icon, classes} from '@zui/core';\n\nimport type {ClassNameLike} from '@zui/core';\nimport type {ButtonProps} from '../types/button-props';\nimport type {RenderableProps} from 'preact';\n\nexport class Button

    extends HElement

    {\n protected declare _isEmptyText?: boolean;\n\n protected declare _onlyCaret?: boolean;\n\n protected _beforeRender(props: RenderableProps

    ) {\n const {text, loading, loadingText, caret, icon, trailingIcon, children} = props;\n this._isEmptyText = text === undefined || text === null || (typeof text === 'string' && !text.length) || loading && !loadingText;\n this._onlyCaret = caret && this._isEmptyText && !icon && !trailingIcon && !children && !loading;\n }\n\n protected _getChildren(props: RenderableProps

    ) {\n const {loading, loadingIcon, loadingText, icon, text, children, trailingIcon, caret} = props;\n return [\n loading ? : ,\n this._isEmptyText ? null : {loading ? loadingText : text},\n loading ? null : children,\n loading ? null : ,\n loading ? null : caret ? : null,\n ];\n }\n\n protected _getClassName(props: RenderableProps

    ) {\n const {type, className, disabled, loading, active, children, square, size, rounded} = props;\n return ['btn', type, className, {\n 'btn-caret': this._onlyCaret,\n disabled: disabled || loading,\n active,\n loading,\n square: square === undefined ? (!this._onlyCaret && !children && this._isEmptyText) : square,\n }, size ? `size-${size}` : '', typeof rounded === 'string' ? `rounded-${rounded}` : {rounded}];\n }\n\n protected _getComponent(props: RenderableProps

    ) {\n return props.component || (props.url ? 'a' : 'button');\n }\n\n protected _getProps(props: RenderableProps

    ) {\n const component = this._getComponent(props);\n const {url, target, disabled, btnType = 'button', hint} = props;\n const asLink = component === 'a';\n const componentProps: Record = {\n ...super._getProps(props),\n type: asLink ? undefined : 'button',\n disabled: (!asLink && disabled) ? '' : undefined,\n title: hint,\n };\n if (btnType) {\n if (['button', 'reset', 'submit'].includes(btnType)) {\n if (component === 'button') {\n componentProps.type = btnType;\n }\n } else {\n componentProps.className = classes([componentProps.className as ClassNameLike, btnType]);\n }\n }\n if (!disabled) {\n if (url !== undefined) {\n componentProps[asLink ? 'href' : 'data-url'] = url;\n }\n if (target !== undefined) {\n componentProps[asLink ? 'target' : 'data-target'] = target;\n }\n }\n return componentProps;\n }\n}\n","import {registerReactComponent} from '@zui/core';\nimport * as components from './index';\n\nregisterReactComponent(components);\n","import {CustomContent, HElement, mergeProps} from '@zui/core';\n\nimport type {ComponentChild, ComponentChildren, ComponentType, JSX, RenderableProps} from 'preact';\nimport type {ClassNameLike} from '../../../core/src/helpers';\nimport type {CommonListProps, Item, ItemKey, ItemType} from '../types';\n\n/**\n * Generic list component.\n */\nexport class CommonList

    extends HElement {\n /**\n * Root element default name, used for class name.\n */\n static NAME = '';\n\n /**\n * Item default name, used for class name.\n */\n static ITEM_NAME = 'item';\n\n /**\n * Root element default tag name, used for DOM rendering.\n */\n static TAG = 'ul';\n\n /**\n * Item components, used for rendering for different item types.\n */\n static ItemComponents: Partial | ((this: CommonList, item: Item, props: CommonListProps) => Partial)]>> = {\n default: HElement,\n divider: [HElement, {className: 'divider'}],\n space: [HElement, (item) => {\n const {space, flex, style} = item as {space: JSX.CSSProperties['width'], flex: JSX.CSSProperties['flex'], style: JSX.CSSProperties};\n return {\n style: {width: space, height: space, flex, ...style},\n };\n }],\n };\n\n /**\n * Item default common props, used for rendering for all item types.\n */\n static defaultItemProps: Partial = {\n component: 'li',\n };\n\n /**\n * Item default props, used for rendering for different item types.\n */\n static defaultItemPropsMap: Partial>> = {};\n\n /**\n * Item default type, used for rendering for item without type.\n */\n static defaultItemType = 'item';\n\n static defaultProps: Partial = {\n itemKey: 'id',\n };\n\n /**\n * Access to static properties via this.constructor.\n *\n * @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146\n */\n declare ['constructor']: typeof CommonList;\n\n /**\n * Store the raw items.\n */\n protected declare _items: Item[];\n\n /**\n * Store the rendered items.\n */\n protected declare _renderedItems: Item[];\n\n constructor(props: P) {\n super(props);\n this._handleClick = this._handleClick.bind(this);\n }\n\n /**\n * Get the root element name, used for class name.\n */\n get name() {\n return this.props.name || this.constructor.NAME;\n }\n\n /**\n * Get the item element name, used for class name.\n */\n get itemName() {\n return this.props.itemName || this.constructor.ITEM_NAME;\n }\n\n getItems() {\n return this._items;\n }\n\n getRenderedItem(key: ItemKey) {\n return this._renderedItems.find((item) => item.key === key);\n }\n\n getItem(key: ItemKey): Item | undefined {\n return this._items[this.getItemIndex(key)];\n }\n\n getItemIndex(key: ItemKey) {\n return this._renderedItems.findIndex((item) => item.key === key);\n }\n\n getItemByIndex(index: number) {\n return this._items[index];\n }\n\n /**\n * Get the item key by index.\n *\n * @param index The rendered item index.\n * @returns The item key, if the item is not rendered, return undefined.\n */\n getKey(index: number): ItemKey | undefined {\n return this._renderedItems?.[index]?.key;\n }\n\n protected _getItemFromEvent(event: MouseEvent, target?: HTMLElement): {\n index: number;\n item: Item;\n renderedItem: Item;\n element: HTMLElement;\n event: MouseEvent;\n key: ItemKey;\n relativeTarget?: unknown;\n } | undefined {\n const element = (target || event.target as HTMLElement).closest('[z-item]') as HTMLElement;\n if (!element || !element.parentElement?.hasAttribute(`z-gid-${this._gid}`)) {\n return;\n }\n const index = +element.getAttribute('z-item')!;\n const item = this._items[index];\n if (!item) {\n return;\n }\n const key = this.getKey(index);\n if (key === undefined) {\n return;\n }\n const renderedItem = this._renderedItems[index];\n return {index, item, element, event, key, renderedItem, relativeTarget: this.props.relativeTarget};\n }\n\n protected _handleClick(event: MouseEvent) {\n const info = this._getItemFromEvent(event);\n if (!info) {\n return;\n }\n this.props.onClickItem?.call(this, info);\n info.item.onClick?.call(this, event, info);\n return info;\n }\n\n /**\n * Render the item content.\n *\n * @param props Current list properties.\n * @param item The item to render.\n * @param index The item index.\n * @returns The item rendered content.\n */\n protected _renderItem(props: RenderableProps

    , item: Item, index: number): ComponentChildren {\n const {beforeRenderItem} = props;\n if (beforeRenderItem) {\n const result = beforeRenderItem.call(this, item, index);\n if (result !== undefined) {\n item = result;\n }\n }\n\n const {type} = item;\n let {itemRender} = props;\n if (itemRender && typeof itemRender === 'object') {\n itemRender = itemRender[type!];\n }\n if (itemRender) {\n const customResult = itemRender.call(this, item, index);\n if (customResult !== undefined) {\n return ;\n }\n }\n\n const {ItemComponents} = this.constructor;\n let ItemComponent = ItemComponents[type!];\n if (!ItemComponent && item.component) {\n return ;\n }\n ItemComponent = ItemComponent || ItemComponents.default || HElement;\n if (Array.isArray(ItemComponent)) {\n let defaultItemProps = ItemComponent[1];\n if (typeof defaultItemProps === 'function') {\n defaultItemProps = defaultItemProps.call(this as CommonList, item, props);\n }\n item = mergeProps({}, defaultItemProps, item);\n ItemComponent = ItemComponent[0];\n }\n return ;\n }\n\n /**\n * Get the rendered item final properties.\n *\n * @param props Current list properties.\n * @param item The item to render.\n * @param index The item index.\n * @returns The item to rendered, if return false, the item will not be rendered.\n */\n protected _getItem(props: RenderableProps

    , item: Item, index: number): Item | false {\n if (!item) {\n return false;\n }\n const {itemProps, itemPropsMap = {}, getItem, itemKey} = props;\n const {type = this.constructor.defaultItemType} = item;\n const {name, itemName} = this;\n const {defaultItemProps = {}, defaultItemPropsMap = {}} = this.constructor;\n\n item = mergeProps(\n {type},\n defaultItemProps,\n defaultItemPropsMap[type],\n itemProps,\n itemPropsMap[type],\n {className: [name ? `${name}-${type}` : '', itemName]},\n item,\n {\n _item: item,\n _index: index,\n key: String((itemKey ? item[itemKey] : item.key) ?? (item.key ?? index)),\n onClick: undefined,\n },\n );\n\n if (getItem) {\n const result = getItem.call(this, item, index);\n if (result !== undefined) {\n return result;\n }\n }\n return item;\n }\n\n protected _getProps(props: RenderableProps

    ): Record {\n const finalProps = super._getProps(props);\n return {onClick: this._handleClick, ...finalProps};\n }\n\n /**\n * Get the list root element classname list.\n *\n * @param props Current list properties.\n * @returns The list root element classname list.\n */\n protected _getClassName(props: RenderableProps

    ): ClassNameLike {\n return [this.name, props.className];\n }\n\n /**\n * Get final rendered item list.\n *\n * @param props Current list properties.\n * @returns Item list.\n */\n protected _getItems(props: RenderableProps

    ): Item[] {\n let {items = []} = props;\n if (typeof items === 'function') {\n items = items.call(this);\n } else if (!Array.isArray(items)) {\n items = [];\n }\n return items as Item[];\n }\n\n /**\n * Render items.\n *\n * @param props props Current list properties.\n * @param items Render items.\n * @returns React render children.\n */\n protected _renderItems(props: RenderableProps

    , items: Item[]): ComponentChild[] {\n this._renderedItems = items.map((item, index) => {\n const finalItem = this._getItem(props, item, index);\n return finalItem ? finalItem : undefined;\n }) as Item[];\n return this._renderedItems.reduce((children, item, index) => {\n if (item) {\n children.push(this._renderItem(props, item, index));\n }\n return children;\n }, []);\n }\n\n /**\n * Get root element rendered children.\n *\n * @param props Current list properties.\n * @returns React render children.\n */\n protected _getChildren(props: RenderableProps

    ): ComponentChildren {\n const items = this._getItems(props);\n this._items = items;\n const children = this._renderItems(props, items);\n if (props.children) {\n children.push(props.children);\n }\n return children;\n }\n\n /**\n * Get root element rendered component type.\n *\n * @param props Current list properties.\n * @returns React component type.\n */\n protected _getComponent(props: RenderableProps

    ): ComponentType | keyof JSX.IntrinsicElements {\n return props.component || (this.constructor.TAG as keyof JSX.IntrinsicElements);\n }\n}\n","import {ComponentFromReact} from '@zui/core';\nimport {CommonList as CommonListReact} from '../component';\n\nimport type {CommonListProps} from '../types';\n\nexport class CommonList extends ComponentFromReact {\n static NAME = 'CommonList';\n\n static Component = CommonListReact;\n\n static replace = CommonListReact.TAG;\n}\n\nCommonList.register();\n","import {registerReactComponent} from '@zui/core';\nimport * as components from './index';\n\nregisterReactComponent(components);\n","export type RGBColor = [r: number, g: number, b: number];\n\nexport function hex2Rgb(hex: string): RGBColor {\n if (hex.indexOf('#') === 0) {\n hex = hex.slice(1);\n }\n // convert 3-digit hex to 6-digits.\n if (hex.length === 3) {\n hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n }\n if (hex.length !== 6) {\n throw new Error(`Invalid HEX color \"${hex}\".`);\n }\n return [\n parseInt(hex.slice(0, 2), 16), // r\n parseInt(hex.slice(2, 4), 16), // g\n parseInt(hex.slice(4, 6), 16), // b\n ];\n}\n\nexport function isLightColor(color: string | RGBColor): boolean {\n const [r, g, b] = typeof color === 'string' ? hex2Rgb(color) : color;\n return (r * 0.299 + g * 0.587 + b * 0.114) > 186;\n}\n\nexport function contrastColor(color: string | RGBColor, options?: {dark: string, light: string}) {\n return isLightColor(color) ? (options?.dark ?? '#333333') : (options?.light ?? '#ffffff');\n}\n\nfunction clamp(value: number, max = 255): number {\n return Math.min(Math.max(value, 0), max);\n}\n\nexport function hslToRgb(h: number, s: number, l: number): RGBColor {\n h = (h % 360) / 360;\n s = clamp(s);\n l = clamp(l);\n\n const m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;\n const m1 = l * 2 - m2;\n\n const hue = (value: number): number => {\n value = value < 0 ? value + 1 : (value > 1 ? value - 1 : value);\n if (value * 6 < 1) {\n return m1 + (m2 - m1) * value * 6;\n } else if (value * 2 < 1) {\n return m2;\n } else if (value * 3 < 2) {\n return m1 + (m2 - m1) * (2 / 3 - value) * 6;\n } else {\n return m1;\n }\n };\n\n return [\n hue(h + 1 / 3) * 255,\n hue(h) * 255,\n hue(h - 1 / 3) * 255,\n ];\n}\n","export function getUniqueCode(str: string): number {\n let code = 0;\n if (typeof str !== 'string') str = String(str);\n if (str && str.length) {\n for (let i = 0; i < str.length; ++i) {\n code += (i + 1) * str.charCodeAt(i);\n }\n }\n return code;\n}\n","import {Component, ComponentChildren, JSX} from 'preact';\nimport {classes, Icon} from '@zui/core';\nimport {contrastColor, hslToRgb} from '@zui/helpers/src/color-helper';\nimport {getUniqueCode} from '@zui/helpers/src/string-code';\nimport {AvatarOptions} from '../types/';\n\nfunction getAvatarText(text: string, maxTextLength: number) {\n if (/^[\\u4e00-\\u9fa5\\s]+$/.test(text)) {\n return text.length <= maxTextLength ? text : text.substring(text.length - maxTextLength);\n }\n if (/^[A-Za-z\\d\\s]+$/.test(text)) {\n return text[0].toUpperCase();\n }\n return text.length <= maxTextLength ? text : text.substring(0, maxTextLength);\n}\n\nexport class Avatar extends Component {\n render() {\n const {\n className,\n style,\n size = '',\n circle,\n rounded,\n background,\n foreColor,\n icon,\n text,\n code,\n maxTextLength = 2,\n src,\n hueDistance = 43,\n saturation = 0.4,\n lightness = 0.6,\n children,\n ...others\n } = this.props;\n\n const finalClass = ['avatar', className];\n const finalStyle = {...style, background, color: foreColor};\n\n let actualSize = 32;\n if (size) {\n if (typeof size === 'number') {\n finalStyle.width = `${size}px`;\n finalStyle.height = `${size}px`;\n finalStyle.fontSize = `${Math.max(12, Math.round(size / 2))}px`;\n actualSize = size;\n } else {\n finalClass.push(`size-${size}`);\n actualSize = ({xs: 20, sm: 24, lg: 48, xl: 80})[size];\n }\n }\n if (circle) {\n finalClass.push('circle');\n } else if (rounded) {\n if (typeof rounded === 'number') {\n finalStyle.borderRadius = `${rounded}px`;\n } else {\n finalClass.push(`rounded-${rounded}`);\n }\n }\n\n let content: ComponentChildren | undefined;\n if (src) {\n finalClass.push('has-img');\n content = {text};\n } else if (icon) {\n finalClass.push('has-icon');\n content = ;\n } else if (text?.length) {\n const displayText = getAvatarText(text, maxTextLength);\n const displayTextLength = displayText.length;\n finalClass.push('has-text', `has-text-${displayTextLength}`);\n\n if (background === undefined) {\n const avatarCode = code ?? text;\n const hue = (typeof avatarCode === 'number' ? avatarCode : getUniqueCode(avatarCode)) * hueDistance % 360;\n finalStyle.background = `hsl(${hue},${saturation * 100}%,${lightness * 100}%)`;\n if (!foreColor) {\n const rgb = hslToRgb(hue, saturation, lightness);\n finalStyle.color = contrastColor(rgb);\n }\n } else if (!foreColor && background) {\n finalStyle.color = contrastColor(background);\n }\n let textStyle: JSX.CSSProperties | undefined;\n if (actualSize && actualSize < (16 * displayTextLength)) {\n textStyle = {transform: `scale(${actualSize / (16 * displayTextLength)})`, whiteSpace: 'nowrap'};\n }\n\n content =

    {displayText}
    ;\n }\n\n return (\n \n {content}\n {children}\n
    \n );\n }\n}\n","import {$, mergeProps, removeUndefinedProps} from '@zui/core';\nimport {Button} from '@zui/button/src/component';\nimport {CommonList} from '@zui/common-list/src/component';\n\nimport type {RenderableProps} from 'preact';\nimport type {ButtonProps} from '@zui/button';\nimport type {Item} from '@zui/common-list';\nimport type {BtnGroupOptions} from '../types';\n\nexport class BtnGroup extends CommonList {\n static NAME = 'btn-group';\n\n /**\n * Root element default tag name, used for DOM rendering.\n */\n static TAG = 'nav';\n\n static ItemComponents = {\n ...CommonList.ItemComponents,\n default: Button,\n };\n\n /**\n * Item default common props, used for rendering for all item types.\n */\n static defaultItemProps: Partial = {\n component: undefined,\n };\n\n protected _shareBtnProps?: Partial;\n\n protected _isBtnType({type}: Item): boolean {\n return type === 'item' || type === 'dropdown';\n }\n\n protected _getItem(props: RenderableProps, item: Item, index: number): false | Item {\n if (!item.type) {\n item = $.extend({type: (item.dropdown || item.items) ? 'dropdown' : 'item'}, item);\n }\n let itemProps = super._getItem(props, item, index);\n if (!itemProps) {\n return itemProps;\n }\n if (this._isBtnType(itemProps)) {\n itemProps = mergeProps({}, this._shareBtnProps, itemProps);\n }\n return itemProps;\n }\n\n protected _beforeRender(props: RenderableProps): void | RenderableProps | undefined {\n const {btnProps, btnType, size} = props;\n\n this._shareBtnProps = mergeProps({}, btnProps, removeUndefinedProps({btnType, size}));\n }\n}\n","import {classes, $, mergeProps} from '@zui/core';\nimport {BtnGroup} from '@zui/btn-group/src/component/btn-group';\n\nimport type {Item} from '@zui/common-list';\nimport type {ToolbarOptions, ToolbarSetting} from '../types';\nimport type {ClassNameLike} from '@zui/core/src/helpers';\nimport type {Attributes, RenderableProps} from 'preact';\n\nexport class Toolbar extends BtnGroup {\n static NAME = 'toolbar';\n\n static defaultProps: Partial = {\n btnProps: {\n btnType: 'ghost',\n },\n };\n\n static ItemComponents = {\n ...BtnGroup.ItemComponents,\n btnGroup: BtnGroup,\n 'btn-group': BtnGroup,\n };\n\n protected _getProps(props: RenderableProps): Record {\n const {gap} = props;\n const propsMap = super._getProps(props);\n if (gap) {\n if (typeof gap === 'number') {\n propsMap.className = classes(propsMap.className as ClassNameLike, `gap-${gap}`);\n } else {\n propsMap.style = $.extend(propsMap.style || {}, {gap: gap});\n }\n }\n return propsMap;\n }\n\n protected _getItem(props: RenderableProps, item: Item, index: number): false | Item {\n const itemProps = super._getItem(props, item, index);\n if (!itemProps) {\n return itemProps;\n }\n const {type} = itemProps;\n const isBtnGroup = type === 'btn-group' || type === 'btnGroup';\n if (isBtnGroup) {\n itemProps.btnProps = mergeProps({}, this._shareBtnProps, itemProps.btnProps);\n }\n if ((isBtnGroup || type === 'dropdown') && !itemProps.relativeTarget) {\n itemProps.relativeTarget = props.relativeTarget;\n }\n return itemProps;\n }\n\n static render(this: unknown, setting: ToolbarSetting | undefined, args: T, defaultProps?: Partial & Attributes, thisObject?: unknown) {\n let toolbarOptions = typeof setting === 'function' ? setting.call(thisObject ?? this, ...args) : setting;\n if (!toolbarOptions) {\n return;\n }\n if (Array.isArray(toolbarOptions)) {\n toolbarOptions = {\n items: toolbarOptions,\n };\n }\n if (defaultProps) {\n toolbarOptions = mergeProps(defaultProps as Record, toolbarOptions);\n }\n return ;\n }\n}\n","import {CustomContent, HElement} from '@zui/core';\n\nimport type {ClassNameLike} from '@zui/core';\nimport type {ComponentChildren, RenderableProps} from 'preact';\nimport type {CheckboxProps, CheckboxState} from '../types';\n\nexport class Checkbox

    extends HElement {\n protected _controlled: boolean;\n\n constructor(props: P) {\n super(props);\n this.state = {\n checked: props.checked ?? props.defaultChecked ?? false,\n };\n this._controlled = props.checked !== undefined;\n }\n\n get checked() {\n return this._controlled ? this.props.checked : this.state.checked;\n }\n\n protected _getClassName(props: RenderableProps

    ): ClassNameLike {\n const {disabled, type = 'checkbox'} = props;\n const {checked} = this;\n return [props.className, type === 'switch' ? type : `${type}-primary`, {\n disabled,\n checked: checked === true,\n indeterminate: checked === 'indeterminate',\n }];\n }\n\n protected _handleChange = (event: Event) => {\n const {onChange} = this.props;\n const checked = (event.target as HTMLInputElement).indeterminate ? 'indeterminate' : (event.target as HTMLInputElement).checked;\n if (onChange) {\n onChange.call(this, event, checked);\n }\n if (!this._controlled) {\n this.setState({checked});\n }\n };\n\n protected _getChildren(props: RenderableProps

    ): ComponentChildren {\n const {name, type, value, id, label} = props;\n const {checked} = this;\n return [\n name ? (\n \n ) : null,\n (),\n ];\n }\n}\n","import {RadioProps} from '../types';\nimport {Checkbox} from './checkbox';\n\nexport class Radio

    extends Checkbox

    {\n static defaultProps: Partial = {\n type: 'radio',\n };\n}\n","import {SwitchProps} from '../types';\nimport {Checkbox} from './checkbox';\n\nexport class Switch

    extends Checkbox

    {\n static defaultProps: Partial = {\n type: 'switch',\n };\n}\n","import {toChildArray} from 'preact';\nimport {CustomContent, HElement, Icon, classes, mergeProps} from '@zui/core';\nimport {Avatar} from '@zui/avatar/src/component';\nimport {Toolbar} from '@zui/toolbar/src/component';\nimport {Checkbox} from '@zui/checkbox/src/component';\n\nimport type {ComponentChild, ComponentChildren, ComponentType, JSX, RenderableProps} from 'preact';\nimport type {ListitemProps} from '../types';\n\nexport class Listitem

    extends HElement {\n protected _renderLeading(props: RenderableProps

    ): ComponentChild[] {\n const {\n icon,\n avatar,\n toggleIcon,\n leading,\n leadingClass,\n checked,\n checkbox,\n multiline,\n } = props;\n const contents: ComponentChild[] = [];\n if (toggleIcon) {\n contents.push();\n }\n if (checked !== undefined) {\n contents.push();\n }\n if (icon) {\n contents.push();\n }\n if (avatar) {\n const avatarProps = typeof avatar === 'function' ? avatar.call(this, props) : avatar;\n if (avatarProps) {\n avatarProps.className = classes('item-avatar', avatarProps.className);\n contents.push();\n }\n }\n const customLeading = leading ? : null;\n if (customLeading) {\n contents.push(customLeading);\n }\n if (multiline) {\n return contents.length ? [\n

    {contents}
    ,\n ] : [];\n }\n return contents;\n }\n\n protected _renderContent(props: RenderableProps

    , linkRendered?: boolean): ComponentChild[] {\n const {\n textClass,\n titleClass,\n titleAttrs,\n subtitle,\n subtitleClass,\n url,\n target,\n content,\n contentClass,\n contentAttrs,\n } = props;\n const titleAsLink = url && !linkRendered;\n const TitleComponent = titleAsLink ? 'a' : 'div';\n let {title, text} = props;\n if (title === undefined) {\n title = text;\n text = null;\n }\n return [\n

    \n {title ? : null}\n {subtitle ?
    : null}\n {text ?
    {text}
    : null}\n {content ? : null}\n
    ,\n ];\n }\n\n protected _renderTrailing(props: RenderableProps

    ): ComponentChild[] {\n const {\n multiline,\n trailing,\n trailingClass,\n trailingIcon,\n actions,\n } = props;\n const contents: ComponentChild[] = [];\n if (trailingIcon) {\n contents.push();\n }\n if (actions) {\n contents.push(Toolbar.render(actions, [props], {key: 'actions', relativeTarget: props, size: 'sm'}, this));\n }\n const customTrailing = trailing ? : null;\n if (customTrailing) {\n contents.push(customTrailing);\n }\n if (multiline) {\n return contents.length ? [\n

    {contents}{customTrailing}
    ,\n ] : [];\n }\n return contents;\n }\n\n protected _render(props: RenderableProps

    , extraAttrs?: Record): ComponentChild {\n const {\n innerComponent,\n innerClass,\n innerAttrs,\n url,\n actions,\n target,\n active,\n disabled,\n divider,\n checked,\n multiline,\n title,\n subtitle,\n hint,\n selected,\n } = props;\n const ComponentName = innerComponent || ((url && !actions) ? 'a' : 'div');\n const asLink = ComponentName === 'a';\n const attrs = mergeProps({\n key: 'item',\n title: hint,\n className: classes('listitem', innerClass, {\n active,\n disabled,\n 'has-divider': divider,\n selected,\n checked,\n multiline: multiline ?? !!(title && subtitle),\n state: asLink && !disabled,\n }),\n }, asLink ? {href: url || 'javascript:;', target} : null, extraAttrs, innerAttrs);\n return (\n \n {this._renderLeading(props)}\n {this._renderContent(props, asLink)}\n {this._renderTrailing(props)}\n \n );\n }\n\n protected _onRender(component: ComponentType | keyof JSX.IntrinsicElements, componentProps: Record, children: ComponentChildren, _props: RenderableProps

    ): void | [component: ComponentType | keyof JSX.IntrinsicElements, componentProps: Record, children: ComponentChildren] {\n const innerAttrs = Object.keys(componentProps).reduce>((attrs, key) => {\n if (key.startsWith('data-')) {\n attrs[key] = componentProps[key];\n delete componentProps[key];\n }\n return attrs;\n }, {});\n return [component, componentProps, [this._render(_props, innerAttrs), ...toChildArray(children)]];\n }\n}\n","import {$, Computed, HElement, classes, fetchData, mergeProps, removeUndefinedProps} from '@zui/core';\nimport {CommonList} from '@zui/common-list/src/component';\nimport {Listitem} from './listitem';\n\nimport type {ComponentChild, ComponentChildren, RenderableProps} from 'preact';\nimport type {ClassNameLike, CustomContentType} from '@zui/core';\nimport type {Item, ItemKey} from '@zui/common-list';\nimport type {CheckedType} from '@zui/checkbox';\nimport type {ListProps, ListState, ListItemsSetting, ListItemsFetcher} from '../types';\n\nexport class List

    extends CommonList {\n static ItemComponents: typeof CommonList.ItemComponents = {\n ...CommonList.ItemComponents,\n default: HElement,\n item: Listitem,\n heading: Listitem,\n };\n\n static NAME = 'list';\n\n protected _loadedSetting?: ListItemsSetting;\n\n protected declare _hasIcons: boolean;\n\n protected declare _hasCheckbox: boolean;\n\n protected _activeSet = new Computed>(() => {\n const map = new Set();\n const {active} = this.props;\n if (Array.isArray(active)) {\n active.forEach(x => map.add(x));\n } else if (typeof active === 'string') {\n map.add(active);\n } else if (active) {\n Object.keys(active).forEach(x => active[x] && map.add(x));\n }\n const {activeMap} = this.state;\n Object.keys(activeMap).forEach(x => activeMap[x] ? map.add(x) : map.delete(x));\n return map;\n }, () => [this.state.activeMap, this.props.active]);\n\n constructor(props: P) {\n super(props);\n this.state = {\n checked: {},\n activeMap: {},\n } as S;\n }\n\n get namespace() {\n return `.zui.${this.constructor.NAME}.list_${this.gid}`;\n }\n\n componentDidMount() {\n this._afterRender(true);\n this.tryLoad();\n\n if (this.props.activeOnHover && !this.props.multipleActive) {\n $(this.element).on(`mouseenter${this.namespace}`, '[z-item]', (event) => {\n const info = this._getItemFromEvent(event);\n if (info && info.renderedItem.type === 'item' && !info.renderedItem.disabled && !this.isActive(info.key)) {\n this.toggleActive(info.key, true);\n }\n });\n }\n }\n\n componentDidUpdate(): void {\n this._afterRender(false);\n this.tryLoad();\n }\n\n componentWillUnmount(): void {\n $(this.element).off(this.namespace);\n this.props.beforeDestroy?.call(this);\n }\n\n setItems(items?: Item[], error?: Error) {\n const {onLoadFail} = this.props;\n this.setState({\n loading: false,\n items: items || [],\n loadFailed: error ? (typeof onLoadFail === 'function' ? (onLoadFail as (error: Error) => CustomContentType | undefined).call(this, error as Error) : onLoadFail) || String(error) : undefined,\n });\n }\n\n load(): void {\n const {items, onLoad} = this.props;\n this._loadedSetting = items;\n this.setState({loading: true, items: []}, async () => {\n try {\n const newItems = await fetchData(items as ListItemsFetcher, [this], {throws: true});\n this.setItems(onLoad?.call(this, newItems) || newItems);\n } catch (error) {\n this.setItems(undefined, error as Error);\n }\n });\n }\n\n tryLoad() {\n const {loading} = this.state;\n const {items} = this.props;\n if (loading || !items || Array.isArray(items) || items === this._loadedSetting) {\n return false;\n }\n this.load();\n return true;\n }\n\n isChecked(key: ItemKey, index?: number, defaultChecked: CheckedType = false): CheckedType {\n const item = (typeof index === 'number' ? this._items[index] : this.getItem(key)) || {};\n return this.state.checked[key] ?? item.checked ?? defaultChecked;\n }\n\n isAllChecked(): boolean {\n return this._renderedItems.every(({key}, index) => this.isChecked(key!, index) === true);\n }\n\n toggleAllChecked(checked?: boolean) {\n if (checked === undefined) {\n checked = !this.isAllChecked();\n }\n return this.toggleChecked(this._renderedItems.map(x => x.key!), checked);\n }\n\n async toggleChecked(keyOrChange: ItemKey | ItemKey[] | Record, checked?: boolean) {\n let change: Record;\n if (Array.isArray(keyOrChange)) {\n if (!keyOrChange.length) {\n return;\n }\n if (checked === undefined) {\n checked = !this.isChecked(keyOrChange[0]);\n }\n change = keyOrChange.reduce>((map, key) => {\n map[key] = checked!;\n return map;\n }, {});\n } else if (typeof keyOrChange === 'object') {\n change = keyOrChange;\n } else {\n const isChecked = this.isChecked(keyOrChange);\n if (checked === undefined) {\n checked = !isChecked;\n }\n change = {[keyOrChange]: checked!};\n }\n if (!Object.keys(change).length) {\n return;\n }\n\n await this.changeState(prevState => ({\n checked: {\n ...prevState.checked,\n ...change,\n },\n } as Partial), () => {\n const checkState = this.state.checked;\n this.props.onCheck?.call(this, change, Object.keys(checkState).filter(x => checkState[x] === true));\n });\n }\n\n getChecks() {\n return this._renderedItems.reduce((checks, {key}, index) => {\n if (key !== undefined && this.isChecked(key, index) === true) {\n checks.push(key);\n }\n return checks;\n }, []);\n }\n\n isActive(key: string | Item) {\n if (typeof key === 'object') {\n key = key.key!;\n }\n return this._activeSet.cache.has(key);\n }\n\n getActiveKeys() {\n return [...this._activeSet.value];\n }\n\n getActiveKey() {\n return this.getActiveKeys()[0];\n }\n\n async toggleActive(keys: string | string[], active?: boolean) {\n if (typeof keys === 'string') {\n keys = [keys];\n }\n if (!keys.length) {\n return;\n }\n active = active ?? !this.isActive(keys[0]);\n await this.changeState(prevState => {\n const activeMap = this.props.multipleActive ? (keys as string[]).reduce>((map, key) => {\n map[key] = active!;\n return map;\n }, {...prevState.activeMap}) : {[keys[0]]: active!};\n return {activeMap} as Partial;\n }, () => {\n this.props.onActive?.call(this, keys as string[], active!);\n });\n }\n\n getNextItem(key: string | undefined, condition?: (item: Item, index: number) => boolean, step = 1, items: Item[] | undefined = undefined): Item | undefined {\n items = items || this._renderedItems;\n const count = items.length;\n if (key === undefined) {\n return items[step ? 0 : count - 1];\n }\n let index = items.findIndex(x => x.key === key);\n if (index < 0 || count < 2) {\n return items[step ? 0 : count - 1];\n }\n let checkCount = 0;\n condition = condition || ((x) => x.type === 'item' && !x.disabled);\n while (checkCount < count) {\n index = (index + step + count) % count;\n const nextItem = items[index];\n if (nextItem && !nextItem.disabled && !nextItem.hidden && condition.call(this, nextItem, index)) {\n return nextItem;\n }\n checkCount++;\n }\n }\n\n getPrevItem(key: string | undefined, condition?: (item: Item, index: number) => boolean): Item | undefined {\n return this.getNextItem(key, condition, -1);\n }\n\n activeNext(condition?: (item: Item, index: number) => boolean, step = 1) {\n const nextItem = this.getNextItem(this.getActiveKey(), condition, step);\n if (nextItem) {\n this.toggleActive(nextItem.key!);\n }\n }\n\n activePrev(condition?: (item: Item, index: number) => boolean) {\n this.activeNext(condition, -1);\n }\n\n protected _afterRender(firstRender: boolean) {\n this.props.afterRender?.call(this, firstRender);\n }\n\n protected _getItems(props: RenderableProps

    ): Item[] {\n const {items} = props;\n const {items: stateItems} = this.state;\n return stateItems || (Array.isArray(items) ? items : []);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected _getRenderedItem(props: RenderableProps

    , renderedItem: Item, index: number): Item {\n const {divider, multiline} = props;\n renderedItem = mergeProps({}, removeUndefinedProps({\n divider,\n multiline,\n }), renderedItem);\n\n const {itemName, name} = this;\n renderedItem.innerClass = [itemName ? `${itemName}-inner${name ? ` ${name}-${renderedItem.type}-inner` : ''}` : '', renderedItem.innerClass];\n\n if (renderedItem.type === 'item') {\n const {checkbox} = props;\n if (checkbox) {\n renderedItem.checked = this.isChecked(renderedItem.key!, index, renderedItem.checked as CheckedType);\n if (typeof checkbox === 'object') {\n renderedItem.checkbox = renderedItem.checkbox ? $.extend({}, checkbox, renderedItem.checkbox) : checkbox;\n }\n if (props.selectOnChecked && renderedItem.checked === true) {\n renderedItem.selected = true;\n }\n }\n if (renderedItem.active === undefined && this.isActive(renderedItem)) {\n renderedItem.active = true;\n }\n }\n\n if (renderedItem.icon) {\n this._hasIcons = true;\n }\n if (renderedItem.checked !== undefined) {\n this._hasCheckbox = true;\n }\n\n return renderedItem;\n }\n\n protected _getItem(props: RenderableProps

    , item: Item, index: number): Item | false {\n const renderedItem = super._getItem(props, item, index);\n if (!renderedItem) {\n return renderedItem;\n }\n return this._getRenderedItem(props, renderedItem, index);\n }\n\n protected _renderItem(props: RenderableProps

    , item: Item, index: number): ComponentChildren {\n if (item.type === 'item' && this._hasIcons && item.icon === undefined) {\n item.icon = 'EMPTY';\n }\n return super._renderItem(props, item, index);\n }\n\n protected _handleClick(event: MouseEvent) {\n const info = super._handleClick(event);\n let {checkOnClick} = this.props;\n if (checkOnClick === 'any') {\n checkOnClick = '.item-checkbox,.item-content,.item-icon';\n } else if (checkOnClick === true) {\n checkOnClick = '.item-checkbox';\n }\n if (checkOnClick && !info?.renderedItem.disabled && info && (event.target as HTMLElement).closest(checkOnClick)) {\n this.toggleChecked(info.key);\n event.stopPropagation();\n return;\n }\n return info;\n }\n\n protected _getClassName(props: RenderableProps

    ): ClassNameLike {\n const {loading, loadFailed} = this.state;\n return [super._getClassName(props), loading ? 'loading' : (loadFailed ? 'is-load-failed' : '')];\n }\n\n protected _getProps(props: RenderableProps

    ): Record {\n const {className, ...others} = super._getProps(props);\n return {\n ...others,\n className: classes(className as ClassNameLike, this._hasIcons ? 'has-icons' : '', this._hasCheckbox ? 'has-checkbox' : ''),\n };\n }\n\n protected _getChildren(props: RenderableProps

    ): ComponentChildren {\n this._hasIcons = false;\n this._hasCheckbox = false;\n this._activeSet.compute();\n const children = super._getChildren(props) as ComponentChild[];\n const {loadFailed} = this.state;\n if (loadFailed) {\n children.push(loadFailed);\n }\n return children;\n }\n}\n","/** Store type. */\nexport type StoreType = 'local' | 'session';\n\nconst STR_PREFIX = '```ZUI_STR\\n';\n\n/**\n * Store for using localStorage and sessionStorage.\n */\nexport class Store {\n protected _type: StoreType;\n\n protected _name: string;\n\n protected _id: string;\n\n protected _storage: Storage;\n\n protected _altStorage?: Store;\n\n /**\n * Create new store instance.\n * @param id Store profile ID.\n * @param type Store type.\n */\n constructor(id: string = '', type: StoreType = 'local') {\n this._type = type;\n this._id = id;\n this._name = `ZUI_STORE:${this._id}`;\n this._storage = type === 'local' ? localStorage : sessionStorage;\n }\n\n /**\n * Get store type.\n */\n get type(): StoreType {\n return this._type;\n }\n\n /**\n * Get session type store instance.\n */\n get session(): Store {\n if (this.type === 'session') {\n return this;\n }\n if (!this._altStorage) {\n this._altStorage = new Store(this._id, 'session');\n }\n return this._altStorage;\n }\n\n protected _getKey(key: string): string {\n return `${this._name}:${key}`;\n }\n\n /**\n * Switch store profile.\n *\n * @param id Store profile ID.\n */\n switch(id: string) {\n this._id = id;\n this._name = `ZUI_STORE:${this._id}`;\n }\n\n /**\n * Get value from store.\n *\n * @param key Key to get\n * @returns Value of key or undefined if key is not found\n */\n get(key: string): T | undefined;\n\n /**\n * Get value from store, if key is not found, return defaultValue.\n *\n * @param key Key to get.\n * @param defaultValue Default value to return if key is not found.\n */\n get(key: string, defaultValue: T): T;\n\n /**\n * Get value from store.\n *\n * @param key Key to get.\n * @param defaultValue Default value to return if key is not found.\n * @returns Value of key or defaultValue if key is not found.\n */\n get(key: string, defaultValue?: T): T | undefined {\n const value = this._storage.getItem(this._getKey(key));\n if (typeof value === 'string') {\n if (value.startsWith(STR_PREFIX)) {\n return value.substring(STR_PREFIX.length) as T;\n }\n try {\n return JSON.parse(value);\n // eslint-disable-next-line no-empty\n } catch (_error) {}\n }\n return (value as T) ?? defaultValue;\n }\n\n /**\n * Set key-value pair in store.\n *\n * @param key Key to set.\n * @param value Value to set.\n */\n set(key: string, value: unknown): void {\n if (value === undefined || value === null) {\n return this.remove(key);\n }\n this._storage.setItem(this._getKey(key), typeof value === 'string' ? `${STR_PREFIX}${value}` : JSON.stringify(value));\n }\n\n /**\n * Remove key-value pair from store.\n *\n * @param key Key to remove.\n */\n remove(key: string): void {\n this._storage.removeItem(this._getKey(key));\n }\n\n /**\n * Iterate all key-value pairs in store.\n *\n * @param callback Callback function to call for each key-value pair in the store.\n */\n each(callback: (name: string, value: unknown) => void): void {\n for (let i = 0; i < this._storage.length; i++) {\n const key = this._storage.key(i);\n if (key?.startsWith(this._name)) {\n const value = this._storage.getItem(key);\n if (typeof value === 'string') {\n callback(key.substring(this._name.length + 1), JSON.parse(value));\n }\n }\n }\n }\n\n /**\n * Get all key values in store.\n *\n * @returns All key-value pairs in the store.\n */\n getAll(): Record {\n const result: Record = {};\n this.each((key, value) => {\n result[key] = value;\n });\n return result;\n }\n}\n","import {Store, StoreType} from './store';\n\nexport type {Store} from './store';\n\nexport const store = new Store('DEFAULT');\n\nfunction createStore(name?: string, type: StoreType = 'local') {\n return new Store(name, type);\n}\n\nObject.assign(store, {create: createStore});\n","import {Icon, classes, mergeProps, $} from '@zui/core';\nimport {store} from '@zui/store';\nimport {List} from './list';\nimport '@zui/css-icons/src/icons/caret.css';\n\nimport type {ComponentChild, ComponentChildren, RenderableProps} from 'preact';\nimport type {ClassNameLike} from '@zui/core';\nimport type {Item, ItemKey} from '@zui/common-list';\nimport type {CheckedType} from '@zui/checkbox';\nimport type {ListItemsSetting, NestedItem, NestedListProps, NestedListState} from '../types';\n\nexport type MouseEventInfo = {\n index: number;\n item: NestedItem;\n renderedItem: NestedItem;\n element: HTMLElement;\n target: HTMLElement;\n event: MouseEvent;\n key: ItemKey;\n parentKey?: ItemKey;\n hover?: boolean;\n keyPath: string;\n};\n\nexport type ItemInfo = {\n key: string;\n level: number;\n keyPath: string;\n parentKey?: string;\n parent?: ItemInfo;\n children: ItemInfo[];\n data: Item;\n};\n\nfunction forEachChild(item: ItemInfo, callback: (child: ItemInfo) => void) {\n const {children} = item;\n if (!children.length) {\n return;\n }\n children.forEach(child => {\n callback(child);\n forEachChild(child, callback);\n });\n}\n\nfunction forEachParent(item: ItemInfo, callback: (parent: ItemInfo) => void) {\n let parent = item.parent;\n while (parent) {\n callback(parent);\n parent = parent.parent;\n }\n}\n\nfunction parentKeys(keyPath: string) {\n return keyPath.split(':').reduce((keys, item, index) => {\n keys.push(index ? keys[index - 1] + ':' + item : item);\n return keys;\n }, []);\n}\n\n\nfunction reduceNestedItems(items: Item[], itemKey: string | undefined, reducer: (previousValue: T, info: ItemInfo) => T, initialValue: T, level = 0, parent?: ItemInfo): T {\n return items.reduce((currentValue, item, index) => {\n if (!item) {\n return currentValue;\n }\n const key = String((itemKey ? item[itemKey] : item.key) ?? (item.key ?? index));\n const keyPath = parent ? `${parent.keyPath}:${key}` : key;\n const itemInfo = {\n key,\n level,\n keyPath,\n parentKey: parent?.keyPath,\n parent: parent,\n data: item,\n children: [],\n };\n if (parent) {\n parent.children.push(itemInfo);\n }\n currentValue = reducer(currentValue, itemInfo);\n if (Array.isArray(item.items)) {\n return reduceNestedItems(item.items as Item[], itemKey, reducer, currentValue, level + 1, itemInfo);\n }\n return currentValue;\n }, initialValue);\n}\n\nfunction initItemMap(items: Item[], itemKey: string | undefined, map: Map = new Map()) {\n return reduceNestedItems(items, itemKey, (currentMap, info) => {\n currentMap.set(info.keyPath, info);\n return currentMap;\n }, map);\n}\n\nexport class NestedList

    extends List {\n static defaultProps: Partial = {\n ...List.defaultProps,\n defaultNestedShow: false,\n level: 0,\n indent: 20,\n } as Partial;\n\n static inheritNestedProps = ['component', 'name', 'itemName', 'itemKey', 'indent', 'hover', 'divider', 'multiline', 'toggleIcons', 'nestedToggle', 'accordion', 'itemRender', 'itemProps', 'beforeRenderItem', 'onToggle', 'checkbox', 'getItem', 'checkOnClick', 'selectOnChecked', 'checkedState', 'onClickItem', 'activeOnHover', 'multipleActive', 'onActive'];\n\n protected declare _hasNestedItems: boolean;\n\n protected declare _needHandleHover: boolean;\n\n protected declare _storeID: string;\n\n protected declare _renderedItemMap: Map;\n\n protected declare _itemMap?: Map;\n\n protected declare _needInitChecks?: boolean;\n\n protected declare _hoverInfo?: {timer: number, info: MouseEventInfo};\n\n constructor(props: P) {\n super(props);\n const {defaultNestedShow, preserve, nestedShow} = props;\n $.extend(\n this.state,\n typeof defaultNestedShow === 'boolean' ? {defaultShow: defaultNestedShow, nestedShow: {}} : {nestedShow: defaultNestedShow || {}},\n nestedShow !== undefined ? {nestedShow} : null,\n );\n if (preserve && nestedShow === undefined) {\n this._storeID = `${this.constructor.NAME}:${preserve}:state`;\n const storeState = store.get(this._storeID) as NestedListState;\n if (storeState) {\n (this.state as NestedListState).nestedShow = storeState.nestedShow;\n }\n }\n\n if (!props.level) {\n const nestedState = this.state.nestedShow;\n if (nestedState) {\n Object.keys(nestedState).forEach(key => {\n if (!nestedState[key]) {\n return;\n }\n parentKeys(key).forEach(parentKey => {\n nestedState[parentKey] = true;\n });\n });\n }\n this._needInitChecks = true;\n }\n\n this._renderedItemMap = new Map();\n this._handleHover = this._handleHover.bind(this);\n this._handleClick = this._handleClick.bind(this);\n this._beforeRenderNestedItem = this._beforeRenderNestedItem.bind(this);\n this._handleNestedToggle = this._handleNestedToggle.bind(this);\n this._handleNestedCheck = this._handleNestedCheck.bind(this);\n this._preserveState = this._preserveState.bind(this);\n }\n\n get isRoot() {\n return !this.props.level;\n }\n\n get nestedShow() {\n return this.props.nestedShow ?? this.state.nestedShow ?? false;\n }\n\n get isHoverTrigger() {\n return this.props.nestedTrigger === 'hover';\n }\n\n setItems(items?: Item[] | undefined, error?: Error | undefined): void {\n if (this.isRoot) {\n this._needInitChecks = true;\n }\n super.setItems(items, error);\n }\n\n getItemMap() {\n if (!this._itemMap) {\n this._itemMap = initItemMap(this._items, this.props.itemKey);\n }\n return this._itemMap;\n }\n\n getRenderedItem(keyPath: string): Item | undefined {\n return this._renderedItemMap.get(keyPath);\n }\n\n getItem(keyPath: string) {\n if (this._itemMap) {\n return this._itemMap.get(keyPath)?.data;\n }\n const renderedItem = this.getRenderedItem(keyPath);\n return renderedItem ? (renderedItem._item as Item) : super.getItem(keyPath);\n }\n\n isExpanded(keyPath: string) {\n const {nestedShow} = this;\n if (typeof nestedShow === 'boolean') {\n return nestedShow;\n }\n return !!(nestedShow[keyPath] ?? this.state.defaultShow);\n }\n\n async toggle(keyPath: string, toggle?: boolean) {\n const isExpanded = this.isExpanded(keyPath);\n if (toggle === isExpanded) {\n return;\n }\n if (toggle === undefined) {\n toggle = !isExpanded;\n }\n const {nestedShow, onToggle, accordion} = this.props;\n if (onToggle && onToggle.call(this, keyPath, toggle) === false) {\n return;\n }\n if (nestedShow !== undefined) {\n return;\n }\n await this.changeState(prevState => {\n let newNestedShow: Record = {\n ...prevState.nestedShow,\n [keyPath]: toggle!,\n };\n if (toggle && accordion) {\n let parentKey = `${keyPath.split(':').slice(0, -1).join(':')}`;\n if (parentKey.length) {\n parentKey += ':';\n }\n Object.keys(newNestedShow).forEach(key => {\n if (key !== keyPath && key.startsWith(parentKey)) {\n newNestedShow[key] = false;\n }\n });\n }\n newNestedShow = toggle ? parentKeys(keyPath).reduce>((map, key) => {\n map[key] = toggle!;\n return map;\n }, newNestedShow) : newNestedShow;\n if (this.isHoverTrigger && !toggle) {\n Object.keys(newNestedShow).forEach(key => {\n if (!newNestedShow[key] || !key.startsWith(`${keyPath}:`)) {\n return;\n }\n parentKeys(keyPath).forEach(k => {\n newNestedShow[k] = true;\n });\n });\n }\n return {\n nestedShow: newNestedShow,\n } as Partial;\n }, this._preserveState);\n }\n\n toggleAll(show: boolean) {\n if (this.props.nestedShow !== undefined) {\n return;\n }\n return this.setState({nestedShow: {}, defaultShow: show}, this._preserveState);\n }\n\n getChecks() {\n return Array.from(this.getItemMap().values()).reduce((checks, {keyPath, data}) => {\n const checkState = this.state.checked[keyPath];\n if ((checkState === true || (data.checked && checkState !== false)) === true) {\n checks.push(keyPath);\n }\n return checks;\n }, []);\n }\n\n isChecked(key: ItemKey, index?: number, defaultChecked: CheckedType = false): CheckedType {\n const item = (typeof index === 'number' ? this._items[index] : this.getItem(key)) || {};\n if (this.isRoot) {\n return this.state.checked[key] ?? (item.checked as CheckedType) ?? defaultChecked;\n }\n return this.props.checkedState![`${this.props.parentKey}:${key}`] ?? (item.checked as CheckedType) ?? defaultChecked;\n }\n\n async toggleChecked(keyOrChange: ItemKey | ItemKey[] | Record, checked?: CheckedType) {\n let change: Record;\n if (Array.isArray(keyOrChange)) {\n if (!keyOrChange.length) {\n return;\n }\n if (checked === undefined) {\n checked = !this.isChecked(keyOrChange[0]);\n }\n change = keyOrChange.reduce>((map, key) => {\n map[key] = checked!;\n return map;\n }, {});\n } else if (typeof keyOrChange === 'object') {\n change = keyOrChange;\n } else {\n if (checked === undefined) {\n checked = !this.isChecked(keyOrChange);\n }\n change = {[keyOrChange]: checked!};\n }\n if (!Object.keys(change).length) {\n return;\n }\n if (this.isRoot) {\n const map = this.getItemMap();\n await this.changeState(({checked: prevChecked}) => {\n const isChecked = (item: ItemInfo) => {\n return change[item.keyPath] ?? prevChecked[item.keyPath] ?? item.data.checked ?? false;\n };\n Object.keys(change).forEach(key => {\n checked = change[key];\n const item = map.get(key);\n if (!item) {\n return;\n }\n forEachChild(item, child => {\n if (isChecked(child) !== checked) {\n change[child.keyPath] = checked!;\n }\n });\n forEachParent(item, parent => {\n const {children} = parent;\n const checkedCount = children.reduce((count, child) => {\n if (isChecked(child)) {\n count++;\n }\n return count;\n }, 0);\n\n change[parent.keyPath] = checkedCount === children.length ? true : (checkedCount ? 'indeterminate' : false);\n });\n });\n return {\n checked: {\n ...prevChecked,\n ...change,\n },\n } as Partial;\n }, () => {\n const checkState = this.state.checked;\n this.props.onCheck?.call(this, change, Object.keys(checkState).filter(x => checkState[x] === true));\n });\n return;\n }\n\n const {parentKey, onCheck} = this.props;\n const nestedChange = Object.keys(change).reduce>((map, key) => {\n map[`${parentKey !== undefined ? `${parentKey}:` : ''}${key}`] = change[key];\n return map;\n }, {});\n onCheck!.call(this, nestedChange, []);\n }\n\n getKeyPath(key: string) {\n if (this.isRoot) {\n return key;\n }\n const parentKey = this.props.parentKey!;\n if (!key.startsWith(parentKey + ':')) {\n return `${parentKey}:${key}`;\n }\n return key;\n }\n\n isActive(keyPath: string | Item) {\n if (typeof keyPath === 'object') {\n const keyOrKeyPath = (keyPath._keyPath ?? keyPath.key) as (string | undefined);\n if (keyOrKeyPath === undefined) {\n return false;\n }\n keyPath = keyOrKeyPath;\n }\n return this._activeSet.cache.has(this.getKeyPath(keyPath));\n }\n\n async toggleActive(keys: string | string[], active?: boolean) {\n if (typeof keys === 'string') {\n keys = [keys];\n }\n keys = keys.map(key => this.getKeyPath(key));\n if (this.isRoot) {\n await super.toggleActive(keys, active);\n if (this.props.toggleOnActive) {\n (keys as string[]).forEach(key => {\n if (this.isActive(key) && !this.isExpanded(key)) {\n this.toggle(key, true);\n }\n });\n }\n return;\n }\n\n this.props.onActive!.call(this, keys, active ?? !this.isActive(keys[0]));\n }\n\n activeNext(condition?: (item: Item, index: number) => boolean, step = 1) {\n const nextItem = this.getNextItem(this.getActiveKey(), condition, step);\n if (nextItem) {\n this.toggleActive(nextItem._keyPath as string);\n }\n }\n\n getNextItem(key: string | undefined, condition?: (item: Item, index: number) => boolean, step = 1, items: Item[] | undefined = undefined): Item | undefined {\n items = items || reduceNestedItems(this._items, this.props.itemKey, (list, info) => {\n if (info.data.disabled) {\n return list;\n }\n list.push({\n _keyPath: info.keyPath,\n type: 'item',\n ...info.data,\n ...this._renderedItemMap.get(info.keyPath),\n key: info.keyPath,\n });\n return list;\n }, []);\n return super.getNextItem(key, condition, step, items);\n }\n\n protected _afterRender(firstRender: boolean): void {\n super._afterRender(firstRender);\n if (this._needInitChecks) {\n const initChecks: Record = {};\n const itemMap = this.getItemMap();\n itemMap.forEach(item => {\n if (item.data.checked !== undefined) {\n initChecks[item.keyPath] = item.data.checked as CheckedType;\n }\n });\n this.toggleChecked(initChecks);\n this._needInitChecks = false;\n }\n }\n\n protected _preserveState() {\n if (this._storeID) {\n store.set(this._storeID, {nestedShow: this.state.nestedShow});\n }\n }\n\n protected _getClassName(props: RenderableProps

    ): ClassNameLike {\n return [super._getClassName(props), 'is-nested', props.level ? 'is-nested-sub' : 'is-nested-root'];\n }\n\n protected _getNestedProps(props: RenderableProps

    , items: ListItemsSetting, item: NestedItem, expanded: boolean): NestedListProps {\n const {\n parentKey,\n level = 0,\n } = props;\n const {isRoot} = this;\n return mergeProps(((this.constructor as typeof NestedList).inheritNestedProps.reduce>((propMap, key) => {\n propMap[key] = props[key as keyof P];\n return propMap;\n }, {})), {\n key: item.key,\n level: level + 1,\n className: `is-nested-${expanded ? 'expanded' : 'collapsed'}`,\n items,\n parentKey: parentKey ? `${parentKey}:${item.key}` : item.key,\n nestedShow: this.nestedShow,\n defaultNestedShow: this.state.defaultShow,\n checkedState: props.checkedState || this.state.checked,\n onCheck: isRoot ? this._handleNestedCheck : props.onCheck,\n onToggle: isRoot ? this._handleNestedToggle : props.onToggle,\n beforeRenderItem: isRoot ? this._beforeRenderNestedItem : props.beforeRenderItem,\n active: isRoot ? this.getActiveKeys() : props.active,\n onActive: isRoot ? this.toggleActive.bind(this) : props.onActive,\n }, item.listProps);\n }\n\n protected _renderNestedList(props: RenderableProps

    , items: ListItemsSetting, item: NestedItem, expanded: boolean): ComponentChildren {\n if (!expanded && !props.renderCollapsedList) {\n return;\n }\n const nestedListProps = this._getNestedProps(props, items, item, expanded);\n const NestedListComponent = this.constructor as typeof NestedList;\n return ;\n }\n\n protected _renderNestedToggle(props: RenderableProps

    , isExpanded: boolean | undefined): ComponentChild {\n let toggleIcon: ComponentChild;\n let toggleClass = '';\n const {toggleIcons = {}} = props;\n if (typeof isExpanded === 'boolean') {\n toggleIcon = isExpanded ? (toggleIcons.expanded || ) : (toggleIcons.collapsed || );\n toggleClass = `state is-${isExpanded ? 'expanded' : 'collapsed'}`;\n } else {\n toggleIcon = ;\n toggleClass = 'is-empty';\n }\n return {toggleIcon};\n }\n\n protected _getItems(props: RenderableProps

    ): Item[] {\n const items = super._getItems(props);\n if (this.isRoot && items !== this._items) {\n this._itemMap = undefined;\n }\n return items;\n }\n\n protected _getItem(props: RenderableProps

    , item: NestedItem, index: number): NestedItem | false {\n const nestedItem = super._getItem(props, item, index) ?? item;\n if (!nestedItem) {\n return nestedItem;\n }\n const {parentKey} = props;\n const key = nestedItem.key!;\n const keyPath = `${parentKey !== undefined ? `${parentKey}:` : ''}${key}`;\n if (nestedItem.items) {\n const expanded = nestedItem.expanded ?? this.isExpanded(keyPath);\n mergeProps(nestedItem, {\n expanded: expanded,\n className: ['is-nested', `is-nested-${expanded ? 'show' : 'hide'}`],\n });\n this._hasNestedItems = true;\n }\n return mergeProps(nestedItem, {\n _level: props.level,\n _keyPath: keyPath,\n parentKey,\n });\n }\n\n protected _beforeRenderNestedItem(item: NestedItem): NestedItem | false {\n this._renderedItemMap.set(item._keyPath as string, item);\n return item;\n }\n\n protected _renderItem(props: RenderableProps

    , renderedItem: NestedItem, index: number): ComponentChildren {\n if (this._hasNestedItems && renderedItem.type === 'item' && renderedItem.toggleIcon === undefined) {\n renderedItem.toggleIcon = this._renderNestedToggle(props, renderedItem.expanded as boolean | undefined);\n }\n const nestedListContent = renderedItem.items ? this._renderNestedList(props, renderedItem.items, renderedItem, renderedItem.expanded as boolean) : null;\n renderedItem = mergeProps(renderedItem, {\n 'z-parent': renderedItem.parentKey,\n 'z-key-path': renderedItem._keyPath,\n }, this._needHandleHover ? {\n onMouseEnter: this._handleHover,\n onMouseLeave: this._handleHover,\n } : null, nestedListContent ? {children: nestedListContent} : null);\n this._renderedItemMap.set(renderedItem._keyPath as string, renderedItem);\n return super._renderItem(props, renderedItem, index);\n }\n\n protected _getItemFromEvent(event: MouseEvent, target?: HTMLElement): MouseEventInfo | undefined {\n const info = super._getItemFromEvent(event, target) as MouseEventInfo;\n if (!info) {\n return;\n }\n if (event.type === 'mouseenter' || event.type === 'mouseleave') {\n info.hover = event.type === 'mouseenter';\n }\n const {parentKey} = this.props;\n return {...info, parentKey, keyPath: `${parentKey !== undefined ? `${parentKey}:` : ''}${info.key}`, target: target || event.target as HTMLElement};\n }\n\n protected _toggleFromEvent(info: MouseEventInfo) {\n const {item, hover, event, keyPath, target} = info;\n const {nestedToggle} = this.props;\n const {isHoverTrigger} = this;\n if (!item.items || event.defaultPrevented || (isHoverTrigger && hover === undefined) || (!isHoverTrigger && event.type !== 'click') || target.closest('.not-nested-toggle') || (nestedToggle && !item.disabled && !target.closest(nestedToggle)) || (!nestedToggle && !item.disabled && target.closest('a,.btn,.item-checkbox,.open-url') && !target.closest('.nested-toggle-icon,.item-icon'))) {\n return info;\n }\n const toggle = typeof hover === 'boolean' ? hover : undefined;\n this.toggle(keyPath, toggle);\n event.preventDefault();\n }\n\n protected _handleNestedToggle(key: ItemKey, toggle: boolean) {\n this.toggle(key, toggle);\n }\n\n protected _handleClick(event: MouseEvent) {\n const info = super._handleClick(event);\n if (info) {\n return this._toggleFromEvent(info as MouseEventInfo);\n }\n return info;\n }\n\n protected _handleHover(event: MouseEvent) {\n const info = this._getItemFromEvent(event);\n if (!info) {\n return;\n }\n this.props.onHoverItem?.call(this, info as {hover: boolean, item: NestedItem, index: number, event: MouseEvent});\n if (!this.isHoverTrigger) {\n return;\n }\n const lastHover = this._hoverInfo;\n if (lastHover) {\n if (lastHover.info.keyPath === info.keyPath) {\n clearTimeout(lastHover.timer);\n } else {\n this._toggleFromEvent(lastHover.info);\n }\n }\n this._hoverInfo = {\n info,\n timer: window.setTimeout(() => {\n this._hoverInfo = undefined;\n this._toggleFromEvent(info);\n }, info.hover ? 0 : 200),\n };\n }\n\n protected _handleNestedCheck(change: Record) {\n this.toggleChecked(change);\n }\n\n protected _getProps(props: RenderableProps

    ): Record {\n const {level = 0, indent = 20, parentKey} = props;\n const finalProps = mergeProps(super._getProps(props), {\n 'z-level': level,\n 'z-parent-key': parentKey,\n style: {'--list-nested-indent': `${level * indent}px`, '--list-indent': `${indent}px`},\n className: this._hasNestedItems ? 'has-nested-items' : 'no-nested-items',\n });\n finalProps.className = classes(finalProps.className as ClassNameLike);\n return finalProps;\n }\n\n protected _beforeRender(props: RenderableProps

    ): void | RenderableProps

    | undefined {\n this._renderedItemMap.clear();\n this._hasIcons = false;\n this._hasNestedItems = !this.isRoot;\n this._needHandleHover = !!(props.onHoverItem || this.isHoverTrigger);\n return super._beforeRender(props);\n }\n}\n","import {CustomContent, classes, mergeProps} from '@zui/core';\nimport {NestedList, Listitem} from '@zui/list/src/component';\n\nimport type {Attributes, ComponentChildren, RenderableProps} from 'preact';\nimport type {ClassNameLike} from '@zui/core';\nimport type {NestedListState} from '@zui/list';\nimport type {MenuOptions, MenuSetting} from '../types';\n\nexport class Menu extends NestedList {\n static NAME = 'menu';\n\n static TAG = 'menu';\n\n static inheritNestedProps = [...NestedList.inheritNestedProps, 'compact'];\n\n static ItemComponents: typeof NestedList.ItemComponents = {\n ...NestedList.ItemComponents,\n item: [Listitem, {innerComponent: 'a'}],\n };\n\n static defaultProps: Partial = {\n ...NestedList.defaultProps,\n scrollbarHover: true,\n };\n\n protected _getClassName(props: RenderableProps): ClassNameLike {\n return [super._getClassName(props), this._hasNestedItems ? 'menu-nested' : '', props.className, props.wrap ? {'scrollbar-thin': props.scrollbarThin, 'scrollbar-hover': props.scrollbarHover} : {popup: props.popup, compact: props.compact}];\n }\n\n protected _getWrapClass(props: RenderableProps): ClassNameLike {\n return ['menu-wrapper', props.wrapClass, {popup: props.popup, compact: props.compact}];\n }\n\n protected _getWrapperProps(props: RenderableProps): Record {\n const {wrapAttrs, height, maxHeight} = props;\n const wrapProps = mergeProps({}, wrapAttrs, (height || maxHeight) ? {style: {height, maxHeight}} : null);\n wrapProps.className = classes(this._getWrapClass(props), wrapProps.className as ClassNameLike);\n return wrapProps;\n }\n\n protected _renderWrapperHeader(props: RenderableProps): ComponentChildren {\n return ;\n }\n\n protected _renderWrapperFooter(props: RenderableProps): ComponentChildren {\n return ;\n }\n\n render(props: RenderableProps) {\n const menuView = super.render(props);\n if (props.wrap) {\n return (\n

    \n {this._renderWrapperHeader(props)}\n {menuView}\n {this._renderWrapperFooter(props)}\n \n );\n }\n return super.render(props);\n }\n\n static render(this: unknown, setting: MenuSetting | undefined, args: T, defaultProps?: Partial & Attributes, thisObject?: unknown) {\n let menuOptions = typeof setting === 'function' ? setting.call(thisObject ?? this, ...args) : setting;\n if (!menuOptions) {\n return;\n }\n if (Array.isArray(menuOptions)) {\n menuOptions = {\n items: menuOptions,\n };\n }\n if (defaultProps) {\n menuOptions = mergeProps(defaultProps as Record, menuOptions);\n }\n return ;\n }\n}\n","import {Component, createRef} from 'preact';\nimport {$, classes, getHotkeysMap, Icon, nextGid} from '@zui/core';\nimport '../style';\n\nimport type {ComponentChildren, RenderableProps} from 'preact';\nimport type {SearchBoxOptions, SearchBoxState} from '../types';\n\nexport class SearchBox extends Component {\n static defaultProps: Partial = {\n clearIcon: true,\n searchIcon: true,\n delay: 500,\n hotkeys: true,\n };\n\n protected _gid: string;\n\n protected _input = createRef();\n\n protected _timer = 0;\n\n protected _hotkeysScope?: string;\n\n constructor(props: SearchBoxOptions) {\n super(props);\n this.state = {focus: false, value: props.defaultValue || ''};\n this._gid = props.id || `search-box-${nextGid()}`;\n }\n\n componentDidMount(): void {\n const {hotkeys} = this.props;\n if (hotkeys) {\n const hotkeysMap = getHotkeysMap(hotkeys, {\n clear: {\n keys: 'Escape',\n handler: (event) => {\n this.clear(event);\n },\n },\n enter: {\n keys: 'Enter',\n handler: (event) => {\n this.props.onEnter?.(this.state.value, event);\n },\n },\n });\n if (hotkeysMap) {\n this._hotkeysScope = `SearchBox_${this._gid}`;\n $(this.input).hotkeys(hotkeysMap, {\n scope: this._hotkeysScope,\n event: 'keydown',\n });\n }\n }\n }\n\n componentWillUnmount(): void {\n if (this._hotkeysScope) {\n $(this.input).unbindHotkeys(this._hotkeysScope);\n }\n }\n\n get id() {\n return this._gid;\n }\n\n get input() {\n return this._input.current;\n }\n\n focus() {\n this.input?.focus();\n }\n\n blur() {\n this.input?.blur();\n }\n\n clear(event?: Event) {\n const oldValue = this.state.value;\n this.setState({value: ''}, () => {\n const {onChange, onClear} = this.props;\n onClear?.(event);\n this.focus();\n if (oldValue.trim() !== '') {\n onChange?.('', event);\n }\n });\n }\n\n _handleClearBtnClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.clear(event);\n };\n\n _handleChange = (event: Event) => {\n const oldValue = this.state.value;\n const value = (event.target as HTMLInputElement).value;\n const {onChange, delay} = this.props;\n this.setState({value}, () => {\n if (!onChange || oldValue === value) {\n return;\n }\n if (delay) {\n this._clearTimer();\n this._timer = window.setTimeout(() => {\n onChange(value, event);\n this._timer = 0;\n }, delay);\n } else {\n onChange(value, event);\n }\n });\n };\n\n _handleFocus = (event: FocusEvent) => {\n const focus = event.type === 'focus';\n this.setState({focus}, () => {\n const callback = focus ? this.props.onFocus : this.props.onBlur;\n callback?.(event);\n });\n };\n\n _clearTimer() {\n if (this._timer) {\n clearTimeout(this._timer);\n }\n this._timer = 0;\n }\n\n render(props: RenderableProps, state: Readonly) {\n const {style, className, rootClass, rootStyle, readonly, disabled, circle, placeholder, mergeIcon, searchIcon, clearIcon, value: controlledValue, compact, prefixClass, suffixClass} = props;\n const {focus, value} = state;\n const {id} = this;\n const finalValue = controlledValue ?? value;\n const empty = typeof finalValue !== 'string' || !finalValue.trim().length;\n let prefixView: ComponentChildren;\n let suffixView: ComponentChildren;\n let searchIconView: ComponentChildren;\n if (searchIcon) {\n searchIconView = searchIcon === true ? : ;\n }\n if (!mergeIcon && searchIcon) {\n prefixView = ;\n }\n if (clearIcon && !empty) {\n suffixView = (\n \n {clearIcon === true ? : }\n \n );\n } else if (mergeIcon && searchIcon) {\n suffixView = searchIconView;\n }\n if (suffixView) {\n suffixView = (\n \n );\n }\n\n return (\n
    \n {prefixView}\n \n {suffixView}\n
    \n );\n }\n}\n","import {$, classes} from '@zui/core';\nimport {SearchBox} from '@zui/search-box/src/components';\nimport {Menu} from './menu';\n\nimport {type ComponentChild, type ComponentChildren, type RenderableProps} from 'preact';\nimport type {ClassNameLike} from '@zui/core';\nimport type {Item, ItemKey} from '@zui/common-list';\nimport type {ListItemsSetting, NestedItem, NestedListItem, NestedListProps} from '@zui/list';\nimport type {SearchBoxOptions} from '@zui/search-box';\nimport type {SearchMenuOptions, SearchMenuState} from '../types';\n\nexport class SearchMenu extends Menu {\n static inheritNestedProps = [...Menu.inheritNestedProps, 'isItemMatch', 'search', 'underlineKeys'];\n\n static defaultProps: Partial = {\n ...Menu.defaultProps,\n defaultNestedShow: true,\n wrap: true,\n };\n\n protected declare _searchKeys: string[];\n\n protected declare _matchedParents: Set;\n\n protected declare _showCount: number;\n\n constructor(props: T) {\n super(props);\n (this.state as SearchMenuState).search = props.search ?? props.defaultSearch;\n this._searchKeys = (this.constructor as typeof SearchMenu).getSearchKeys(this.state.search);\n this._isNestedItemMatch = this._isNestedItemMatch.bind(this);\n }\n\n componentWillUpdate(nextProps: Readonly): void {\n if (this.isRoot) {\n if (nextProps.search !== undefined && nextProps.search !== this.props.search) {\n this._searchKeys = (this.constructor as typeof SearchMenu).getSearchKeys(nextProps.search);\n }\n }\n }\n\n componentDidMount(): void {\n super.componentDidMount();\n this._updateMatchedParents();\n }\n\n componentDidUpdate(): void {\n super.componentDidUpdate();\n this._updateMatchedParents();\n }\n\n isExpanded(keyPath: string): boolean {\n if (this.props.expandOnSearch && this._searchKeys.length) {\n return true;\n }\n return super.isExpanded(keyPath);\n }\n\n protected _updateMatchedParents(): void {\n if (!this.isRoot) {\n return;\n }\n const $element = $(this.element);\n const $matchedChildren = $element.find('.item.is-nested.is-not-match').filter((_, element) => this._matchedParents.has(element.getAttribute('z-key-path') || '')).addClass('has-match-child');\n $element.parent().toggleClass('no-match-child', !!this._searchKeys?.length && !$matchedChildren.length && !$element.children('.item').not('.is-not-match').length);\n }\n\n protected _handleSearchChange = (search: string) => {\n const searchKeys = (this.constructor as typeof SearchMenu).getSearchKeys(search);\n this._searchKeys = searchKeys;\n this.setState({search: searchKeys.join(' ')});\n };\n\n protected _isItemMatch(props: RenderableProps, item: NestedItem, index: number, parentKey: ItemKey | undefined) {\n const {isItemMatch} = props;\n const isMatch = isItemMatch ? isItemMatch.call(this, item, this._searchKeys, index, parentKey) : (this.constructor as typeof SearchMenu).isItemMatch(item, this._searchKeys, props.searchProps);\n if (this.isRoot && isMatch && parentKey !== undefined) {\n let key = '';\n String(parentKey).split(':').forEach(x => {\n key += `${key.length ? ':' : ''}${x}`;\n this._matchedParents.add(key);\n });\n }\n return isMatch;\n }\n\n protected _isNestedItemMatch(item: NestedItem, _searchKeys: string[], index: number, parentKey: ItemKey | undefined): boolean {\n return this._isItemMatch(this.props, item, index, parentKey);\n }\n\n protected _getNestedProps(props: RenderableProps, items: ListItemsSetting, item: NestedItem, expanded: boolean): NestedListProps {\n const nestedProps = super._getNestedProps(props, items, item, expanded) as SearchMenuOptions;\n if (this.isRoot) {\n nestedProps.isItemMatch = this._isNestedItemMatch;\n nestedProps.search = this._searchKeys.join(' ');\n }\n return nestedProps;\n }\n\n protected _getItem(props: RenderableProps, item: NestedItem, index: number): NestedItem | false {\n const finalItem = super._getItem(props, item, index);\n if (!finalItem) {\n return finalItem;\n }\n if (this.isRoot && this.props.limit && this._showCount >= this.props.limit) {\n return false;\n }\n finalItem.hidden = !this._isItemMatch(props, item, index, props.parentKey);\n if (!finalItem.hidden) {\n this._showCount++;\n }\n return finalItem;\n }\n\n protected _renderItem(props: RenderableProps, item: Item, index: number): ComponentChildren {\n item.className = [item.className, item.hidden ? 'is-not-match' : ''];\n if (props.underlineKeys && this._searchKeys.length) {\n ['text', 'title', 'subtitle', 'content'].forEach(key => {\n if (typeof item[key] === 'string') {\n item[key] = (this.constructor as typeof SearchMenu).underlineKeys(this._searchKeys, [item[key] as string]);\n }\n });\n }\n return super._renderItem(props, item, index);\n }\n\n protected _getWrapClass(props: RenderableProps): ClassNameLike {\n const isSearchMode = this.isRoot && this._searchKeys.length;\n return classes(super._getWrapClass(props), 'search-menu', props.searchBox ? `search-menu-on-${props.searchPlacement || 'top'}` : '', isSearchMode ? 'is-search-mode' : '', isSearchMode && props.expandOnSearch ? 'no-toggle-on-search' : '');\n }\n\n protected _renderSearchBox(props: RenderableProps): ComponentChildren {\n const {searchBox} = props;\n if (!searchBox || !this.isRoot) {\n return null;\n }\n const searchOptions: SearchBoxOptions = {\n compact: true,\n onChange: this._handleSearchChange,\n };\n if (typeof searchBox === 'object') {\n $.extend(searchOptions, searchBox);\n }\n if (props.search !== undefined) {\n searchOptions.value = this._searchKeys.join(' ');\n searchOptions.disabled = true;\n }\n return ;\n }\n\n protected _renderWrapperHeader(props: RenderableProps): ComponentChildren {\n const hasHeader = props.header;\n const hasTopSearchBox = this.isRoot && props.searchBox && props.searchPlacement !== 'bottom';\n const {noMatchHint} = props;\n if (!hasHeader && !hasTopSearchBox && !noMatchHint) {\n return null;\n }\n return [\n noMatchHint ?
    {noMatchHint}
    : null,\n (hasHeader || hasTopSearchBox) ? (
    \n {hasHeader ? super._renderWrapperHeader(props) : null}\n {hasTopSearchBox ? this._renderSearchBox(props) : null}\n
    ) : null,\n ];\n }\n\n protected _renderWrapperFooter(props: RenderableProps): ComponentChildren {\n const hasFooter = props.footer;\n const hasBottomSearchBox = this.isRoot && props.searchBox && props.searchPlacement === 'bottom';\n if (!hasFooter && !hasBottomSearchBox) {\n return null;\n }\n return (\n
    \n {hasFooter ? super._renderWrapperFooter(props) : null}\n {this._renderSearchBox(props)}\n
    \n );\n }\n\n protected _beforeRender(props: RenderableProps): void | RenderableProps | undefined {\n if (this.isRoot) {\n this._matchedParents = new Set();\n this._showCount = 0;\n }\n return super._beforeRender(props);\n }\n\n /**\n * Check whether item is matched.\n *\n * @param item Item to match.\n * @param searchKeys Search keys.\n * @returns Whether item is matched.\n */\n static isItemMatch(item: Item, searchKeys: string[], searchProps = ['keys', 'text', 'title', 'subtitle']) {\n if (!searchKeys.length) {\n return true;\n }\n return searchKeys.every(searchKey => searchProps.some(propName => {\n const propValue = item[propName];\n return typeof propValue === 'string' && propValue.length && propValue.toLowerCase().includes(searchKey);\n }));\n }\n\n /**\n * Convert search string to search keys.\n *\n * @param search Search string.\n * @returns Search keys array.\n */\n static getSearchKeys(search: string = ''): string[] {\n return $.unique((search).toLowerCase().split(' ').filter(x => x.length)) as string[];\n }\n\n static underlineKeys(searchKeys: string[], text: string[], className = 'is-match-keys'): ComponentChild[] {\n return searchKeys.reduce((result, key) => {\n return [...result].reduce((list, span) => {\n if (typeof span !== 'string') {\n list.push(span);\n return list;\n }\n const parts = span.toLowerCase().split(key);\n if (parts.length === 1) {\n list.push(span);\n return list;\n }\n let start = 0;\n parts.forEach((part, index) => {\n if (index) {\n list.push({span.substring(start, start + key.length)});\n start += key.length;\n }\n list.push(span.substring(start, start + part.length));\n start += part.length;\n });\n return list;\n }, []);\n }, text);\n }\n}\n","import {ComponentFromReact} from '@zui/core';\nimport {Menu as MenuReact} from '../component';\n\nimport type {MenuOptions} from '../types';\n\nexport class Menu extends ComponentFromReact> {\n static NAME = 'Menu';\n\n static Component = MenuReact;\n\n static replace = MenuReact.TAG;\n}\n","import {ComponentFromReact} from '@zui/core';\nimport {SearchMenu as MenuReact} from '../component';\n\nimport type {SearchMenuOptions} from '../types';\n\nexport class SearchMenu extends ComponentFromReact {\n static NAME = 'SearchMenu';\n\n static Component = MenuReact;\n\n static replace = MenuReact.TAG;\n}\n","import {registerReactComponent} from '@zui/core';\nimport * as components from './index';\n\nregisterReactComponent(components);\n","import {isValidElement, ComponentChildren} from 'preact';\nimport {classes, CustomContent, Icon} from '@zui/core';\nimport {Button} from '@zui/button/src/component/button';\nimport type {ButtonProps} from '@zui/button';\nimport '@zui/css-icons/src/icons/close.css';\nimport {AlertOptions} from '../types';\nimport {Toolbar} from '@zui/toolbar/src/component';\n\nexport function Alert({\n className,\n style,\n actions,\n heading,\n content,\n contentClass,\n children,\n close,\n onClose,\n icon,\n iconClass,\n ...others\n}: AlertOptions) {\n let closeButton: ComponentChildren;\n if (close === true) {\n closeButton = ;\n } else if (isValidElement(close)) {\n closeButton = close;\n } else if (typeof close === 'object') {\n closeButton =