Skip to content

Commit df24478

Browse files
mstijakmstijak
committed
...
1 parent 2a2f164 commit df24478

12 files changed

Lines changed: 290 additions & 16 deletions

File tree

‎homedocs/src/components/CodeExample.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ const importsCode = hasTabs ? extractImports(code) : null;
265265
</div>
266266

267267
<div
268-
class="preview-box not-prose p-4 bg-card border border-border rounded-lg grow"
268+
class="preview-box not-prose p-4 bg-card border border-border rounded-lg grow overflow-hidden"
269269
>
270270
<slot />
271271
</div>

‎homedocs/src/data/navigation.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,10 @@ export const navigation = [
115115
{ title: "Label", slug: "label" },
116116
{ title: "ProgressBar", slug: "progress-bar" },
117117
{ title: "Tabs", slug: "tabs" },
118-
{ title: "FlexBox", slug: "flexbox" },
119-
{ title: "Section", slug: "section" },
120118
{ title: "Resizer", slug: "resizer" },
121119
{ title: "HScroller", slug: "hscroller" },
120+
{ title: "FlexBox", slug: "flexbox" },
121+
{ title: "Section", slug: "section" },
122122
],
123123
},
124124
{

‎homedocs/src/examples/layout/HScrollerExample.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { createAccessorModelProxy } from "cx/data";
2+
import { bind } from "cx/ui";
3+
import { Button, HScroller, Tab } from "cx/widgets";
4+
5+
interface Model {
6+
tab: string;
7+
}
8+
9+
const m = createAccessorModelProxy<Model>();
10+
11+
// @model
12+
export const model = {
13+
tab: "tab1",
14+
};
15+
// @model-end
16+
17+
// @index
18+
export default () => (
19+
<div>
20+
<HScroller scrollIntoViewSelector=".cxb-tab.cxs-active">
21+
<Tab tab="tab1" value={bind(m.tab)}>
22+
Tab 1
23+
</Tab>
24+
<Tab tab="tab2" value={bind(m.tab)}>
25+
Tab 2
26+
</Tab>
27+
<Tab tab="tab3" value={bind(m.tab)}>
28+
Tab 3
29+
</Tab>
30+
<Tab tab="tab4" value={bind(m.tab)} disabled>
31+
Tab 4
32+
</Tab>
33+
<Tab tab="tab5" value={bind(m.tab)}>
34+
Tab 5
35+
</Tab>
36+
<Tab tab="tab6" value={bind(m.tab)}>
37+
Tab 6
38+
</Tab>
39+
<Tab tab="tab7" value={bind(m.tab)}>
40+
Tab 7
41+
</Tab>
42+
<Tab tab="tab8" value={bind(m.tab)} disabled>
43+
Tab 8
44+
</Tab>
45+
<Tab tab="tab9" value={bind(m.tab)}>
46+
Tab 9
47+
</Tab>
48+
<Tab tab="tab10" value={bind(m.tab)}>
49+
Tab 10
50+
</Tab>
51+
<Tab tab="tab11" value={bind(m.tab)}>
52+
Tab 11
53+
</Tab>
54+
<Tab tab="tab12" value={bind(m.tab)} disabled>
55+
Tab 12
56+
</Tab>
57+
<Tab tab="tab13" value={bind(m.tab)}>
58+
Tab 13
59+
</Tab>
60+
<Tab tab="tab14" value={bind(m.tab)}>
61+
Tab 14
62+
</Tab>
63+
<Tab tab="tab15" value={bind(m.tab)}>
64+
Tab 15
65+
</Tab>
66+
<Tab tab="tab16" value={bind(m.tab)} disabled>
67+
Tab 16
68+
</Tab>
69+
</HScroller>
70+
71+
<div className="flex gap-2 mt-4">
72+
<Button
73+
onClick={(e, { store }) => {
74+
store.set(m.tab, "tab1");
75+
}}
76+
>
77+
Go to Tab 1
78+
</Button>
79+
<Button
80+
onClick={(e, { store }) => {
81+
store.set(m.tab, "tab15");
82+
}}
83+
>
84+
Go to Tab 15
85+
</Button>
86+
</div>
87+
</div>
88+
);
89+
// @index-end

‎homedocs/src/examples/layout/ResizerExample.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { createAccessorModelProxy } from "cx/data";
2+
import { Resizer } from "cx/widgets";
3+
4+
interface Model {
5+
leftWidth: number;
6+
}
7+
8+
const { $model } = createAccessorModelProxy<Model>();
9+
10+
// @model
11+
export const model = {
12+
leftWidth: 200,
13+
};
14+
// @model-end
15+
16+
// @index
17+
export default () => (
18+
<div className="flex h-[150px] border border-gray-300">
19+
<div className="p-4" style={{ width: $model.leftWidth }}>
20+
Left panel (drag the resizer)
21+
</div>
22+
<Resizer
23+
size={$model.leftWidth}
24+
minSize={100}
25+
maxSize={400}
26+
className="border-x border-gray-300"
27+
/>
28+
<div className="flex-1 p-4">Right panel</div>
29+
</div>
30+
);
31+
// @index-end

‎homedocs/src/examples/layout/SectionExample.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Button, FlexRow, Heading, Section } from "cx/widgets";
2+
import "../../icons/lucide";
3+
4+
// @index
5+
export default () => (
6+
<div className="flex flex-col gap-4">
7+
<Section mod="card" title="Simple Section">
8+
This is a simple section with a title and some content.
9+
</Section>
10+
11+
<Section mod="card" title="Section with Footer">
12+
This section has a footer with action buttons.
13+
<FlexRow putInto="footer" spacing>
14+
<Button mod="hollow" icon="calendar" />
15+
<Button mod="hollow" icon="calculator" />
16+
<Button mod="hollow" icon="search" />
17+
</FlexRow>
18+
</Section>
19+
20+
<Section mod="card">
21+
<FlexRow align="center" putInto="header">
22+
<Heading level={4} className="text-blue-400">
23+
Custom Header
24+
</Heading>
25+
<Button mod="hollow" icon="x" style="margin-left: auto" />
26+
</FlexRow>
27+
This section has a custom header with a close button.
28+
</Section>
29+
</div>
30+
);
31+
// @index-end

