More stuff

Author: mstijak

homedocs/meta/CONTENT.md

@@ -22,6 +22,10 @@ Category / Group / Page
   - Data Binding
   - Controllers
   - Formatting
+- Core Components
+  - HtmlElement
+  - PureContainer
+  - ContentResolver
 - Authoring Widgets
   - Functional Components
   - Custom Components
@@ -58,9 +62,25 @@ Category / Group / Page
 - Advanced
   - Keyboard Shortcuts
   - Localization
+  - DetachedScope
+  - IsolatedScope
 
 ### Layout
 
+- General Purpose
+  - Button
+  - LinkButton
+  - Link
+  - Icon
+  - Heading
+  - Text
+  - Label
+  - ProgressBar
+  - Tabs
+  - Resizer
+  - HScroller
+  - FlexBox
+  - Section
 - App Layout
   - Outer Layouts
   - ContentPlaceholder
@@ -77,26 +97,11 @@ Category / Group / Page
   - Tooltip
   - Toast
   - MsgBox
+  - FlyweightTooltipTracker
 - Menus
   - Menu
   - ContextMenu
   - Dropdown
-- Content
-  - Tabs
-  - Text
-  - Label
-  - Heading
-  - Icon
-  - Link
-  - Button
-  - LinkButton
-  - ProgressBar
-- Scrolling
-  - Resizer
-  - HScroller
-- Containers
-  - FlexBox
-  - Section
 
 ### Forms
 
@@ -105,14 +110,17 @@ Category / Group / Page
   - NumberField
   - TextArea
   - DateField
+  - Calendar
   - DateTimeField
   - MonthField
+  - MonthPicker
   - SelectField
   - LookupField
   - Checkbox
   - Radio
   - Switch
   - ColorField
+  - ColorPicker
   - UploadButton
   - List
   - Slider
@@ -207,3 +215,4 @@ Category / Group / Page
   - Date
   - DOM
   - Misc
+

homedocs/src/data/navigation.js

@@ -30,6 +30,14 @@ export const navigation = [
           { title: "Formatting", slug: "formatting" },
         ],
       },
