@keyfunc/keybricks-ds 2.4.13 → 2.5.0
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.
- package/DEPLOY.md +4 -4
- package/INTEGRATION.md +17 -6
- package/changelog.js +10 -0
- package/components/_cards/accordion.card.html +1 -1
- package/components/_cards/action-chip.card.html +1 -1
- package/components/_cards/activity.card.html +1 -1
- package/components/_cards/alert.card.html +1 -1
- package/components/_cards/app-chrome.card.html +1 -1
- package/components/_cards/banner.card.html +1 -1
- package/components/_cards/breadcrumb.card.html +1 -1
- package/components/_cards/button-1-base.card.html +1 -1
- package/components/_cards/button-2-states.card.html +1 -1
- package/components/_cards/button-3-sizes-icons.card.html +1 -1
- package/components/_cards/button-4-group.card.html +1 -1
- package/components/_cards/cards-indicators.card.html +1 -1
- package/components/_cards/charts-1-sparkline.card.html +1 -1
- package/components/_cards/charts-10-gauge.card.html +1 -1
- package/components/_cards/charts-11-funnel.card.html +1 -1
- package/components/_cards/charts-12-treemap.card.html +1 -1
- package/components/_cards/charts-14-radar.card.html +1 -1
- package/components/_cards/charts-15-distribution.card.html +1 -1
- package/components/_cards/charts-16-pareto.card.html +1 -1
- package/components/_cards/charts-17-candlestick.card.html +1 -1
- package/components/_cards/charts-18-sankey.card.html +1 -1
- package/components/_cards/charts-19-chord.card.html +1 -1
- package/components/_cards/charts-2-line.card.html +1 -1
- package/components/_cards/charts-20-sunburst.card.html +1 -1
- package/components/_cards/charts-21-worldmap.card.html +1 -1
- package/components/_cards/charts-22-gantt.card.html +1 -1
- package/components/_cards/charts-23-bar3d.card.html +1 -1
- package/components/_cards/charts-24-pie3d.card.html +1 -1
- package/components/_cards/charts-25-surface3d.card.html +1 -1
- package/components/_cards/charts-26-scatter3d.card.html +1 -1
- package/components/_cards/charts-27-ribbon3d.card.html +1 -1
- package/components/_cards/charts-3-bar.card.html +1 -1
- package/components/_cards/charts-4-barlist.card.html +1 -1
- package/components/_cards/charts-5-donut.card.html +1 -1
- package/components/_cards/charts-6-scatter.card.html +1 -1
- package/components/_cards/charts-7-heatmap.card.html +1 -1
- package/components/_cards/charts-8-waterfall.card.html +1 -1
- package/components/_cards/charts-9-bullet.card.html +1 -1
- package/components/_cards/checkbox.card.html +1 -1
- package/components/_cards/codeblock.card.html +1 -1
- package/components/_cards/combobox.card.html +1 -1
- package/components/_cards/context-menu.card.html +1 -1
- package/components/_cards/date-picker.card.html +1 -1
- package/components/_cards/diffvalue.card.html +1 -1
- package/components/_cards/divider.card.html +1 -1
- package/components/_cards/drawer.card.html +1 -1
- package/components/_cards/dropdown-menu.card.html +1 -1
- package/components/_cards/dropzone.card.html +1 -1
- package/components/_cards/empty-state.card.html +1 -1
- package/components/_cards/icon-button.card.html +1 -1
- package/components/_cards/input.card.html +1 -1
- package/components/_cards/kbd.card.html +1 -1
- package/components/_cards/keyvalue.card.html +1 -1
- package/components/_cards/listrow.card.html +1 -1
- package/components/_cards/loading.card.html +1 -1
- package/components/_cards/log-viewer.card.html +1 -1
- package/components/_cards/multi-select.card.html +1 -1
- package/components/_cards/number-stepper.card.html +1 -1
- package/components/_cards/pagination.card.html +1 -1
- package/components/_cards/people.card.html +1 -1
- package/components/_cards/pipeline-node.card.html +1 -1
- package/components/_cards/pipeline-palette.card.html +1 -1
- package/components/_cards/radio.card.html +1 -1
- package/components/_cards/relative-time-picker.card.html +1 -1
- package/components/_cards/search.card.html +1 -1
- package/components/_cards/segmented-control.card.html +1 -1
- package/components/_cards/select.card.html +1 -1
- package/components/_cards/smart-table.card.html +1 -1
- package/components/_cards/spreadsheet.card.html +1 -1
- package/components/_cards/stepper.card.html +1 -1
- package/components/_cards/table.card.html +7 -2
- package/components/_cards/tabs.card.html +1 -1
- package/components/_cards/tag.card.html +1 -1
- package/components/_cards/textarea.card.html +1 -1
- package/components/_cards/timeline.card.html +1 -1
- package/components/_cards/toast.card.html +1 -1
- package/components/_cards/toggles.card.html +1 -1
- package/components/_cards/tooltip.card.html +1 -1
- package/components/_cards/tree.card.html +1 -1
- package/components/_shared/view-source.js +15 -185
- package/components/data/ListRow.d.ts +6 -3
- package/components/data/ListRow.jsx +21 -13
- package/components/data/ListRow.vue +25 -15
- package/components/data/Table.vue +6 -2
- package/components/feedback/Timeline.vue +4 -1
- package/components/navigation/Tree.vue +6 -0
- package/index.html +6 -56
- package/package.json +1 -1
- package/tokens/typography.css +2 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x270" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x440" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x400" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x450" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x540" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x340" name="Number Stepper" subtitle="Default · at min · at max · disabled" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x770" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x340" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x1800" name="Pipeline Node Card" subtitle="220×90 node — category hues · status badges · ports with hover, drag-to-connect and drop states" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x920" name="Pipeline Palette" subtitle="240px component drawer — grid/list toggle · collapsible hued categories" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x1750" name="Radio Button" subtitle="Single choice from a small set — md/sm · description · disabled · row · card variant · arrow-key navigation" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x880" name="Relative Time Picker" subtitle="Filter by how long ago · md / sm / lg · unlimited · disabled · localised labels" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x770" name="Search Input" subtitle="Bordered · bare top-bar · with value/clear · disabled" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x1880" 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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x550" name="Select" subtitle="md / sm · placeholder · disabled · error" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x1470" name="Smart Table (Database Grid)" subtitle="Frozen header and row numbers · default and compact density · 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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="924x600" name="Spreadsheet" subtitle="Formula bar · frozen headers · range selection · =SUM() · sheet tabs · status bar" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x630" name="Stepper" subtitle="Multi-step flow header — done · current · upcoming" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x11200" name="Table" subtitle="Anatomy · densities · cell types (display · editable · per tier) · two-line name · sorting · selection · frames · column resize · states · composition" -->
|
|
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>
|
|
@@ -111,6 +111,9 @@ const TIER_COLS = (t) => [
|
|
|
111
111
|
{ key: "act", label: "On conflict", width: 160, render: v => <Live init={v}>{(x, set) => <Select options={["New", "Overwrite", "Skip"]} value={x} onChange={(e) => set(e && e.target ? e.target.value : e)} style={{ width: "100%", minWidth: 124 }} />}</Live> },
|
|
112
112
|
{ key: "trend", label: "Trend", render: v => <Sparkline values={v} width={FIT[t].sp[0]} height={FIT[t].sp[1]} tone="auto" /> },
|
|
113
113
|
];
|
|
114
|
+
const TIER_COLS_SM = TIER_COLS("sm");
|
|
115
|
+
const TIER_COLS_MD = TIER_COLS("md");
|
|
116
|
+
const TIER_COLS_LG = TIER_COLS("lg");
|
|
114
117
|
const SPEC_COLS = [{ key: "part", label: "In the cell", width: 230 }, { key: "sm", label: "sm", mono: true, width: 100 }, { key: "md", label: "md", mono: true, width: 90 }, { key: "lg", label: "lg", mono: true, width: 90 }, { key: "how", label: "Sized by" }];
|
|
115
118
|
const SPEC_ROWS = [
|
|
116
119
|
{ part: "Row", sm: "36", md: "40", lg: "48", how: "table size" },
|
|
@@ -204,7 +207,9 @@ function Sheet() {
|
|
|
204
207
|
<div className="note">Controls fill their column (<code>width: 100%</code>) and sit 4px from the row edges — the row is the tier's bar height, the control the tier's control height. For a grid the user edits cell by cell, use <b>Spreadsheet</b> or <b>Smart Table</b> instead.</div>
|
|
205
208
|
</Case>
|
|
206
209
|
<Case k="per tier — the same cells at sm · md · lg">
|
|
207
|
-
|
|
210
|
+
<div style={{ paddingBottom: 12 }}><span className="k">sm · 36px rows · Avatar {FIT.sm.av} · Sparkline {FIT.sm.sp.join("×")}</span><Table size="sm" bordered columns={TIER_COLS_SM} rows={TIER_ROWS} /></div>
|
|
211
|
+
<div style={{ paddingBottom: 12 }}><span className="k">md · 40px rows · Avatar {FIT.md.av} · Sparkline {FIT.md.sp.join("×")}</span><Table size="md" bordered columns={TIER_COLS_MD} rows={TIER_ROWS} /></div>
|
|
212
|
+
<div style={{ paddingBottom: 12 }}><span className="k">lg · 48px rows · Avatar {FIT.lg.av} · Sparkline {FIT.lg.sp.join("×")}</span><Table size="lg" bordered columns={TIER_COLS_LG} rows={TIER_ROWS} /></div>
|
|
208
213
|
</Case>
|
|
209
214
|
<Case k="sizes per tier — px">
|
|
210
215
|
<Table size="sm" bordered columns={SPEC_COLS} rows={SPEC_ROWS} />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x1130" 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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x450" name="Tag" subtitle="Removable filter tags — distinct from Badge/ActionChip" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="924x680" name="Textarea" subtitle="Default · character count · over the limit · disabled" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x390" name="Timeline" subtitle="Vertical activity timeline — toned icon nodes on a hairline spine" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x800" name="Toast" subtitle="Tones · with/without meta · live ToastStack demo" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x2780" name="Toggle Switch" subtitle="Binary settings pill — sizes · semantic red→green · glyph knobs · inline text · captions · async loading" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x510" name="Tooltip" subtitle="Placements — top · bottom · left · right, on icon and text triggers" -->
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- @dsCard group="Components" viewport="
|
|
1
|
+
<!-- @dsCard group="Components" viewport="700x3170" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · reorder · keyboard" -->
|
|
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>
|
|
@@ -1,194 +1,24 @@
|
|
|
1
1
|
(function(){
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
function
|
|
10
|
-
if (!dir || bundles[dir] === 'done') return done();
|
|
11
|
-
if (bundles[dir]) { bundles[dir].push(done); return; }
|
|
12
|
-
bundles[dir] = [done];
|
|
13
|
-
var s = document.createElement('script');
|
|
14
|
-
s.src = '../../_src/src-' + dir + '.js';
|
|
15
|
-
s.onload = s.onerror = function(){
|
|
16
|
-
var q = bundles[dir]; bundles[dir] = 'done';
|
|
17
|
-
q.forEach(function(fn){ fn(); });
|
|
18
|
-
};
|
|
2
|
+
/* Cards call KBViewSource.mount(selector) once they render. It adds the "Show code" bar under each example —
|
|
3
|
+
the React / Vue 3 code that builds it, generated by _src/usage-code.js (loaded on demand, kept out of _ds_bundle.js).
|
|
4
|
+
The site does not show components' own source: developers use the package, and the source ships in it (and in GitLab).
|
|
5
|
+
Inside the documentation site the card also follows the site's theme (the host posts { kb: 'theme' }). */
|
|
6
|
+
function loadUsage(sel){
|
|
7
|
+
if (window.KBUsage) { window.KBUsage.attach(sel); return; }
|
|
8
|
+
var s = document.createElement('script'); s.src = '../../_src/usage-code.js';
|
|
9
|
+
s.onload = function(){ if (window.KBUsage) window.KBUsage.attach(sel); };
|
|
19
10
|
document.head.appendChild(s);
|
|
20
11
|
}
|
|
21
|
-
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
function prettyHtml(html){
|
|
25
|
-
var s = html.replace(/></g,'>\n<');
|
|
26
|
-
var lines = s.split('\n'), indent=0, out=[];
|
|
27
|
-
for (var i=0;i<lines.length;i++){
|
|
28
|
-
var line = lines[i].trim(); if(!line) continue;
|
|
29
|
-
var closing = /^<\//.test(line);
|
|
30
|
-
if (closing) indent = Math.max(0, indent-1);
|
|
31
|
-
out.push(' '.repeat(indent) + line);
|
|
32
|
-
var selfClosing = /\/>$/.test(line) || /^<(br|img|input|hr)\b/i.test(line);
|
|
33
|
-
var isOpen = /^<[a-zA-Z]/.test(line) && !closing && !selfClosing;
|
|
34
|
-
if (isOpen) indent++;
|
|
35
|
-
}
|
|
36
|
-
return out.join('\n');
|
|
37
|
-
}
|
|
38
|
-
function resolveSrc(path, framework, cb){
|
|
39
|
-
var p = framework === 'vue' ? path.replace(/\.jsx$/, '.vue') : path;
|
|
40
|
-
if (framework === 'vue' && /\.jsx$/.test(path)) { var src = window.__KB_SRC_MANIFEST__ && window.__KB_SRC_MANIFEST__[path]; if (src && src.vue) p = src.vue; }
|
|
41
|
-
var key = p.replace(/^\.\.\//, '');
|
|
42
|
-
function hit(){ return window.__KB_SRC__ && window.__KB_SRC__[key] != null ? window.__KB_SRC__[key] : null; }
|
|
43
|
-
var t = hit(); if (t != null) return cb(t);
|
|
44
|
-
loadBundle(key.split('/')[0], function(){
|
|
45
|
-
var t = hit(); if (t != null) return cb(t);
|
|
46
|
-
fetch(p).then(function(r){ if (!r.ok) throw 0; return r.text(); }).then(cb)
|
|
47
|
-
.catch(function(){ cb('// ' + p + ' has no standalone source file in this export.\n// It is defined inside _ds_bundle.js — the live demo above is the real component.'); });
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
function serve(files){
|
|
12
|
+
var listening = false;
|
|
13
|
+
function mount(rootSelector){
|
|
14
|
+
loadUsage(rootSelector);
|
|
51
15
|
var framed; try { framed = window.parent !== window; } catch(e){ framed = true; }
|
|
52
|
-
if (!framed) return
|
|
53
|
-
|
|
54
|
-
window.__KB_SRC_MANIFEST__ = {}; list.forEach(function(o){ window.__KB_SRC_MANIFEST__[o.path] = o; });
|
|
16
|
+
if (!framed || listening) return;
|
|
17
|
+
listening = true;
|
|
55
18
|
window.addEventListener('message', function(e){
|
|
56
|
-
var m = e.data;
|
|
57
|
-
if (m.kb === '
|
|
58
|
-
resolveSrc(m.path, m.framework, function(text){
|
|
59
|
-
try { window.parent.postMessage({ kb:'src-text', path:m.path, framework:m.framework, text:text }, '*'); } catch(err){}
|
|
60
|
-
});
|
|
61
|
-
} else if (m.kb === 'theme' && m.theme) {
|
|
62
|
-
document.documentElement.setAttribute('data-theme', m.theme);
|
|
63
|
-
document.documentElement.style.colorScheme = m.theme;
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
function send(){ try { window.parent.postMessage({ kb:'src-manifest', files:list }, '*'); } catch(e){} }
|
|
67
|
-
send(); setTimeout(send, 250); setTimeout(send, 900);
|
|
68
|
-
return true;
|
|
69
|
-
}
|
|
70
|
-
function mount(rootSelector, files){
|
|
71
|
-
var root = document.querySelector(rootSelector);
|
|
72
|
-
if (!root || !root.parentNode) return;
|
|
73
|
-
/* Inside the design-system site the host page renders the View Code UI below the
|
|
74
|
-
component box, so the card only serves source text over postMessage. This path
|
|
75
|
-
also works from file://, where the host cannot touch this document at all. */
|
|
76
|
-
if (serve(files)) return;
|
|
77
|
-
var wrap = document.createElement('div');
|
|
78
|
-
wrap.setAttribute('data-kb-viewsource','1');
|
|
79
|
-
wrap.style.cssText = 'margin:16px 0 4px;font-family:var(--font-sans,sans-serif)';
|
|
80
|
-
var btn = document.createElement('button');
|
|
81
|
-
btn.type = 'button';
|
|
82
|
-
btn.innerHTML = iconSvg() + '<span style="margin-left:6px">View Code</span>';
|
|
83
|
-
btn.style.cssText = 'display:inline-flex;align-items:center;height:28px;box-sizing:border-box;padding:0 8px;border-radius:var(--radius-md,8px);border:1px solid var(--border-control,#e5e5e5);background:var(--bg-surface,#fff);color:var(--text-secondary,#737373);font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-family:var(--font-sans,sans-serif);cursor:pointer;';
|
|
84
|
-
var panel = document.createElement('div');
|
|
85
|
-
panel.style.cssText = 'display:none;margin-top:10px;border:1px solid var(--border-control,#e5e5e5);border-radius:8px;overflow:hidden;background:var(--bg-inset,#fafafa);';
|
|
86
|
-
var headRow = document.createElement('div');
|
|
87
|
-
headRow.style.cssText = 'display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface,#fff);border-bottom:1px solid var(--border-subtle,#f0f0f0);';
|
|
88
|
-
var tabBar = document.createElement('div');
|
|
89
|
-
tabBar.style.cssText = 'display:flex;overflow-x:auto;flex:1;';
|
|
90
|
-
var fwBar = document.createElement('div');
|
|
91
|
-
fwBar.style.cssText = 'display:flex;align-items:center;flex-shrink:0;height:28px;box-sizing:border-box;gap:2px;padding:2px;margin:0 8px;border-radius:var(--radius-md,8px);background:var(--bg-inset,#fafafa);border:1px solid var(--border-control,#e5e5e5);';
|
|
92
|
-
var framework = 'react';
|
|
93
|
-
['React','Vue 3'].forEach(function(fw){
|
|
94
|
-
var fb = document.createElement('button');
|
|
95
|
-
fb.type = 'button'; fb.textContent = fw;
|
|
96
|
-
fb.style.cssText = 'display:inline-flex;align-items:center;height:22px;font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-weight:var(--weight-medium,500);font-family:var(--font-sans,sans-serif);padding:0 6px;border-radius:var(--radius-sm,4px);border:none;background:transparent;color:var(--text-secondary,#737373);cursor:pointer;white-space:nowrap;';
|
|
97
|
-
fb.onclick = function(){
|
|
98
|
-
framework = fw === 'Vue 3' ? 'vue' : 'react';
|
|
99
|
-
Array.prototype.forEach.call(fwBar.children, function(el){
|
|
100
|
-
var on = el.textContent === fw;
|
|
101
|
-
el.style.background = on ? 'var(--bg-surface,#fff)' : 'transparent'; el.style.boxShadow = on ? '0 1px 2px rgba(0,0,0,.08)' : 'none';
|
|
102
|
-
el.style.color = on ? 'var(--text-heading,#0a0a0a)' : 'var(--text-secondary,#737373)';
|
|
103
|
-
|
|
104
|
-
});
|
|
105
|
-
Array.prototype.forEach.call(tabBar.children, function(el, i){
|
|
106
|
-
if (tabs[i].html) return;
|
|
107
|
-
el.textContent = framework === 'vue' ? (tabs[i].vueName || tabs[i].name.replace(/\.jsx$/, '.vue')) : tabs[i].name;
|
|
108
|
-
el.style.display = (framework === 'vue' && tabs[i].reactOnly) || (framework === 'react' && tabs[i].vueOnly) ? 'none' : '';
|
|
109
|
-
});
|
|
110
|
-
if (active !== -1 && tabBar.children[active].style.display === 'none') { for (var k = 0; k < tabs.length; k++) if (tabBar.children[k].style.display !== 'none') { selectTab(k); break; } }
|
|
111
|
-
else if (active !== -1) selectTab(active);
|
|
112
|
-
};
|
|
113
|
-
fwBar.appendChild(fb);
|
|
114
|
-
});
|
|
115
|
-
fwBar.firstChild.style.background = 'var(--bg-surface,#fff)'; fwBar.firstChild.style.boxShadow = '0 1px 2px rgba(0,0,0,.08)';
|
|
116
|
-
fwBar.firstChild.style.color = 'var(--text-heading,#0a0a0a)';
|
|
117
|
-
|
|
118
|
-
headRow.appendChild(tabBar); headRow.appendChild(fwBar);
|
|
119
|
-
var body = document.createElement('div');
|
|
120
|
-
var tabs = files.slice();
|
|
121
|
-
var cache = {}, active = -1;
|
|
122
|
-
function renderTab(t){
|
|
123
|
-
var box = document.createElement('div');
|
|
124
|
-
box.style.position = 'relative';
|
|
125
|
-
var pre = document.createElement('pre');
|
|
126
|
-
pre.style.cssText = 'margin:0;padding:14px 70px 14px 16px;overflow:auto;max-height:380px;font-family:var(--font-mono,monospace);font-size:var(--text-code,12px);line-height:var(--leading-code,18px);color:var(--text-body,#525252);white-space:pre;';
|
|
127
|
-
var copyBtn = document.createElement('button');
|
|
128
|
-
copyBtn.type = 'button';
|
|
129
|
-
copyBtn.innerHTML = copySvg() + '<span style="margin-left:4px">Copy</span>';
|
|
130
|
-
copyBtn.style.cssText = 'position:absolute;top:8px;right:10px;display:inline-flex;align-items:center;height:28px;box-sizing:border-box;padding:0 8px;border-radius:var(--radius-md,8px);background:var(--bg-surface,#fff);color:var(--text-secondary,#737373);font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-family:var(--font-sans,sans-serif);cursor:pointer;border:1px solid var(--border-control,#e5e5e5);';
|
|
131
|
-
function setText(text){
|
|
132
|
-
pre.textContent = text;
|
|
133
|
-
copyBtn.onclick = function(){
|
|
134
|
-
try { navigator.clipboard.writeText(text); } catch(e){}
|
|
135
|
-
var old = copyBtn.innerHTML;
|
|
136
|
-
copyBtn.innerHTML = 'Copied';
|
|
137
|
-
setTimeout(function(){ copyBtn.innerHTML = old; }, 1200);
|
|
138
|
-
};
|
|
139
|
-
}
|
|
140
|
-
{
|
|
141
|
-
var p = framework === 'vue' ? (t.vue || t.path.replace(/\.jsx$/, '.vue')) : t.path;
|
|
142
|
-
var key = p.replace(/^\.\.\//, '');
|
|
143
|
-
var fromCache = function(){
|
|
144
|
-
if (window.__KB_SRC__ && window.__KB_SRC__[key] != null) { setText(window.__KB_SRC__[key]); return true; }
|
|
145
|
-
return false;
|
|
146
|
-
};
|
|
147
|
-
if (!fromCache()) {
|
|
148
|
-
pre.textContent = 'Loading…';
|
|
149
|
-
// Sources are shipped as one script per folder so this works over file:// too,
|
|
150
|
-
// where fetch() to a sibling file is blocked. fetch is only the last resort.
|
|
151
|
-
loadBundle(key.split('/')[0], function(){
|
|
152
|
-
if (fromCache()) return;
|
|
153
|
-
fetch(p).then(function(r){ if (!r.ok) throw 0; return r.text(); })
|
|
154
|
-
.then(setText)
|
|
155
|
-
.catch(function(){ pre.textContent = '// ' + p + ' has no standalone source file in this export.\n// It is defined inside _ds_bundle.js — the live demo above is the real component.'; });
|
|
156
|
-
});
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
box.appendChild(pre); box.appendChild(copyBtn);
|
|
160
|
-
return box;
|
|
161
|
-
}
|
|
162
|
-
function selectTab(idx){
|
|
163
|
-
active = idx;
|
|
164
|
-
Array.prototype.forEach.call(tabBar.children, function(el, i){
|
|
165
|
-
el.style.color = i === idx ? 'var(--text-heading,#171717)' : 'var(--text-secondary,#737373)';
|
|
166
|
-
el.style.borderBottom = i === idx ? '2px solid var(--action-primary,#155dfc)' : '2px solid transparent';
|
|
167
|
-
});
|
|
168
|
-
body.innerHTML = '';
|
|
169
|
-
body.appendChild(renderTab(tabs[idx]));
|
|
170
|
-
}
|
|
171
|
-
tabs.forEach(function(t, i){
|
|
172
|
-
var tb = document.createElement('button');
|
|
173
|
-
tb.type = 'button';
|
|
174
|
-
tb.textContent = t.name;
|
|
175
|
-
if (t.vueOnly) tb.style.display = 'none';
|
|
176
|
-
tb.style.cssText = 'padding:8px 12px;border:none;background:transparent;font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-family:var(--font-sans,sans-serif);cursor:pointer;white-space:nowrap;margin-bottom:-1px;border-bottom:2px solid transparent;';
|
|
177
|
-
tb.onclick = function(){ selectTab(i); };
|
|
178
|
-
tabBar.appendChild(tb);
|
|
19
|
+
var m = e.data;
|
|
20
|
+
if (m && m.kb === 'theme' && m.theme) { document.documentElement.setAttribute('data-theme', m.theme); document.documentElement.style.colorScheme = m.theme; }
|
|
179
21
|
});
|
|
180
|
-
panel.appendChild(headRow);
|
|
181
|
-
panel.appendChild(body);
|
|
182
|
-
var open = false;
|
|
183
|
-
btn.onclick = function(){
|
|
184
|
-
open = !open;
|
|
185
|
-
panel.style.display = open ? 'block' : 'none';
|
|
186
|
-
btn.querySelector('span').textContent = open ? 'Hide Code' : 'View Code';
|
|
187
|
-
if (open && active === -1) selectTab(0);
|
|
188
|
-
};
|
|
189
|
-
wrap.appendChild(btn);
|
|
190
|
-
wrap.appendChild(panel);
|
|
191
|
-
root.parentNode.appendChild(wrap);
|
|
192
22
|
}
|
|
193
23
|
window.KBViewSource = { mount: mount };
|
|
194
24
|
})();
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
/** Expandable list row (Workflow groups): chevron, 32px hairline icon tile,
|
|
2
|
+
/** Expandable list row (Workflow groups): chevron, 32px hairline icon tile, 14px/500 title, 12px meta, right count.
|
|
3
|
+
* The chevron shows only when the row has children to expand. The row is a button only with onClick: focusable, Enter / Space, aria-expanded,
|
|
4
|
+
* hover wash from tokens/hover.css. Without onClick the row is static (no pointer, no hover). Title and meta truncate; expanded content aligns under the title. */
|
|
3
5
|
export interface ListRowProps {
|
|
4
6
|
icon?: string;
|
|
5
7
|
title?: string;
|
|
6
8
|
meta?: string;
|
|
7
|
-
/** Right-aligned text ("1 item") */
|
|
9
|
+
/** Right-aligned text ("1 item"); 0 is shown. */
|
|
8
10
|
trailing?: React.ReactNode;
|
|
9
11
|
expanded?: boolean;
|
|
10
|
-
|
|
12
|
+
/** Makes the row a button (toggle expanded here). */
|
|
13
|
+
onClick?: (e: React.SyntheticEvent) => void;
|
|
11
14
|
children?: React.ReactNode;
|
|
12
15
|
style?: React.CSSProperties;
|
|
13
16
|
}
|
|
@@ -2,24 +2,32 @@ import React from "react";
|
|
|
2
2
|
import { Icon } from "../icons/Icon.jsx";
|
|
3
3
|
import { IconTile } from "../display/Badge.jsx";
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const T_TITLE = { fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" };
|
|
6
|
+
const T_META = { fontFamily: "var(--font-sans)", fontWeight: "var(--weight-regular)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-secondary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" };
|
|
7
|
+
const T_TRAIL = { fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", fontVariantNumeric: "tabular-nums", color: "var(--text-secondary)", whiteSpace: "nowrap", flexShrink: 0 };
|
|
8
|
+
|
|
9
|
+
/** Expandable workflow list row: chevron + 32px hairline icon tile + title / meta + right count.
|
|
10
|
+
* The chevron shows when the row has content to expand (children); the row is a button only when it has onClick —
|
|
11
|
+
* focusable, Enter / Space, aria-expanded, hover wash from tokens/hover.css [data-row]. A row with neither is static.
|
|
12
|
+
* Rows without a chevron keep its 16px slot, so tiles line up in a mixed list. Expanded content starts under the title. */
|
|
6
13
|
export function ListRow({ icon = "file-text", title, meta, trailing, expanded, onClick, children, style }) {
|
|
7
|
-
const
|
|
14
|
+
const hasContent = children != null && children !== false;
|
|
15
|
+
const clickable = typeof onClick === "function";
|
|
16
|
+
const onKey = (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(e); } };
|
|
8
17
|
return (
|
|
9
18
|
<div style={{ borderBottom: "1px solid var(--border-card)", ...style }}>
|
|
10
|
-
<div
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
</div>
|
|
19
|
+
<div data-row={clickable ? "" : undefined} role={clickable ? "button" : undefined} tabIndex={clickable ? 0 : undefined}
|
|
20
|
+
aria-expanded={clickable && hasContent ? !!expanded : undefined} onClick={clickable ? onClick : undefined} onKeyDown={clickable ? onKey : undefined}
|
|
21
|
+
style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px var(--edge-pad)", cursor: clickable ? "pointer" : "default", background: "var(--row-wash, transparent)", outlineOffset: -2, transition: "var(--t-hover)" }}>
|
|
22
|
+
<span aria-hidden="true" style={{ width: 16, flexShrink: 0, display: "inline-flex", color: "var(--text-muted)", transform: expanded ? "rotate(90deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}>{hasContent ? <Icon name="chevron-right" size={16} /> : null}</span>
|
|
23
|
+
<IconTile icon={icon} kind="row" />
|
|
24
|
+
<div style={{ display: "flex", flexDirection: "column", minWidth: 0, flex: 1 }}>
|
|
25
|
+
<span style={T_TITLE}>{title}</span>
|
|
26
|
+
{meta ? <span style={T_META}>{meta}</span> : null}
|
|
19
27
|
</div>
|
|
20
|
-
{trailing
|
|
28
|
+
{trailing != null && trailing !== "" ? <span style={T_TRAIL}>{trailing}</span> : null}
|
|
21
29
|
</div>
|
|
22
|
-
{expanded &&
|
|
30
|
+
{expanded && hasContent ? <div style={{ padding: "0 var(--edge-pad) 12px calc(var(--edge-pad) + 72px)" }}>{children}</div> : null}
|
|
23
31
|
</div>
|
|
24
32
|
);
|
|
25
33
|
}
|