@keyfunc/keybricks-ds 2.3.1 → 2.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/DEPLOY.md +11 -5
  2. package/DESIGN.md +50 -1
  3. package/INTEGRATION.md +33 -6
  4. package/_adherence.oxlintrc.json +35 -13
  5. package/assets/logos/datasource/dat.png +0 -0
  6. package/assets/logos/datasource/excel.png +0 -0
  7. package/assets/logos/datasource/ftp.png +0 -0
  8. package/assets/logos/datasource/hierarchy.png +0 -0
  9. package/assets/logos/datasource/hive.png +0 -0
  10. package/assets/logos/datasource/json.png +0 -0
  11. package/assets/logos/datasource/mariadb.png +0 -0
  12. package/assets/logos/datasource/mongodb.png +0 -0
  13. package/assets/logos/datasource/mysql.png +0 -0
  14. package/assets/logos/datasource/odbc.png +0 -0
  15. package/assets/logos/datasource/oracle.png +0 -0
  16. package/assets/logos/datasource/postgresql.png +0 -0
  17. package/assets/logos/datasource/rest-api.png +0 -0
  18. package/assets/logos/datasource/sap-alt.png +0 -0
  19. package/assets/logos/datasource/sap.png +0 -0
  20. package/assets/logos/datasource/soap.png +0 -0
  21. package/assets/logos/datasource/sql-server.png +0 -0
  22. package/components/_cards/app-chrome.card.html +33 -21
  23. package/components/_cards/context-menu.card.html +7 -2
  24. package/components/_cards/icons-0-usage.card.html +88 -0
  25. package/components/_cards/icons-4-datasource.card.html +5 -0
  26. package/components/_cards/relative-time-picker.card.html +45 -0
  27. package/components/_cards/segmented-control.card.html +9 -3
  28. package/components/_cards/smart-table.card.html +4 -1
  29. package/components/_cards/tabs.card.html +5 -2
  30. package/components/_shared/src-data.js +1 -1
  31. package/components/_shared/src-feedback.js +1 -1
  32. package/components/_shared/src-forms.js +1 -1
  33. package/components/_shared/src-navigation.js +1 -1
  34. package/components/_shared/src-tabs.js +1 -1
  35. package/components/_shared/view-source.js +12 -12
  36. package/components/_vue/index.mjs +5 -1
  37. package/components/data/SmartTable.d.ts +7 -2
  38. package/components/data/SmartTable.jsx +12 -4
  39. package/components/data/SmartTable.vue +12 -4
  40. package/components/feedback/ContextMenu.d.ts +3 -2
  41. package/components/feedback/ContextMenu.jsx +8 -4
  42. package/components/feedback/ContextMenu.vue +9 -6
  43. package/components/feedback/Menu.d.ts +1 -1
  44. package/components/feedback/feedback.prompt.md +1 -1
  45. package/components/forms/RelativeTimePicker.d.ts +39 -0
  46. package/components/forms/RelativeTimePicker.jsx +89 -0
  47. package/components/forms/RelativeTimePicker.prompt.md +72 -0
  48. package/components/forms/RelativeTimePicker.vue +81 -0
  49. package/components/forms/forms.prompt.md +3 -0
  50. package/components/forms/relative-time.d.ts +12 -0
  51. package/components/forms/relative-time.js +90 -0
  52. package/components/index.d.ts +2 -0
  53. package/components/index.js +5 -3
  54. package/components/navigation/SidePanel.d.ts +22 -0
  55. package/components/navigation/SidePanel.jsx +23 -0
  56. package/components/navigation/SidePanel.vue +21 -0
  57. package/components/navigation/Sidebar.d.ts +23 -7
  58. package/components/navigation/Sidebar.jsx +38 -37
  59. package/components/navigation/Sidebar.vue +40 -39
  60. package/components/navigation/TopBar.d.ts +28 -3
  61. package/components/navigation/TopBar.jsx +54 -7
  62. package/components/navigation/TopBar.vue +26 -8
  63. package/components/navigation/UserMenu.vue +27 -0
  64. package/components/navigation/chrome-tones.js +22 -0
  65. package/components/navigation/nav-model.js +21 -18
  66. package/components/navigation/navigation.prompt.md +2 -0
  67. package/components/tabs/CountBadge.vue +12 -0
  68. package/components/tabs/PanelTabs.vue +7 -3
  69. package/components/tabs/PillTabs.vue +7 -3
  70. package/components/tabs/SegmentedControl.d.ts +4 -2
  71. package/components/tabs/SegmentedControl.jsx +5 -3
  72. package/components/tabs/SegmentedControl.vue +4 -3
  73. package/components/tabs/Tabs.d.ts +14 -4
  74. package/components/tabs/Tabs.jsx +35 -20
  75. package/components/tabs/Tabs.vue +7 -3
  76. package/components/tabs/tabs.prompt.md +2 -2
  77. package/package.json +2 -2
  78. package/readme.md +6 -5
  79. package/readme.zh-CN.md +4 -3
  80. package/tokens/layout.css +4 -3
  81. package/tokens/tokens.d.ts +2 -0
  82. package/tokens/tokens.js +4 -1
  83. package/tokens/tokens.json +8 -1