‎homedocs/src/examples/layout/SectionModsExample.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Section } from "cx/widgets";
2+
3+
// @index
4+
export default () => (
5+
<div className="grid grid-cols-2 gap-4">
6+
<Section mod="primary" title="mod=primary">
7+
Primary style with blue background.
8+
</Section>
9+
10+
<Section mod="success" title="mod=success">
11+
Success style with green background.
12+
</Section>
13+
14+
<Section mod="warning" title="mod=warning">
15+
Warning style with orange background.
16+
</Section>
17+
18+
<Section mod="error" title="mod=error">
19+
Error style with red background.
20+
</Section>
21+
</div>
22+
);
23+
// @index-end

‎homedocs/src/pages/docs/layout/hscroller.mdx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
layout: ../../../layouts/DocsLayout.astro
3+
title: HScroller
4+
---
5+
6+
import ImportPath from "../../../components/ImportPath.astro";
7+
import CodeExample from "../../../components/CodeExample.astro";
8+
9+
import HScrollerExample from "../../../examples/layout/HScrollerExample.tsx";
10+
import HScrollerExampleCode from "../../../examples/layout/HScrollerExample.tsx?raw";
11+
12+
# HScroller
13+
14+
<ImportPath path="import { HScroller, VScroller, Scroller } from 'cx/widgets';" />
15+
16+
Horizontal scrollers are commonly used with tabs when there are too many tabs to fit the screen. Use the `scrollIntoViewSelector` property to specify a CSS selector for the element that should be scrolled into view.
17+
18+
<CodeExample code={HScrollerExampleCode}>
19+
<HScrollerExample client:load />
20+
</CodeExample>
21+
22+
## Configuration
23+
24+
| Property | Type | Description |
25+
| ------------------------ | --------- | ------------------------------------------------------------- |
26+
| `horizontal` | `boolean` | Enable horizontal scrolling. Default is `true` for HScroller. |
27+
| `vertical` | `boolean` | Enable vertical scrolling. Default is `true` for VScroller. |
28+
| `scrollIntoViewSelector` | `string` | CSS selector for an element to scroll into view. |
29+
| `baseClass` | `string` | Base CSS class. Default is `scroller`. |

‎homedocs/src/pages/docs/layout/label.mdx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,13 @@ Most form fields support a `label` prop that can be configured in multiple ways:
3434

3535
Use `asterisk` and `required` on form fields to show a required indicator next to the label.
3636

37-
The following example shows a checkbox used as a label that enables/disables the field:
37+
To automatically show asterisks on all required fields, add this to your initialization code:
38+
39+
```tsx
40+
Label.prototype.asterisk = true;
41+
```
42+
43+
The following example shows a styled label and a checkbox used as a label that enables/disables the field:
3844

3945
<CodeExample code={LabelCheckboxExampleCode}>
4046
<LabelCheckboxExample client:load />

