Fix window closing

Author: mstijak

homedocs/src/examples/layout/WindowExample.tsx

@@ -0,0 +1,56 @@
+import { createAccessorModelProxy } from "cx/data";
+import { LabelsLeftLayout } from "cx/ui";
+import { Button, Window, TextField, TextArea, DateField } from "cx/widgets";
+
+// @model
+interface PageModel {
+  contact: {
+    visible: boolean;
+    name: string;
+    email: string;
+    message: string;
+    date: string;
+  };
+}
+
+const m = createAccessorModelProxy<PageModel>();
+// @model-end
+
+// @index
+export default () => (
+  <div>
+    <Button
+      onClick={(e, { store }) => {
+        store.set(m.contact.visible, true);
+      }}
+    >
+      Open Window
+    </Button>
+    <Window
+      title="Contact"
+      visible={m.contact.visible}
+      center
+      style={{ width: "500px" }}
+      modal
+      draggable
+      closeOnEscape
+    >
+      <div style={{ padding: "20px" }}>
+        <LabelsLeftLayout>
+          <TextField value={m.contact.name} label="Name" />
+          <TextField value={m.contact.email} label="Email" />
+          <TextArea value={m.contact.message} label="Message" rows={5} />
+          <DateField value={m.contact.date} label="Date" />
+        </LabelsLeftLayout>
+      </div>
+      <div
+        putInto="footer"
+        style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}
+      >
+        <Button mod="primary">Submit</Button>
+        <Button dismiss>Cancel</Button>
+      </div>
+    </Window>
+  </div>
+);
+// @index-end

homedocs/src/pages/docs/layout/window.mdx

@@ -0,0 +1,39 @@
+---
+layout: ../../../layouts/DocsLayout.astro
+title: Window
+---
+
+import ImportPath from "../../../components/ImportPath.astro";
+import CodeExample from "../../../components/CodeExample.astro";
+
+import WindowExample from "../../../examples/layout/WindowExample.tsx";
+import WindowExampleCode from "../../../examples/layout/WindowExample.tsx?raw";
+
+# Window
+
+<ImportPath path="import { Window } from 'cx/widgets';" />
+
+Windows are overlays with headers, footers, and special appearance. They provide a familiar dialog-like experience for displaying forms, messages, or complex content.
+
+<CodeExample code={WindowExampleCode}>
+  <WindowExample client:load />
+</CodeExample>
+
+Use `putInto="footer"` to place content in the window footer. Add the `dismiss` prop to buttons that should close the window.
+
+## Configuration
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| `title` | `string` | Text displayed in the header. |
+| `header` | `object` | Custom Cx component for advanced headers. |
+| `visible` | `boolean` | Controls window visibility. |
+| `modal` | `boolean` | Adds a backdrop that masks mouse events for the rest of the page. |
+| `backdrop` | `boolean` | Adds a backdrop that dismisses the window when clicked. |
+| `center` | `boolean` | Centers the window on the page. |
+| `draggable` | `boolean` | Enables dragging the window by its header. |
+| `resizable` | `boolean` | Enables window resizing. |
+| `closable` | `boolean` | Controls close button visibility. Defaults to `true`. |
+| `closeOnEscape` | `boolean` | Closes the window when Escape key is pressed. |
+| `fixed` | `boolean` | Disables moving the window by dragging the header. |
+| `pad` | `boolean` | Adds default padding to the window body. |

packages/cx/src/data/Binding.ts

@@ -13,7 +13,11 @@ export interface BindingObject {
    debounce?: number;
 }
 
-export type BindingInput<T = any> = string | BindingObject | Binding<T> | AccessorChain<T>;
+export type BindingInput<T = any> =
+   | string
+   | BindingObject
+   | Binding<T>
+   | AccessorChain<T>;
 
 export type ValueGetter<T> = (state: any) => T | undefined;
 
@@ -26,7 +30,8 @@ export class Binding<T = any> {
       this.path = path;
       this.parts = path.split(".") as readonly string[];
       let body = "return x";
-      for (let i = 0; i < this.parts.length; i++) body += '?.["' + this.parts[i] + '"]';
+      for (let i = 0; i < this.parts.length; i++)
+         body += '?.["' + this.parts[i] + '"]';
       this.value = new Function("x", body) as ValueGetter<T>;
    }
 
@@ -39,7 +44,8 @@ export class Binding<T = any> {
 
       for (let i = 0; i < this.parts.length; i++) {
          const part = this.parts[i];
-         const no = i === this.parts.length - 1 ? value : Object.assign({}, o[part]);
+         const no =
+            i === this.parts.length - 1 ? value : Object.assign({}, o[part]);
          o[part] = no;
          o = no;
       }
@@ -81,17 +87,16 @@ export class Binding<T = any> {
 
       if (path instanceof Binding) return path as Binding<T>;
 
-      if (isAccessorChain(path)) return this.get<T>((path as AccessorChain<T>).toString());
+      if (isAccessorChain(path))
+         return this.get<T>((path as AccessorChain<T>).toString());
 
       throw new Error("Invalid binding definition provided.");
    }
 }
 
 export function isBinding(value: unknown): value is BindingInput {
-   if (isObject(value)) {
-      if (hasStringAtKey(value, "bind")) return true;
-      if (hasValueAtKey(value, "isAccessorChain", true)) return true;
-   }
+   if (isObject(value) && hasStringAtKey(value, "bind")) return true;
+   if (isAccessorChain(value)) return true;
    return value instanceof Binding;
 }
 
@@ -100,5 +105,3 @@ export type BindingValue<B> = B extends Binding<infer T> ? T : unknown;
 export function isBindingObject(value: unknown): value is BindingObject {
    return isObject(value) && hasStringAtKey(value, "bind");
 }
-
-export { bindingCache };