package/components/_cards/icons-4-datasource.card.html ADDED
@@ -0,0 +1,5 @@
1
+ <!-- @dsCard group="Icons" viewport="700x660" name="Data Source Logos" subtitle="17 data-source logo images in assets/logos/datasource/" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <style>body{margin:0;background:var(--bg-surface);padding:24px;box-sizing:border-box;font-family:var(--font-sans)}.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}.t{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border:1px solid var(--border-card);border-radius:var(--radius-lg)}.t img{width:64px;height:64px;border-radius:var(--radius-lg);display:block}.n{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-heading);text-align:center}.f{font-size:11px;line-height:16px;color:var(--text-secondary)}</style></head>
5
+ <body><div class="g"><div class="t"><img src="../../assets/logos/datasource/oracle.png" alt="Oracle"><span class="n">Oracle</span><span class="f">oracle.png</span></div><div class="t"><img src="../../assets/logos/datasource/sap.png" alt="SAP"><span class="n">SAP</span><span class="f">sap.png</span></div><div class="t"><img src="../../assets/logos/datasource/sap-alt.png" alt="SAP (alternate)"><span class="n">SAP (alternate)</span><span class="f">sap-alt.png</span></div><div class="t"><img src="../../assets/logos/datasource/sql-server.png" alt="SQL Server"><span class="n">SQL Server</span><span class="f">sql-server.png</span></div><div class="t"><img src="../../assets/logos/datasource/mysql.png" alt="MySQL"><span class="n">MySQL</span><span class="f">mysql.png</span></div><div class="t"><img src="../../assets/logos/datasource/mariadb.png" alt="MariaDB"><span class="n">MariaDB</span><span class="f">mariadb.png</span></div><div class="t"><img src="../../assets/logos/datasource/postgresql.png" alt="PostgreSQL"><span class="n">PostgreSQL</span><span class="f">postgresql.png</span></div><div class="t"><img src="../../assets/logos/datasource/mongodb.png" alt="MongoDB"><span class="n">MongoDB</span><span class="f">mongodb.png</span></div><div class="t"><img src="../../assets/logos/datasource/hive.png" alt="Hive"><span class="n">Hive</span><span class="f">hive.png</span></div><div class="t"><img src="../../assets/logos/datasource/odbc.png" alt="ODBC"><span class="n">ODBC</span><span class="f">odbc.png</span></div><div class="t"><img src="../../assets/logos/datasource/rest-api.png" alt="REST API"><span class="n">REST API</span><span class="f">rest-api.png</span></div><div class="t"><img src="../../assets/logos/datasource/soap.png" alt="SOAP"><span class="n">SOAP</span><span class="f">soap.png</span></div><div class="t"><img src="../../assets/logos/datasource/ftp.png" alt="FTP"><span class="n">FTP</span><span class="f">ftp.png</span></div><div class="t"><img src="../../assets/logos/datasource/excel.png" alt="Excel"><span class="n">Excel</span><span class="f">excel.png</span></div><div class="t"><img src="../../assets/logos/datasource/json.png" alt="JSON"><span class="n">JSON</span><span class="f">json.png</span></div><div class="t"><img src="../../assets/logos/datasource/dat.png" alt="DAT"><span class="n">DAT</span><span class="f">dat.png</span></div><div class="t"><img src="../../assets/logos/datasource/hierarchy.png" alt="Hierarchy"><span class="n">Hierarchy</span><span class="f">hierarchy.png</span></div></div></body></html>
package/components/_cards/relative-time-picker.card.html ADDED
@@ -0,0 +1,45 @@
1
+ <!-- @dsCard group="Components" viewport="700x720" name="Relative Time Picker" subtitle="Filter by how long ago · md / sm / lg · unlimited · disabled · localised labels" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/card-kit.js"></script>
9
+ <script src="../_shared/view-source.js"></script>
10
+ <style>body{margin:0;background:var(--bg-surface)}</style></head>
11
+ <body><div id="root"></div>
12
+ <script type="text/babel">
13
+ const { RelativeTimePicker, Field, Button, SearchInput } = window.KeybricksDesignSystem_71231a;
14
+ const ZH = { title: "相对时间", amount: "数量", unit: "单位", preview: "起始时间", unlimited: "不限时间", Minute: "分钟前", Hour: "小时前", Day: "天前", Week: "周前", Month: "个月前" };
15
+ function Sheet() {
16
+ const [a, setA] = React.useState({ amount: 1, unit: "Hour" });
17
+ const [b, setB] = React.useState({ amount: 7, unit: "Day" });
18
+ const [c, setC] = React.useState({ amount: 0, unit: "None" });
19
+ const [z, setZ] = React.useState({ amount: 30, unit: "Minute" });
20
+ const [last, setLast] = React.useState(null);
21
+ const on = (set) => (v, d) => { set(v); setLast(d ? d.toLocaleString() : "null (any time)"); };
22
+ return <div className="kb-sheet">
23
+ <KBSec title="Trigger — md · sm · lg" note="A field-shaped trigger at the tier height; click it to open the dialog (amount + unit, live “From” preview). Omit size to inherit the region's tier.">
24
+ <KBRow k="md"><div style={{ width: 220 }}><RelativeTimePicker value={a} onChange={on(setA)} /></div></KBRow>
25
+ <KBRow k="sm"><div data-size="sm" style={{ width: 200 }}><RelativeTimePicker value={b} onChange={on(setB)} /></div></KBRow>
26
+ <KBRow k="lg"><div data-size="lg" style={{ width: 240 }}><RelativeTimePicker value={a} onChange={on(setA)} /></div></KBRow>
27
+ </KBSec>
28
+ <KBSec title="States" note="Unlimited reads “Any time” and resolves to null. allowUnlimited={false} removes that option; 0 still means unlimited for legacy filters.">
29
+ <KBRow k="unlimited"><div style={{ width: 220 }}><RelativeTimePicker value={c} onChange={on(setC)} /></div></KBRow>
30
+ <KBRow k="no unlimited"><div style={{ width: 220 }}><RelativeTimePicker value={b} onChange={on(setB)} allowUnlimited={false} /></div></KBRow>
31
+ <KBRow k="disabled"><div style={{ width: 220 }}><RelativeTimePicker value={a} disabled /></div></KBRow>
32
+ </KBSec>
33
+ <KBSec title="In a filter bar · localised" note="labels overrides every string; the dialog copies the region's tier, language and theme. onChange(value, date) only fires on edits, never on mount.">
34
+ <KBRow k="zh-CN" style={{ display: "block" }}><div lang="zh-CN" style={{ display: "flex", alignItems: "flex-end", gap: "var(--group-gap)" }}>
35
+ <Field label="时间范围" style={{ width: 200 }}><RelativeTimePicker value={z} onChange={on(setZ)} labels={ZH} locale="zh-CN" /></Field>
36
+ <Field label="关键字" style={{ width: 200 }}><SearchInput placeholder="搜索日志" /></Field>
37
+ <Button variant="outline">查询</Button>
38
+ </div></KBRow>
39
+ <div className="note">Last change resolved to: <code>{last || "—"}</code></div>
40
+ </KBSec>
41
+ </div>;
42
+ }
43
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet />);
44
+ if (window.KBViewSource) setTimeout(function () { KBViewSource.mount("#root", [{ "name": "RelativeTimePicker.jsx", "path": "../forms/RelativeTimePicker.jsx" }, { "name": "relative-time.js", "path": "../forms/relative-time.js", "vue": "../forms/relative-time.js", "vueName": "relative-time.js" }]); }, 0);
45
+ </script></body></html>
package/components/_cards/segmented-control.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x870" name="Segmented Control" subtitle="Mutually exclusive views in one inset track — md/sm · icons · icon-only · disabled option · full width · ViewToggle" -->
1
+ <!-- @dsCard group="Components" viewport="700x1260" name="Segmented Control" subtitle="Mutually exclusive views in one inset track — md/sm · counts · icons · icon-only · disabled option · full width · ViewToggle" -->
2
2
  <!DOCTYPE html>
