@easyops-cn/a2ui-react 0.0.7 → 0.0.9

package/dist/0.8/components/interactive/DateTimeInputComponent.js

@@ -1,98 +1,106 @@
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
-import { memo as V, useMemo as l, useCallback as M } from "react";
-import { CalendarIcon as j } from "lucide-react";
-import { parse as p, isValid as P, format as m } from "date-fns";
-import { useFormBinding as B } from "../../hooks/useDataBinding.js";
-import { cn as y } from "../../../lib/utils.js";
-import { Button as F } from "../../../components/ui/button.js";
-import { Calendar as S } from "../../../components/ui/calendar.js";
-import { Popover as k, PopoverTrigger as A, PopoverContent as L } from "../../../components/ui/popover.js";
-import { Input as g } from "../../../components/ui/input.js";
-const U = V(function({
-  surfaceId: v,
-  componentId: w,
-  value: x,
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { memo as B, useMemo as y, useCallback as v } from "react";
+import { CalendarIcon as P } from "lucide-react";
+import { parse as a, isValid as L, format as m } from "date-fns";
+import { useDataBinding as S, useFormBinding as k } from "../../hooks/useDataBinding.js";
+import { cn as h } from "../../../lib/utils.js";
+import { Button as A } from "../../../components/ui/button.js";
+import { Calendar as U } from "../../../components/ui/calendar.js";
+import { Popover as $, PopoverTrigger as q, PopoverContent as z } from "../../../components/ui/popover.js";
+import { Input as x } from "../../../components/ui/input.js";
+import { Label as w } from "../../../components/ui/label.js";
+const E = B(function({
+  surfaceId: H,
+  componentId: N,
+  label: C,
+  value: I,
   enableDate: o = !0,
   enableTime: t = !1
 }) {
-  const [n, e] = B(v, x, ""), r = l(() => {
+  const l = S(H, C, ""), [n, e] = k(H, I, ""), r = y(() => {
     if (!n) return;
     let s;
-    return o && t ? s = p(n, "yyyy-MM-dd'T'HH:mm", /* @__PURE__ */ new Date()) : o ? s = p(n, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : t && (s = p(n, "HH:mm", /* @__PURE__ */ new Date())), s && P(s) ? s : void 0;
-  }, [n, o, t]), N = l(() => !r || !t ? "" : m(r, "HH:mm"), [r, t]), C = M(
+    return o && t ? s = a(n, "yyyy-MM-dd'T'HH:mm", /* @__PURE__ */ new Date()) : o ? s = a(n, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : t && (s = a(n, "HH:mm", /* @__PURE__ */ new Date())), s && L(s) ? s : void 0;
+  }, [n, o, t]), F = y(() => !r || !t ? "" : m(r, "HH:mm"), [r, t]), V = v(
     (s) => {
       if (!s) {
         e("");
         return;
       }
       if (o && t) {
-        const u = r ? m(r, "HH:mm") : "00:00", [d, c] = u.split(":").map(Number);
-        s.setHours(d, c), e(m(s, "yyyy-MM-dd'T'HH:mm"));
+        const u = r ? m(r, "HH:mm") : "00:00", [f, p] = u.split(":").map(Number);
+        s.setHours(f, p), e(m(s, "yyyy-MM-dd'T'HH:mm"));
       } else
         e(m(s, "yyyy-MM-dd"));
     },
     [e, o, t, r]
-  ), a = M(
+  ), M = v(
     (s) => {
       const u = s.target.value;
       if (!u) return;
-      const [d, c] = u.split(":").map(Number);
+      const [f, p] = u.split(":").map(Number);
       if (o && t) {
-        const h = r || /* @__PURE__ */ new Date();
-        h.setHours(d, c), e(m(h, "yyyy-MM-dd'T'HH:mm"));
+        const g = r || /* @__PURE__ */ new Date();
+        g.setHours(f, p), e(m(g, "yyyy-MM-dd'T'HH:mm"));
       } else t && !o && e(u);
     },
     [e, o, t, r]
-  ), I = l(() => r ? o && t ? m(r, "yyyy-MM-dd HH:mm") : o ? m(r, "yyyy-MM-dd") : m(r, "HH:mm") : o && t ? "选择日期和时间" : o ? "选择日期" : "选择时间", [r, o, t]), H = `datetime-${w}`;
-  return t && !o ? /* @__PURE__ */ i("div", { className: y("flex flex-col gap-2"), children: /* @__PURE__ */ i(
-    g,
-    {
-      id: H,
-      type: "time",
-      value: n,
-      onChange: a,
-      className: "w-full"
-    }
-  ) }) : /* @__PURE__ */ i("div", { className: y("flex flex-col gap-2"), children: /* @__PURE__ */ f(k, { children: [
-    /* @__PURE__ */ i(A, { asChild: !0, children: /* @__PURE__ */ f(
-      F,
+  ), j = y(() => r ? o && t ? m(r, "yyyy-MM-dd HH:mm") : o ? m(r, "yyyy-MM-dd") : m(r, "HH:mm") : o && t ? "选择日期和时间" : o ? "选择日期" : "选择时间", [r, o, t]), c = `datetime-${N}`;
+  return t && !o ? /* @__PURE__ */ d("div", { className: h("flex flex-col gap-2"), children: [
+    l && /* @__PURE__ */ i(w, { htmlFor: c, children: l }),
+    /* @__PURE__ */ i(
+      x,
       {
-        id: H,
-        variant: "outline",
-        className: y(
-          "w-full justify-start text-left font-normal",
-          !r && "text-muted-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ i(j, { className: "mr-2 h-4 w-4" }),
-          I
-        ]
+        id: c,
+        type: "time",
+        value: n,
+        onChange: M,
+        className: "w-full"
       }
-    ) }),
-    /* @__PURE__ */ f(L, { className: "w-auto p-0", align: "start", children: [
-      /* @__PURE__ */ i(
-        S,
-        {
-          mode: "single",
-          selected: r,
-          onSelect: C,
-          captionLayout: "dropdown",
-          initialFocus: !0
-        }
-      ),
-      t && /* @__PURE__ */ i("div", { className: "border-t p-3", children: /* @__PURE__ */ i(
-        g,
+    )
+  ] }) : /* @__PURE__ */ d("div", { className: h("flex flex-col gap-2"), children: [
+    l && /* @__PURE__ */ i(w, { htmlFor: c, children: l }),
+    /* @__PURE__ */ d($, { children: [
+      /* @__PURE__ */ i(q, { asChild: !0, children: /* @__PURE__ */ d(
+        A,
         {
-          type: "time",
-          value: N,
-          onChange: a,
-          className: "w-full"
+          id: c,
+          variant: "outline",
+          className: h(
+            "w-full justify-start text-left font-normal",
+            !r && "text-muted-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ i(P, { className: "mr-2 h-4 w-4" }),
+            j
+          ]
         }
-      ) })
+      ) }),
+      /* @__PURE__ */ d(z, { className: "w-auto p-0", align: "start", children: [
+        /* @__PURE__ */ i(
+          U,
+          {
+            mode: "single",
+            selected: r,
+            onSelect: V,
+            captionLayout: "dropdown",
+            initialFocus: !0
+          }
+        ),
+        t && /* @__PURE__ */ i("div", { className: "border-t p-3", children: /* @__PURE__ */ i(
+          x,
+          {
+            type: "time",
+            value: F,
+            onChange: M,
+            className: "w-full"
+          }
+        ) })
+      ] })
     ] })
-  ] }) });
+  ] });
 });
-U.displayName = "A2UI.DateTimeInput";
+E.displayName = "A2UI.DateTimeInput";
 export {
-  U as DateTimeInputComponent
+  E as DateTimeInputComponent
 };

package/dist/0.8/components/interactive/MultipleChoiceComponent.js

@@ -1,82 +1,89 @@
-import { jsx as r, jsxs as g, Fragment as M } from "react/jsx-runtime";
-import { memo as N, useCallback as p } from "react";
-import { useFormBinding as V, useDataBinding as S } from "../../hooks/useDataBinding.js";
-import { Select as F, SelectTrigger as $, SelectValue as j, SelectContent as B, SelectItem as D } from "../../../components/ui/select.js";
-import { Checkbox as L } from "../../../components/ui/checkbox.js";
-import { Label as T } from "../../../components/ui/label.js";
-import { cn as h } from "../../../lib/utils.js";
-const A = N(function({
-  surfaceId: a,
-  componentId: o,
-  selections: b,
-  options: s,
+import { jsxs as u, jsx as r, Fragment as S } from "react/jsx-runtime";
+import { memo as T, useCallback as b } from "react";
+import { useDataBinding as y, useFormBinding as $ } from "../../hooks/useDataBinding.js";
+import { Select as j, SelectTrigger as B, SelectValue as D, SelectContent as L, SelectItem as A } from "../../../components/ui/select.js";
+import { Checkbox as O } from "../../../components/ui/checkbox.js";
+import { Label as f } from "../../../components/ui/label.js";
+import { cn as g } from "../../../lib/utils.js";
+const R = T(function({
+  surfaceId: t,
+  componentId: d,
+  label: x,
+  selections: k,
+  options: o,
   maxAllowedSelections: n
 }) {
-  const [e, i] = V(
-    a,
-    b,
+  const s = y(t, x, ""), [e, i] = $(
+    t,
+    k,
     n === 1 ? "" : []
-  ), v = p(
+  ), M = b(
     (l) => {
       i(l);
     },
     [i]
-  ), y = p(
+  ), N = b(
     (l, c) => {
-      const t = Array.isArray(e) ? e : e ? [e] : [];
+      const a = Array.isArray(e) ? e : e ? [e] : [];
       if (c) {
-        if (n !== void 0 && t.length >= n)
+        if (n !== void 0 && a.length >= n)
           return;
-        i([...t, l]);
+        i([...a, l]);
       } else
-        i(t.filter((u) => u !== l));
+        i(a.filter((h) => h !== l));
     },
     [e, i, n]
-  ), m = `multiplechoice-${o}`;
-  if (!s || s.length === 0)
+  ), m = `multiplechoice-${d}`;
+  if (!o || o.length === 0)
     return null;
   if (n === 1) {
     const l = Array.isArray(e) ? e[0] || "" : e;
-    return /* @__PURE__ */ r("div", { className: h("flex flex-col gap-2"), children: /* @__PURE__ */ g(F, { value: l, onValueChange: v, children: [
-      /* @__PURE__ */ r($, { id: m, children: /* @__PURE__ */ r(j, { placeholder: "Select an option" }) }),
-      /* @__PURE__ */ r(B, { children: s.map((c) => /* @__PURE__ */ r(D, { value: c.value, children: /* @__PURE__ */ r(C, { surfaceId: a, label: c.label }) }, c.value)) })
-    ] }) });
+    return /* @__PURE__ */ u("div", { className: g("flex flex-col gap-2"), children: [
+      s && /* @__PURE__ */ r(f, { htmlFor: m, children: s }),
+      /* @__PURE__ */ u(j, { value: l, onValueChange: M, children: [
+        /* @__PURE__ */ r(B, { id: m, children: /* @__PURE__ */ r(D, { placeholder: "Select an option" }) }),
+        /* @__PURE__ */ r(L, { children: o.map((c) => /* @__PURE__ */ r(A, { value: c.value, children: /* @__PURE__ */ r(v, { surfaceId: t, label: c.label }) }, c.value)) })
+      ] })
+    ] });
   }
-  const f = Array.isArray(e) ? e : e ? [e] : [], k = n !== void 0 && f.length >= n;
-  return /* @__PURE__ */ r("div", { className: h("flex flex-col gap-2"), children: s.map((l) => {
-    const c = f.includes(l.value), t = !c && k, u = `${m}-${l.value}`;
-    return /* @__PURE__ */ g("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ r(
-        L,
-        {
-          id: u,
-          checked: c,
-          disabled: t,
-          onCheckedChange: (x) => y(l.value, x === !0)
-        }
-      ),
-      /* @__PURE__ */ r(
-        T,
-        {
-          htmlFor: u,
-          className: h(
-            "cursor-pointer",
-            t && "cursor-not-allowed opacity-50"
-          ),
-          children: /* @__PURE__ */ r(C, { surfaceId: a, label: l.label })
-        }
-      )
-    ] }, l.value);
-  }) });
+  const C = Array.isArray(e) ? e : e ? [e] : [], V = n !== void 0 && C.length >= n;
+  return /* @__PURE__ */ u("div", { className: g("flex flex-col gap-2"), children: [
+    s && /* @__PURE__ */ r(f, { children: s }),
+    o.map((l) => {
+      const c = C.includes(l.value), a = !c && V, h = `${m}-${l.value}`;
+      return /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r(
+          O,
+          {
+            id: h,
+            checked: c,
+            disabled: a,
+            onCheckedChange: (F) => N(l.value, F === !0)
+          }
+        ),
+        /* @__PURE__ */ r(
+          f,
+          {
+            htmlFor: h,
+            className: g(
+              "cursor-pointer",
+              a && "cursor-not-allowed opacity-50"
+            ),
+            children: /* @__PURE__ */ r(v, { surfaceId: t, label: l.label })
+          }
+        )
+      ] }, l.value);
+    })
+  ] });
 });
-function C({
-  surfaceId: d,
-  label: a
+function v({
+  surfaceId: p,
+  label: t
 }) {
-  const o = S(d, a, "");
-  return /* @__PURE__ */ r(M, { children: o });
+  const d = y(p, t, "");
+  return /* @__PURE__ */ r(S, { children: d });
 }
-A.displayName = "A2UI.MultipleChoice";
+R.displayName = "A2UI.MultipleChoice";
 export {
-  A as MultipleChoiceComponent
+  R as MultipleChoiceComponent
 };

package/dist/0.8/components/interactive/SliderComponent.js

@@ -1,43 +1,48 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { memo as a, useCallback as c } from "react";
-import { useFormBinding as p } from "../../hooks/useDataBinding.js";
-import { Slider as f } from "../../../components/ui/slider.js";
-import { cn as h } from "../../../lib/utils.js";
-const u = a(function({
-  surfaceId: m,
-  value: s,
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { memo as h, useCallback as x } from "react";
+import { useDataBinding as u, useFormBinding as g } from "../../hooks/useDataBinding.js";
+import { Slider as C } from "../../../components/ui/slider.js";
+import { Label as S } from "../../../components/ui/label.js";
+import { cn as b } from "../../../lib/utils.js";
+const N = h(function({
+  surfaceId: o,
+  componentId: a,
+  label: c,
+  value: p,
   minValue: n = 0,
   maxValue: r = 100
 }) {
-  const [o, t] = p(
-    m,
-    s,
+  const t = u(o, c, ""), [i, l] = g(
+    o,
+    p,
     n
-  ), d = c(
-    (i) => {
-      i.length > 0 && t(i[0]);
+  ), f = x(
+    (s) => {
+      s.length > 0 && l(s[0]);
     },
-    [t]
-  );
-  return /* @__PURE__ */ l("div", { className: h("flex flex-col gap-2 py-2"), children: [
+    [l]
+  ), m = `slider-${a}`;
+  return /* @__PURE__ */ d("div", { className: b("flex flex-col gap-2 py-2"), children: [
+    t && /* @__PURE__ */ e(S, { htmlFor: m, children: t }),
     /* @__PURE__ */ e(
-      f,
+      C,
       {
-        value: [o],
-        onValueChange: d,
+        id: m,
+        value: [i],
+        onValueChange: f,
         min: n,
         max: r,
         step: 1
       }
     ),
-    /* @__PURE__ */ l("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ d("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
       /* @__PURE__ */ e("span", { children: n }),
-      /* @__PURE__ */ e("span", { className: "font-medium text-foreground", children: o }),
+      /* @__PURE__ */ e("span", { className: "font-medium text-foreground", children: i }),
       /* @__PURE__ */ e("span", { children: r })
     ] })
   ] });
 });
-u.displayName = "A2UI.Slider";
+N.displayName = "A2UI.Slider";
 export {
-  u as SliderComponent
+  N as SliderComponent
 };

package/dist/0.8/index.d.ts

@@ -40,4 +40,5 @@ export { A2UIRenderer } from './A2UIRenderer';
 export { ComponentRenderer } from './components/ComponentRenderer';
 export { useDispatchAction } from './hooks/useDispatchAction';
 export { useDataBinding, useFormBinding } from './hooks/useDataBinding';
-export { useA2UIMessageHandler } from './hooks/useA2UIMessageHandler';
+export { useSurfaceContext } from './contexts/SurfaceContext';
+export { useDataModelContext } from './contexts/DataModelContext';

package/dist/0.8/index.js

@@ -1,15 +1,17 @@
-import { A2UIProvider as o } from "./contexts/A2UIProvider.js";
-import { A2UIRenderer as t } from "./A2UIRenderer.js";
+import { A2UIProvider as r } from "./contexts/A2UIProvider.js";
+import { A2UIRenderer as n } from "./A2UIRenderer.js";
 import { ComponentRenderer as p } from "./components/ComponentRenderer.js";
-import { useDispatchAction as s } from "./hooks/useDispatchAction.js";
-import { useDataBinding as f, useFormBinding as x } from "./hooks/useDataBinding.js";
-import { useA2UIMessageHandler as u } from "./hooks/useA2UIMessageHandler.js";
+import { useDispatchAction as f } from "./hooks/useDispatchAction.js";
+import { useDataBinding as a, useFormBinding as d } from "./hooks/useDataBinding.js";
+import { useSurfaceContext as u } from "./contexts/SurfaceContext.js";
+import { useDataModelContext as A } from "./contexts/DataModelContext.js";
 export {
-  o as A2UIProvider,
-  t as A2UIRenderer,
+  r as A2UIProvider,
+  n as A2UIRenderer,
   p as ComponentRenderer,
-  u as useA2UIMessageHandler,
-  f as useDataBinding,
-  s as useDispatchAction,
-  x as useFormBinding
+  a as useDataBinding,
+  A as useDataModelContext,
+  f as useDispatchAction,
+  d as useFormBinding,
+  u as useSurfaceContext
 };

package/dist/0.8/types/index.d.ts

@@ -284,6 +284,7 @@ export interface TextFieldComponentProps extends BaseComponentProps {
  * DateTimeInput component properties.
  */
 export interface DateTimeInputComponentProps extends BaseComponentProps {
+    label?: ValueSource;
     value?: ValueSource;
     enableDate?: boolean;
     enableTime?: boolean;
@@ -299,6 +300,7 @@ export interface MultipleChoiceOption {
  * MultipleChoice component properties.
  */
 export interface MultipleChoiceComponentProps extends BaseComponentProps {
+    label?: ValueSource;
     selections?: ValueSource;
     options?: MultipleChoiceOption[];
     maxAllowedSelections?: number;
@@ -307,6 +309,7 @@ export interface MultipleChoiceComponentProps extends BaseComponentProps {
  * Slider component properties.
  */
 export interface SliderComponentProps extends BaseComponentProps {
+    label?: ValueSource;
     value?: ValueSource;
     minValue?: number;
     maxValue?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyops-cn/a2ui-react",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A2UI React Renderer",
   "homepage": "https://easyops-cn.github.io/a2ui-react/",
   "repository": {

package/dist/0.8/hooks/useSurface.d.ts

@@ -1,21 +0,0 @@
-import { Surface } from '../types';
-/**
- * Gets a Surface by its ID.
- *
- * @param surfaceId - The surface ID to look up
- * @returns The Surface, or undefined if not found
- *
- * @example
- * ```tsx
- * function MySurface({ surfaceId }) {
- *   const surface = useSurface(surfaceId);
- *
- *   if (!surface) {
- *     return <div>Surface not found</div>;
- *   }
- *
- *   return <ComponentRenderer surfaceId={surfaceId} componentId={surface.root} />;
- * }
- * ```
- */
-export declare function useSurface(surfaceId: string): Surface | undefined;