‎homedocs/src/pages/docs/layout/resizer.mdx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
layout: ../../../layouts/DocsLayout.astro
3+
title: Resizer
4+
---
5+
6+
import ImportPath from "../../../components/ImportPath.astro";
7+
import CodeExample from "../../../components/CodeExample.astro";
8+
9+
import ResizerExample from "../../../examples/layout/ResizerExample.tsx";
10+
import ResizerExampleCode from "../../../examples/layout/ResizerExample.tsx?raw";
11+
import { model as resizerModel } from "../../../examples/layout/ResizerExample.tsx";
12+
13+
# Resizer
14+
15+
<ImportPath path="import { Resizer } from 'cx/widgets';" />
16+
17+
The Resizer component is a draggable divider that allows users to resize adjacent elements. Place it between two sibling elements to enable resizing. Double-click to reset to the default size.
18+
19+
<CodeExample code={ResizerExampleCode} model={resizerModel}>
20+
<ResizerExample client:load />
21+
</CodeExample>
22+
23+
## Configuration
24+
25+
| Property | Type | Description |
26+
| -------- | ---- | ----------- |
27+
| `size` | `number` | A binding for storing the resized element's size. |
28+
| `defaultSize` | `number` | Value set when the user double-clicks the resizer. |
29+
| `minSize` | `number` | Minimum allowed size. Default is `0`. |
30+
| `maxSize` | `number` | Maximum allowed size. Default is `1000000`. |
31+
| `horizontal` | `boolean` | Set to `true` for horizontal resizing (row-resize). Default is `false` (vertical, col-resize). |
32+
| `forNextElement` | `boolean` | Use the element after the resizer for size measurements instead of before. Default is `false`. |
33+
| `baseClass` | `string` | Base CSS class. Default is `resizer`. |

‎homedocs/src/pages/docs/layout/section.mdx‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,50 @@ layout: ../../../layouts/DocsLayout.astro
33
title: Section
44
---
55

6-
import CodePreview from "../../../components/CodePreview.astro";
7-
import SectionsExample from "../../../examples/widgets/SectionsExample.tsx";
8-
import SectionsExampleCode from "../../../examples/widgets/SectionsExample.tsx?raw";
6+
import ImportPath from "../../../components/ImportPath.astro";
7+
import CodeExample from "../../../components/CodeExample.astro";
8+
import Note from "../../../components/Note.astro";
99

10-
**Import:** `import { Section } from 'cx/widgets';`
10+
import SectionExample from "../../../examples/layout/SectionExample.tsx";
11+
import SectionExampleCode from "../../../examples/layout/SectionExample.tsx?raw";
12+
13+
import SectionModsExample from "../../../examples/layout/SectionModsExample.tsx";
14+
import SectionModsExampleCode from "../../../examples/layout/SectionModsExample.tsx?raw";
15+
16+
# Section
17+
18+
<ImportPath path="import { Section } from 'cx/widgets';" />
1119

1220
Sections are used to divide a larger body into distinct parts. A section optionally may have a header (title) and a footer.
1321

14-
## Example
22+
<Note>
23+
Section predates Tailwind CSS and is rarely used when Tailwind is available. Consider using Tailwind's card utilities instead.
24+
</Note>
25+
26+
<CodeExample code={SectionExampleCode}>
27+
<SectionExample client:load />
28+
</CodeExample>
1529

16-
<CodePreview code={SectionsExampleCode} filterLines={["Section"]}>
17-
<SectionsExample client:load />
18-
</CodePreview>
30+
## Mods
1931

20-
> FlexRow is commonly used to either arrange multiple sections horizontally or to arrange inner contents of a section or a header.
32+
<CodeExample code={SectionModsExampleCode}>
33+
<SectionModsExample client:load />
34+
</CodeExample>
2135

2236
## Configuration
2337

24-
For configuration options, see the Section widget documentation.
38+
| Property | Type | Description |
39+
| -------- | ---- | ----------- |
40+
| `title` | `string` | Section's title text. |
41+
| `header` | `config` | Custom content for the header. Use `putInto="header"` on child elements. |
42+
| `footer` | `config` | Custom content for the footer. Use `putInto="footer"` on child elements. |
43+
| `pad` | `boolean` | Add default padding to the section body. Default is `true`. |
44+
| `mod` | `string` | Visual modifier. Values: `card`, `primary`, `success`, `warning`, `error`. |
45+
| `hLevel` | `number` | Heading level for the title. Default is `3`. |
46+
| `headerStyle` | `string \| object` | Custom style for the header. |
47+
| `headerClass` | `string \| object` | Additional CSS class for the header. |
48+
| `bodyStyle` | `string \| object` | Custom style for the body. |
49+
| `bodyClass` | `string \| object` | Additional CSS class for the body. |
50+
| `footerStyle` | `string \| object` | Custom style for the footer. |
51+
| `footerClass` | `string \| object` | Additional CSS class for the footer. |
52+
| `baseClass` | `string` | Base CSS class. Default is `section`. |

0 commit comments

Comments
 (0)