@keyfunc/keybricks-ds 2.4.7 → 2.4.8
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 +2 -2
- package/DESIGN.md +4 -4
- package/INTEGRATION.md +17 -2
- package/_adherence.oxlintrc.json +4 -4
- package/assets/icons/icon-index.js +1 -1
- package/assets/icons/icon-index.json +1 -1
- package/components/_cards/segmented-control.card.html +1 -1
- package/components/_cards/table.card.html +139 -6
- package/components/_cards/toggles.card.html +27 -27
- package/components/_shared/src-data.js +1 -1
- package/components/_shared/src-display.js +1 -1
- package/components/_shared/src-forms.js +1 -1
- package/components/_shared/src-icons.js +1 -1
- package/components/_shared/src-navigation.js +1 -1
- package/components/_shared/src-tabs.js +1 -1
- package/components/data/SmartTable.d.ts +9 -1
- package/components/data/SmartTable.jsx +24 -4
- package/components/data/SmartTable.vue +18 -5
- package/components/data/Spreadsheet.d.ts +5 -1
- package/components/data/Spreadsheet.jsx +23 -3
- package/components/data/Spreadsheet.vue +18 -5
- package/components/data/Table.d.ts +25 -4
- package/components/data/Table.jsx +74 -20
- package/components/data/Table.vue +56 -14
- package/components/display/Tag.d.ts +1 -1
- package/components/display/Tag.jsx +1 -1
- package/components/display/Tag.vue +1 -1
- package/components/forms/Switch.d.ts +2 -2
- package/components/forms/Switch.jsx +10 -8
- package/components/forms/Switch.vue +5 -4
- package/components/forms/forms.prompt.md +1 -1
- package/components/icons/Icon.jsx +2 -1
- package/components/icons/icon-paths.js +2 -1
- package/components/navigation/Breadcrumb.jsx +9 -7
- package/components/navigation/Breadcrumb.vue +16 -14
- package/components/tabs/CountBadge.vue +1 -1
- package/components/tabs/Tabs.d.ts +1 -1
- package/components/tabs/Tabs.jsx +1 -1
- package/package.json +1 -1
- package/tokens/layout.css +5 -5
|
@@ -18,43 +18,43 @@ function Sheet() {
|
|
|
18
18
|
const [v, set] = React.useState({});
|
|
19
19
|
const b = (k, d = false) => ({ checked: v[k] ?? d, onChange: n => set(s => ({ ...s, [k]: n })) });
|
|
20
20
|
return <div>
|
|
21
|
-
<div className="kb-h kb-h-gap">Sizes & states — sm · md
|
|
22
|
-
<Case k="on"><Switch size="sm" {...b("s1", true)} /><Switch {...b("s2", true)}
|
|
23
|
-
<Case k="off"><Switch size="sm" {...b("s4")} /><Switch {...b("s5")}
|
|
24
|
-
<Case k="disabled"><Switch size="sm" checked disabled /><Switch checked disabled
|
|
25
|
-
<Case k="label (settings row)"><Switch size="sm" label="Compact rows" {...b("s7", true)} /><Switch label="Debug Mode" {...b("s8", true)}
|
|
21
|
+
<div className="kb-h kb-h-gap">Sizes & states — sm · md (lg keeps the md track)</div>
|
|
22
|
+
<Case k="on"><Switch size="sm" {...b("s1", true)} /><Switch {...b("s2", true)} /></Case>
|
|
23
|
+
<Case k="off"><Switch size="sm" {...b("s4")} /><Switch {...b("s5")} /></Case>
|
|
24
|
+
<Case k="disabled"><Switch size="sm" checked disabled /><Switch checked disabled /></Case>
|
|
25
|
+
<Case k="label (settings row)"><Switch size="sm" label="Compact rows" {...b("s7", true)} /><Switch label="Debug Mode" {...b("s8", true)} /></Case>
|
|
26
26
|
|
|
27
27
|
<div className="kb-h kb-h-gap">Size tiers — Latin and CJK labels</div>
|
|
28
28
|
<Tiers init={true} render={(t,l,v,set)=><Switch label={l==="en"?"Compact rows":"紧凑行高"} checked={v} onChange={set}/>}/>
|
|
29
29
|
|
|
30
30
|
<div className="kb-h kb-h-gap">Semantic tone — danger off → success on</div>
|
|
31
|
-
<Case k='tone="semantic" · on'><Switch size="sm" tone="semantic" {...b("t1", true)} /><Switch tone="semantic" {...b("t2", true)}
|
|
32
|
-
<Case k="off"><Switch size="sm" tone="semantic" {...b("t4")} /><Switch tone="semantic" {...b("t5")}
|
|
31
|
+
<Case k='tone="semantic" · on'><Switch size="sm" tone="semantic" {...b("t1", true)} /><Switch tone="semantic" {...b("t2", true)} /></Case>
|
|
32
|
+
<Case k="off"><Switch size="sm" tone="semantic" {...b("t4")} /><Switch tone="semantic" {...b("t5")} /></Case>
|
|
33
33
|
|
|
34
|
-
<div className="kb-h kb-h-gap">Glyph in the knob — md
|
|
35
|
-
<Case k="knobIcon check"><Switch knobIcon="check" {...b("g1", true)}
|
|
36
|
-
<Case k="knobIcon {check, x}"><Switch knobIcon={{ on: "check", off: "x" }} {...b("g3")}
|
|
37
|
-
<Case k="knobIcon {sun, moon}"><Switch knobIcon={{ on: "sun", off: "moon" }} {...b("g5", true)}
|
|
38
|
-
<Case k="knobText {Y, N}"><Switch knobText={{ on: "Y", off: "N" }} {...b("g7", true)}
|
|
39
|
-
<Case k="knobText — one CJK character {开, 关}"><Switch knobText={{ on: "开", off: "关" }} {...b("g9")}
|
|
40
|
-
<Case k="semantic + knobIcon"><Switch tone="semantic" knobIcon={{ on: "check", off: "x" }} {...b("g11", true)}
|
|
34
|
+
<div className="kb-h kb-h-gap">Glyph in the knob — md only (sm knob is 12px, too small for a glyph)</div>
|
|
35
|
+
<Case k="knobIcon check"><Switch knobIcon="check" {...b("g1", true)} /></Case>
|
|
36
|
+
<Case k="knobIcon {check, x}"><Switch knobIcon={{ on: "check", off: "x" }} {...b("g3")} /></Case>
|
|
37
|
+
<Case k="knobIcon {sun, moon}"><Switch knobIcon={{ on: "sun", off: "moon" }} {...b("g5", true)} /></Case>
|
|
38
|
+
<Case k="knobText {Y, N}"><Switch knobText={{ on: "Y", off: "N" }} {...b("g7", true)} /></Case>
|
|
39
|
+
<Case k="knobText — one CJK character {开, 关}"><Switch knobText={{ on: "开", off: "关" }} {...b("g9")} /></Case>
|
|
40
|
+
<Case k="semantic + knobIcon"><Switch tone="semantic" knobIcon={{ on: "check", off: "x" }} {...b("g11", true)} /></Case>
|
|
41
41
|
|
|
42
|
-
<div className="kb-h kb-h-gap">Text inside the pill — md
|
|
43
|
-
<Case k="ON / OFF"><Switch insideOn="ON" insideOff="OFF" {...b("i1", true)}
|
|
44
|
-
<Case k="开 / 关"><Switch insideOn="开" insideOff="关" {...b("i3")}
|
|
45
|
-
<Case k="semantic · Y / N"><Switch tone="semantic" insideOn="Y" insideOff="N" {...b("i5", true)}
|
|
42
|
+
<div className="kb-h kb-h-gap">Text inside the pill — md only</div>
|
|
43
|
+
<Case k="ON / OFF"><Switch insideOn="ON" insideOff="OFF" {...b("i1", true)} /></Case>
|
|
44
|
+
<Case k="开 / 关"><Switch insideOn="开" insideOff="关" {...b("i3")} /></Case>
|
|
45
|
+
<Case k="semantic · Y / N"><Switch tone="semantic" insideOn="Y" insideOff="N" {...b("i5", true)} /></Case>
|
|
46
46
|
|
|
47
|
-
<div className="kb-h kb-h-gap">Captions beside — sm · md
|
|
48
|
-
<Case k="labelOn"><Switch size="sm" labelOn="Enabled" {...b("l1", true)} /><Switch labelOn="Enabled" {...b("l2", true)}
|
|
49
|
-
<Case k="labelOff + labelOn"><Switch size="sm" labelOff="Monthly" labelOn="Annual" {...b("l4")} /><Switch labelOff="Monthly" labelOn="Annual" {...b("l5")}
|
|
50
|
-
<Case k="semantic · Off / On"><Switch size="sm" tone="semantic" labelOff="Off" labelOn="On" {...b("l7", true)} /><Switch tone="semantic" labelOff="Off" labelOn="On" {...b("l8", true)}
|
|
47
|
+
<div className="kb-h kb-h-gap">Captions beside — sm · md (active side reads heading)</div>
|
|
48
|
+
<Case k="labelOn"><Switch size="sm" labelOn="Enabled" {...b("l1", true)} /><Switch labelOn="Enabled" {...b("l2", true)} /></Case>
|
|
49
|
+
<Case k="labelOff + labelOn"><Switch size="sm" labelOff="Monthly" labelOn="Annual" {...b("l4")} /><Switch labelOff="Monthly" labelOn="Annual" {...b("l5")} /></Case>
|
|
50
|
+
<Case k="semantic · Off / On"><Switch size="sm" tone="semantic" labelOff="Off" labelOn="On" {...b("l7", true)} /><Switch tone="semantic" labelOff="Off" labelOn="On" {...b("l8", true)} /></Case>
|
|
51
51
|
|
|
52
52
|
<div className="kb-h kb-h-gap">Loading — sm · md · lg</div>
|
|
53
|
-
<Case k="loading · on"><Switch size="sm" checked loading /><Switch checked loading
|
|
54
|
-
<Case k="loading · off"><Switch size="sm" loading /><Switch loading
|
|
55
|
-
<Case k="semantic · loading"><Switch size="sm" tone="semantic" checked loading /><Switch tone="semantic" checked loading
|
|
56
|
-
<Case k="beforeChange → resolves 1.2s"><Switch size="sm" beforeChange={() => wait(1200)} {...b("a1", true)} /><Switch beforeChange={() => wait(1200)} {...b("a2", true)}
|
|
57
|
-
<Case k="beforeChange → rejects"><Switch size="sm" tone="semantic" beforeChange={() => wait(1200, false)} {...b("a4")} /><Switch tone="semantic" beforeChange={() => wait(1200, false)} {...b("a5")} /><
|
|
53
|
+
<Case k="loading · on"><Switch size="sm" checked loading /><Switch checked loading /></Case>
|
|
54
|
+
<Case k="loading · off"><Switch size="sm" loading /><Switch loading /></Case>
|
|
55
|
+
<Case k="semantic · loading"><Switch size="sm" tone="semantic" checked loading /><Switch tone="semantic" checked loading /></Case>
|
|
56
|
+
<Case k="beforeChange → resolves 1.2s"><Switch size="sm" beforeChange={() => wait(1200)} {...b("a1", true)} /><Switch beforeChange={() => wait(1200)} {...b("a2", true)} /></Case>
|
|
57
|
+
<Case k="beforeChange → rejects"><Switch size="sm" tone="semantic" beforeChange={() => wait(1200, false)} {...b("a4")} /><Switch tone="semantic" beforeChange={() => wait(1200, false)} {...b("a5")} /><span className="cap">stays put after the spinner</span></Case>
|
|
58
58
|
</div>;
|
|
59
59
|
}
|
|
60
60
|
ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
|