3
3
  <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -14,11 +14,17 @@ const { SegmentedControl, ViewToggle } = window.KeybricksDesignSystem_71231a;
14
14
  const { KBTiers: Tiers } = window;
15
15
  const Case = ({ k, children }) => <div className="case"><span className="k">{k}</span><div className="v">{children}</div></div>;
16
16
  function Sheet() {
17
- const [a, setA] = React.useState("Grid"), [b, setB] = React.useState("Last 30 days"), [c, setC] = React.useState("Table"), [d, setD] = React.useState("Actual"), [e, setE] = React.useState("Month"), [f, setF] = React.useState("Overview"), [v, setV] = React.useState("grid");
17
+ const [n, setN] = React.useState("Submission"), [a, setA] = React.useState("Grid"), [b, setB] = React.useState("Last 30 days"), [c, setC] = React.useState("Table"), [d, setD] = React.useState("Actual"), [e, setE] = React.useState("Month"), [f, setF] = React.useState("Overview"), [v, setV] = React.useState("grid");
18
18
  return <div>
19
19
  <div className="kb-h kb-h-gap">Sizes</div>
20
20
  <Tiers stack style={{gridTemplateColumns:"56px repeat(2,max-content)",columnGap:16}} init={(l)=>l==="en"?"Last 30 days":"近 30 天"} render={(t,l,v,set)=><SegmentedControl options={l==="en"?["Last 7 days","Last 30 days","Quarter"]:["近 7 天","近 30 天","本季度"]} value={v} onChange={set}/>}/>
21
21
 
22
+ <div className="kb-h kb-h-gap">Counts</div>
23
+ <Case k="count on an option"><SegmentedControl options={[{ label: "Submission", count: 3 }, { label: "Review", count: 12 }, { label: "Approved", count: 0 }]} value={n} onChange={setN} /></Case>
24
+ <Case k="showZero · muted 0"><SegmentedControl showZero options={[{ label: "Submission", count: 3 }, { label: "Review", count: 12 }, { label: "Approved", count: 0 }]} value={n} onChange={setN} /></Case>
25
+ <Case k="sizes"><div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>{["sm", "md", "lg"].map(s => <SegmentedControl key={s} size={s} options={[{ label: "Submission", count: 3 }, { label: "Review", count: 12 }, { label: "Approved" }]} value={n} onChange={setN} />)}</div></Case>
26
+ <div className="note">The badge sits 6px right of the label: <code>--count-h</code> tall (sm 16 · md 18 · lg 20), 6px sides, full radius, 12px tabular figures. The fill is the alpha wash <code>--neutral-alpha-8</code>, so it shows on the white active segment and the #fafafa track alike; the text tells them apart — <code>--text-heading</code> selected, <code>--text-body</code> unselected. A count of 0 or none hides it; <code>showZero</code> (on the control or the option) draws a muted 0. The selected value is still matched by label.</div>
27
+
22
28
  <div className="kb-h kb-h-gap">With icons</div>
23
29
  <Case k="icon + label"><SegmentedControl options={[{ label: "List", icon: "list" }, { label: "Grid", icon: "layout-grid" }]} value={a} onChange={setA} /></Case>
24
30
  <Case k="icon only · aria label"><SegmentedControl options={[{ icon: "table", label: "Table" }, { icon: "chart-column", label: "Chart" }, { icon: "code", label: "JSON" }]} iconOnly value={c} onChange={setC} /></Case>
@@ -36,5 +42,5 @@ function Sheet() {
36
42
  </div>;
37
43
  }
38
44
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
39
- if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"SegmentedControl.jsx","path":"../tabs/SegmentedControl.jsx"},{"name":"ViewToggle.jsx","path":"../tabs/ViewToggle.jsx"}]); }, 0);
45
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"SegmentedControl.jsx","path":"../tabs/SegmentedControl.jsx"},{"name":"Tabs.jsx (CountBadge)","path":"../tabs/Tabs.jsx","vue":"../tabs/CountBadge.vue","vueName":"CountBadge.vue"},{"name":"ViewToggle.jsx","path":"../tabs/ViewToggle.jsx"}]); }, 0);
40
46
  </script></body></html>