+      {
+        title: "Core Components",
+        items: [
+          { title: "HtmlElement", slug: "html-element" },
+          { title: "PureContainer", slug: "pure-container" },
+          { title: "ContentResolver", slug: "content-resolver" },
+        ],
+      },
       {
         title: "Authoring Widgets",
         items: [
@@ -95,6 +103,8 @@ export const navigation = [
         items: [
           { title: "Keyboard Shortcuts", slug: "keyboard-shortcuts" },
           { title: "Localization", slug: "localization" },
+          { title: "DetachedScope", slug: "detached-scope" },
+          { title: "IsolatedScope", slug: "isolated-scope" },
         ],
       },
     ],
@@ -171,14 +181,17 @@ export const navigation = [
           { title: "NumberField", slug: "number-field" },
           { title: "TextArea", slug: "text-area" },
           { title: "DateField", slug: "date-field" },
+          { title: "Calendar", slug: "calendar" },
           { title: "DateTimeField", slug: "date-time-field" },
           { title: "MonthField", slug: "month-field" },
+          { title: "MonthPicker", slug: "month-picker" },
           { title: "SelectField", slug: "select-field" },
           { title: "LookupField", slug: "lookup-field" },
           { title: "Checkbox", slug: "checkbox" },
           { title: "Radio", slug: "radio" },
           { title: "Switch", slug: "switch" },
           { title: "ColorField", slug: "color-field" },
+          { title: "ColorPicker", slug: "color-picker" },
           { title: "UploadButton", slug: "upload-button" },
           { title: "List", slug: "list" },
           { title: "Slider", slug: "slider" },

homedocs/src/examples/concepts/DetachedScopeExample.tsx

@@ -0,0 +1,36 @@
+import { createAccessorModelProxy } from "cx/data";
+import { DetachedScope } from "cx/widgets";
+
+interface Model {
+  scope1: { count: number };
+  scope2: { count: number };
+}
+
+const m = createAccessorModelProxy<Model>();
+
+// @model
+export const model = {
+  scope1: { count: 0 },
+  scope2: { count: 0 },
+};
+// @model-end
+
+// @index
+export default () => (
+  <div className="flex gap-4">
+    <DetachedScope bind={m.scope1}>
+      <div className="p-4 bg-gray-100 rounded">
+        <p>Detached Scope 1</p>
+        <p text={m.scope1.count} />
+      </div>
+    </DetachedScope>
+
+    <DetachedScope bind={m.scope2}>
+      <div className="p-4 bg-gray-100 rounded">
+        <p>Detached Scope 2</p>
+        <p text={m.scope2.count} />
+      </div>
+    </DetachedScope>
+  </div>
+);
+// @index-end

homedocs/src/examples/concepts/IsolatedScopeExample.tsx

@@ -0,0 +1,36 @@
+import { createAccessorModelProxy } from "cx/data";
+import { IsolatedScope } from "cx/widgets";
+
+interface Model {
+  scope1: { count: number };
+  scope2: { count: number };
+}
+
+const m = createAccessorModelProxy<Model>();
+
+// @model
+export const model = {
+  scope1: { count: 0 },
+  scope2: { count: 0 },
+};
+// @model-end
+
+// @index
+export default () => (
+  <div className="flex gap-4">
+    <IsolatedScope bind={m.scope1}>
+      <div className="p-4 bg-gray-100 rounded">
+        <p>Isolated Scope 1</p>
+        <p text={m.scope1.count} />
+      </div>
+    </IsolatedScope>
+
+    <IsolatedScope bind={m.scope2}>
+      <div className="p-4 bg-gray-100 rounded">
+        <p>Isolated Scope 2</p>
+        <p text={m.scope2.count} />
+      </div>
+    </IsolatedScope>
+  </div>
+);
+// @index-end

homedocs/src/examples/intro/ContentResolverExample.tsx

@@ -0,0 +1,53 @@
+import { createAccessorModelProxy } from "cx/data";
+import {
+  Checkbox,
+  ContentResolver,
+  DateField,
+  LookupField,
+  Switch,
+  TextField,
+} from "cx/widgets";
+
+// @model
+
+interface Model {
+  fieldType: string;
+  text: string;
+  date: string;
+  checked: boolean;
+}
+
+const m = createAccessorModelProxy<Model>();
+
+const fieldTypes = [
+  { id: "textfield", text: "TextField" },
+  { id: "datefield", text: "DateField" },
+  { id: "checkbox", text: "Checkbox" },
+  { id: "switch", text: "Switch" },
+];
+
+// @model-end
+// @index
+export default () => (
+  <div className="flex items-center gap-4">
+    <LookupField value={m.fieldType} options={fieldTypes} label="Field Type" />
+    <ContentResolver
+      params={m.fieldType}
+      onResolve={(type) => {
+        switch (type) {
+          case "textfield":
+            return <TextField value={m.text} />;
+          case "datefield":
+            return <DateField value={m.date} />;
+          case "checkbox":
+            return <Checkbox value={m.checked}>Checked</Checkbox>;
+          case "switch":
+            return <Switch value={m.checked} />;
+          default:
+            return null;
+        }
+      }}
+    />
+  </div>
+);
+// @index-end

homedocs/src/examples/intro/HtmlElementExample.tsx

@@ -0,0 +1,28 @@
+import { createAccessorModelProxy } from "cx/data";
+import { tpl } from "cx/ui";
+import { HtmlElement, TextField } from "cx/widgets";
+
+interface Model {
+  name: string;
+}
+
+const m = createAccessorModelProxy<Model>();
+
+// @model
+export const model = {
+  name: "World",
+};
+// @model-end
+
+// @index
+export default () => (
+  <div>
+    <h4 class="font-bold text-2xl">Heading</h4>
+    <p>Paragraph with some text.</p>
+    <HtmlElement tag="span">Using HtmlElement directly</HtmlElement>
+    <hr />
+    <TextField value={m.name} label="Name" />
+    <p text={tpl(m.name, "Hello, {0|Stranger}!")} />
+  </div>
+);
+// @index-end

homedocs/src/examples/intro/PureContainerExample.tsx

@@ -0,0 +1,37 @@
+import { createAccessorModelProxy } from "cx/data";
+import { LabelsTopLayout, PureContainer } from "cx/ui";
+import { Checkbox, TextField } from "cx/widgets";
+
+interface Model {
+  showContactInfo: boolean;
+  email: string;
+  phone: string;
+}
+
+const m = createAccessorModelProxy<Model>();
+
+// @model
+export const model = {
+  showContactInfo: true,
+  email: "",
+  phone: "",
+};
+// @model-end
+
+// @index
+export default () => (
+  <div>
+    <Checkbox value={m.showContactInfo}>Show contact information</Checkbox>
+    <PureContainer visible={m.showContactInfo}>
+      <div class="mt-2 font-bold">Contact Information</div>
+      <LabelsTopLayout>
+        <TextField value={m.email} label="Email" />
+        <TextField value={m.phone} label="Phone" />
+      </LabelsTopLayout>
+      <p className="text-gray-500 text-sm mt-4">
+        We'll never share your contact information.
+      </p>
+    </PureContainer>
+  </div>
+);
+// @index-end

homedocs/src/pages/docs/concepts/detached-scope.mdx

@@ -0,0 +1,44 @@
+---
+layout: ../../../layouts/DocsLayout.astro
+title: DetachedScope
+---
+
+import ImportPath from "../../../components/ImportPath.astro";
+import CodeExample from "../../../components/CodeExample.astro";
+import Note from "../../../components/Note.astro";
+
+import DetachedScopeExample from "../../../examples/concepts/DetachedScopeExample.tsx";
+import DetachedScopeExampleCode from "../../../examples/concepts/DetachedScopeExample.tsx?raw";
+
+# DetachedScope
+
+<ImportPath path="import { DetachedScope } from 'cx/widgets';" />
+
+<Note type="info">
+For most performance optimization scenarios, consider using [PrivateStore](/docs/concepts/private-store) instead, which is more commonly used and easier to work with.
+</Note>
+
+`DetachedScope` improves performance by detaching certain areas from the main render loop. Detached contents render in their own render loop and use a data declaration to specify which changes can flow in or out.
+
+Use this for heavy components like grids, charts, or rich popups that might be negatively affected by other elements on the page.
+
+<CodeExample code={DetachedScopeExampleCode}>
+  <DetachedScopeExample client:load />
+</CodeExample>
+
+## How It Works
+
+1. The `bind` prop specifies the data paths this scope depends on
+2. The scope renders independently from the rest of the page
+3. Only changes to the bound data trigger re-renders inside the scope
+4. Changes inside the scope don't trigger re-renders outside
+
+## Configuration
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| `bind` | `string \| array` | Binding path(s) to monitor for changes. Shorthand for `data`. |
+| `data` | `object` | Data selector object. Children update only when this data changes. |
+| `exclusive` | `string \| array` | Paths for exclusive data that only affects this scope. |
+| `exclusiveData` | `object` | Exclusive data selector for data used only within this scope. |
+| `name` | `string` | Name of the scope for debugging purposes. |