package/components/_cards/smart-table.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x500" name="Smart Table (Database Grid)" subtitle="Notion/Airtable-style grid — typed fields · hue pills · aggregates · + New" -->
1
+ <!-- @dsCard group="Components" viewport="700x900" name="Smart Table (Database Grid)" subtitle="Default and compact row density · Notion/Airtable-style grid — typed fields · hue pills · aggregates · + New" -->
2
2
  <!DOCTYPE html>
3
3
  <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -30,6 +30,9 @@ const rows=[
30
30
  ];
31
31
  function Sheet(){return <div>
32
32
  <SmartTable fields={fields} rows={rows} title="Launch tracker"/>
33
+ <div className="hint" style={{marginBottom:20}}>Default density — rows are the tier's bar height (36px at sm). The toolbar's <b>Row height</b> menu switches between Default and Compact.</div>
34
+ <SmartTable fields={fields} rows={rows.slice(0,4)} title="Launch tracker — compact" defaultDensity="compact"/>
35
+ <div className="hint" style={{marginBottom:20}}>Compact density — rows are the tier's control height (28px at sm, the same as a Spreadsheet cell) with the Spreadsheet's 8px cell padding (the same as sm's <code>--cell-px</code>, so here only the height changes); header and footer follow. <code>density="compact"</code> controls it, <code>defaultDensity</code> just seeds it.</div>
33
36
  <div className="hint">Typed fields with per-type header icons; select/multi-select render theme-aware hue pills; hover a row number for the expand affordance; double-click text/number/date cells to edit; “+ New” appends a row; the footer aggregates per column (COUNT / SUM / AVG). Scrolls horizontally like Airtable when fields overflow.</div>
34
37
  </div>;}
35
38
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
package/components/_cards/tabs.card.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Components" viewport="700x550" name="Tabs" subtitle="Underline tabs · panel tabs · pill filter tabs" -->
1
+ <!-- @dsCard group="Components" viewport="700x810" name="Tabs" subtitle="Underline tabs · panel tabs · pill filter tabs · counts on every kind" -->
2
2
  <!DOCTYPE html>
3
3
  <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../../tokens/hover.css"><link rel="stylesheet" href="../_shared/card-kit.css">
4
4
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
@@ -20,9 +20,12 @@ function Sheet(){
20
20
  <div><span className="lbl">Tabs — underline, page level</span><Tabs tabs={["Import","Export"]} active={a} onChange={setA}/></div>
21
21
  <div><span className="lbl">PanelTabs — inside a detail panel</span><PanelTabs tabs={["Node Info","Calc Rules","Output Fields","SQL Preview"]} active={b} onChange={setB}/></div>
22
22
  <div><span className="lbl">PillTabs — filter/status tabs</span><PillTabs tabs={["For Review","To be Submitted","For Approval"]} active={c} onChange={setC}/></div>
23
+ <div><span className="lbl">Tabs with counts — the badge stays neutral under the blue active tab</span><Tabs tabs={[{label:"Import",count:3},{label:"Export"}]} active={a} onChange={setA}/></div>
24
+ <div><span className="lbl">PanelTabs with counts</span><PanelTabs tabs={[{label:"Node Info"},{label:"Calc Rules",count:4},{label:"Output Fields",count:12},{label:"SQL Preview"}]} active={b} onChange={setB}/></div>
25
+ <div><span className="lbl">PillTabs with counts — {"{ label, count }"}; 0 hidden unless showZero</span><PillTabs tabs={[{label:"For Review",count:8},{label:"To be Submitted",count:3},{label:"For Approval",count:0}]} active={c} onChange={setC}/></div>
23
26
  <div style={{gridColumn:"1 / -1",display:"flex",flexDirection:"column",gap:8}}><span className="lbl">Size tiers — data-size on the region, the control inherits it</span><Tiers align="flex-start" heads={{sm:"sm · bar 36 · pill 28",md:"md · bar 40 · pill 32",lg:"lg · bar 48 · pill 40"}} init={(l)=>({tab:l==="en"?"Import":"导入",pill:l==="en"?"Review":"待审核"})} render={(t,l,v,set)=><div style={{display:"flex",flexDirection:"column",gap:8}}><Tabs tabs={l==="en"?["Import","Export"]:["导入","导出"]} active={v.tab} onChange={(x)=>set({...v,tab:x})}/><PillTabs tabs={l==="en"?["Review","Done"]:["待审核","已完成"]} active={v.pill} onChange={(x)=>set({...v,pill:x})}/></div>}/></div>
24
27
  </div>;
25
28
  }
26
29
  ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
27
- if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Tabs.jsx","path":"../tabs/Tabs.jsx"}]); }, 0);
30
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Tabs.jsx","path":"../tabs/Tabs.jsx"},{"name":"Tabs.jsx (CountBadge)","path":"../tabs/Tabs.jsx","vue":"../tabs/CountBadge.vue","vueName":"CountBadge.vue"}]); }, 0);
28
31
  </script></body></html>