@copilotkit/vue 1.57.1

package/src/v2/components/a2ui/catalog.ts

@@ -0,0 +1,858 @@
+/**
+ * Vue basic catalog for A2UI v0.9.
+ *
+ * Provides Vue component implementations for all 18 basic catalog components,
+ * mirroring the React renderer's catalog/basic/.
+ */
+
+import { h, ref, type CSSProperties, type VNode } from "vue";
+import { Catalog } from "@a2ui/web_core/v0_9";
+import {
+  TextApi,
+  ImageApi,
+  IconApi,
+  VideoApi,
+  AudioPlayerApi,
+  RowApi,
+  ColumnApi,
+  ListApi,
+  CardApi,
+  TabsApi,
+  DividerApi,
+  ModalApi,
+  ButtonApi,
+  TextFieldApi,
+  CheckBoxApi,
+  ChoicePickerApi,
+  SliderApi,
+  DateTimeInputApi,
+  BASIC_FUNCTIONS,
+} from "@a2ui/web_core/v0_9/basic_catalog";
+
+import { createVueComponent, type VueComponentImplementation } from "./adapter";
+import {
+  LEAF_MARGIN,
+  STANDARD_BORDER,
+  STANDARD_RADIUS,
+  getBaseLeafStyle,
+  getBaseContainerStyle,
+  mapJustify,
+  mapAlign,
+} from "./utils";
+
+// -- Helper: render a child list (arrays of { id, basePath } or string IDs) --
+function renderChildList(
+  childList: unknown,
+  buildChild: (id: string, basePath?: string) => VNode,
+): VNode[] {
+  if (!Array.isArray(childList)) return [];
+  return childList
+    .map((item: unknown) => {
+      if (item && typeof item === "object" && "id" in item) {
+        const node = item as { id: string; basePath?: string };
+        return buildChild(node.id, node.basePath);
+      }
+      if (typeof item === "string") {
+        return buildChild(item);
+      }
+      return null;
+    })
+    .filter((v): v is VNode => v !== null);
+}
+
+// -- Unique ID counter for form elements --
+let a2uiIdCounter = 0;
+function useA2UIUniqueId(): string {
+  return `a2ui-vue-${++a2uiIdCounter}`;
+}
+
+// ============================================================
+// Component Implementations
+// ============================================================
+
+const Text = createVueComponent(TextApi, ({ props }) => {
+  const text = props.text ?? "";
+  const style = { ...getBaseLeafStyle(), display: "inline-block" };
+
+  switch (props.variant) {
+    case "h1":
+      return h("h1", { style }, text);
+    case "h2":
+      return h("h2", { style }, text);
+    case "h3":
+      return h("h3", { style }, text);
+    case "h4":
+      return h("h4", { style }, text);
+    case "h5":
+      return h("h5", { style }, text);
+    case "caption":
+      return h(
+        "small",
+        { style: { ...style, color: "#666", textAlign: "left" } },
+        text,
+      );
+    case "body":
+    default:
+      return h("span", { style }, text);
+  }
+});
+
+const Image = createVueComponent(ImageApi, ({ props }) => {
+  const mapFit = (fit?: string): string => {
+    if (fit === "scaleDown") return "scale-down";
+    return fit || "fill";
+  };
+
+  const style: CSSProperties = {
+    ...getBaseLeafStyle(),
+    objectFit: mapFit(props.fit) as CSSProperties["objectFit"],
+    width: "100%",
+    height: "auto",
+    display: "block",
+  };
+
+  if (props.variant === "icon") {
+    style.width = "24px";
+    style.height = "24px";
+  } else if (props.variant === "avatar") {
+    style.width = "40px";
+    style.height = "40px";
+    style.borderRadius = "50%";
+  } else if (props.variant === "smallFeature") {
+    style.maxWidth = "100px";
+  } else if (props.variant === "largeFeature") {
+    style.maxHeight = "400px";
+  } else if (props.variant === "header") {
+    style.height = "200px";
+    style.objectFit = "cover";
+  }
+
+  return h("img", { src: props.url, alt: props.description || "", style });
+});
+
+const Icon = createVueComponent(IconApi, ({ props }) => {
+  const iconName =
+    typeof props.name === "string"
+      ? props.name
+      : (props.name as { path?: string })?.path;
+  const style = {
+    ...getBaseLeafStyle(),
+    fontSize: "24px",
+    width: "24px",
+    height: "24px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+
+  return h("span", { class: "material-symbols-outlined", style }, iconName);
+});
+
+const Video = createVueComponent(VideoApi, ({ props }) => {
+  const style = {
+    ...getBaseLeafStyle(),
+    width: "100%",
+    aspectRatio: "16/9",
+  };
+
+  return h("video", { src: props.url, controls: true, style });
+});
+
+const AudioPlayer = createVueComponent(AudioPlayerApi, ({ props }) => {
+  const style = { ...getBaseLeafStyle(), width: "100%" };
+
+  return h(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        width: "100%",
+      },
+    },
+    [
+      props.description
+        ? h(
+            "span",
+            { style: { fontSize: "12px", color: "#666" } },
+            props.description,
+          )
+        : null,
+      h("audio", { src: props.url, controls: true, style }),
+    ],
+  );
+});
+
+const Row = createVueComponent(RowApi, ({ props, buildChild }) => {
+  return h(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: mapJustify(props.justify),
+        alignItems: mapAlign(props.align),
+        width: "100%",
+        margin: "0",
+        padding: "0",
+      },
+    },
+    renderChildList(props.children, buildChild),
+  );
+});
+
+const Column = createVueComponent(ColumnApi, ({ props, buildChild }) => {
+  return h(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: mapJustify(props.justify),
+        alignItems: mapAlign(props.align),
+        width: "100%",
+        margin: "0",
+        padding: "0",
+      },
+    },
+    renderChildList(props.children, buildChild),
+  );
+});
+
+const List = createVueComponent(ListApi, ({ props, buildChild }) => {
+  const isHorizontal = props.direction === "horizontal";
+  const style = {
+    display: "flex",
+    flexDirection: isHorizontal ? ("row" as const) : ("column" as const),
+    alignItems: mapAlign(props.align),
+    overflowX: isHorizontal ? ("auto" as const) : ("hidden" as const),
+    overflowY: isHorizontal ? ("hidden" as const) : ("auto" as const),
+    width: "100%",
+    margin: "0",
+    padding: "0",
+  };
+
+  return h("div", { style }, renderChildList(props.children, buildChild));
+});
+
+const Card = createVueComponent(CardApi, ({ props, buildChild }) => {
+  const style = {
+    ...getBaseContainerStyle(),
+    backgroundColor: "#fff",
+    boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+    width: "100%",
+  };
+
+  return h("div", { style }, [props.child ? buildChild(props.child) : null]);
+});
+
+const Tabs = createVueComponent(
+  TabsApi,
+  ({ props, buildChild, state }) => {
+    const tabs = props.tabs || [];
+
+    return h(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          margin: LEAF_MARGIN,
+        },
+      },
+      [
+        h(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: "1px solid #ccc",
+              marginBottom: "8px",
+            },
+          },
+          tabs.map((tab, i: number) => {
+            const title =
+              typeof tab.title === "string"
+                ? tab.title
+                : String(tab.title ?? "");
+            return h(
+              "button",
+              {
+                key: i,
+                onClick: () => {
+                  state.selectedIndex.value = i;
+                },
+                style: {
+                  padding: "8px 16px",
+                  border: "none",
+                  background: "none",
+                  borderBottom:
+                    state.selectedIndex.value === i
+                      ? "2px solid var(--a2ui-primary-color, #007bff)"
+                      : "none",
+                  fontWeight:
+                    state.selectedIndex.value === i ? "bold" : "normal",
+                  cursor: "pointer",
+                  color:
+                    state.selectedIndex.value === i
+                      ? "var(--a2ui-primary-color, #007bff)"
+                      : "inherit",
+                },
+              },
+              title,
+            );
+          }),
+        ),
+        h("div", { style: { flex: "1" } }, [
+          tabs[state.selectedIndex.value]?.child
+            ? buildChild(tabs[state.selectedIndex.value]!.child)
+            : null,
+        ]),
+      ],
+    );
+  },
+  () => ({ selectedIndex: ref(0) }),
+);
+
+const Divider = createVueComponent(DividerApi, ({ props }) => {
+  const isVertical = props.axis === "vertical";
+  const style: Record<string, string> = {
+    margin: LEAF_MARGIN,
+    border: "none",
+    backgroundColor: "#ccc",
+  };
+
+  if (isVertical) {
+    style.width = "1px";
+    style.height = "100%";
+  } else {
+    style.width = "100%";
+    style.height = "1px";
+  }
+
+  return h("div", { style });
+});
+
+const Modal = createVueComponent(
+  ModalApi,
+  ({ props, buildChild, state }) => {
+    return h("div", {}, [
+      h(
+        "div",
+        {
+          onClick: () => {
+            state.isOpen.value = true;
+          },
+          style: { display: "inline-block" },
+        },
+        [props.trigger ? buildChild(props.trigger) : null],
+      ),
+      state.isOpen.value
+        ? h(
+            "div",
+            {
+              style: {
+                position: "fixed",
+                top: "0",
+                left: "0",
+                right: "0",
+                bottom: "0",
+                backgroundColor: "rgba(0,0,0,0.5)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                zIndex: "1000",
+              },
+              onClick: () => {
+                state.isOpen.value = false;
+              },
+            },
+            [
+              h(
+                "div",
+                {
+                  style: {
+                    backgroundColor: "#fff",
+                    padding: "24px",
+                    borderRadius: "8px",
+                    maxWidth: "90%",
+                    maxHeight: "90%",
+                    overflow: "auto",
+                    display: "flex",
+                    flexDirection: "column",
+                  },
+                  onClick: (e: Event) => e.stopPropagation(),
+                },
+                [
+                  h(
+                    "div",
+                    { style: { display: "flex", justifyContent: "flex-end" } },
+                    [
+                      h(
+                        "button",
+                        {
+                          onClick: () => {
+                            state.isOpen.value = false;
+                          },
+                          style: {
+                            border: "none",
+                            background: "none",
+                            fontSize: "20px",
+                            cursor: "pointer",
+                            padding: "4px",
+                          },
+                        },
+                        "\u00D7",
+                      ),
+                    ],
+                  ),
+                  h("div", { style: { flex: "1" } }, [
+                    props.content ? buildChild(props.content) : null,
+                  ]),
+                ],
+              ),
+            ],
+          )
+        : null,
+    ]);
+  },
+  () => ({ isOpen: ref(false) }),
+);
+
+const Button = createVueComponent(ButtonApi, ({ props, buildChild }) => {
+  const style = {
+    margin: LEAF_MARGIN,
+    padding: "8px 16px",
+    cursor: "pointer",
+    border: props.variant === "borderless" ? "none" : "1px solid #ccc",
+    backgroundColor:
+      props.variant === "primary"
+        ? "var(--a2ui-primary-color, #007bff)"
+        : props.variant === "borderless"
+          ? "transparent"
+          : "#fff",
+    color: props.variant === "primary" ? "#fff" : "inherit",
+    borderRadius: "4px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+  };
+
+  return h(
+    "button",
+    {
+      style,
+      onClick: props.action,
+      disabled: props.isValid === false,
+    },
+    [props.child ? buildChild(props.child) : null],
+  );
+});
+
+const TextField = createVueComponent(TextFieldApi, ({ props, state }) => {
+  const uniqueId = state.id;
+  const isLong = props.variant === "longText";
+  const type =
+    props.variant === "number"
+      ? "number"
+      : props.variant === "obscured"
+        ? "password"
+        : "text";
+
+  const inputStyle = {
+    padding: "8px",
+    width: "100%",
+    border:
+      props.validationErrors && props.validationErrors.length > 0
+        ? "1px solid red"
+        : STANDARD_BORDER,
+    borderRadius: STANDARD_RADIUS,
+    boxSizing: "border-box",
+  };
+
+  const hasError = props.validationErrors && props.validationErrors.length > 0;
+
+  return h(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        width: "100%",
+        margin: LEAF_MARGIN,
+      },
+    },
+    [
+      props.label
+        ? h(
+            "label",
+            { for: uniqueId, style: { fontSize: "14px", fontWeight: "bold" } },
+            props.label,
+          )
+        : null,
+      isLong
+        ? h("textarea", {
+            id: uniqueId,
+            style: inputStyle,
+            value: props.value || "",
+            onInput: (e: Event) =>
+              props.setValue((e.target as HTMLTextAreaElement).value),
+          })
+        : h("input", {
+            id: uniqueId,
+            type,
+            style: inputStyle,
+            value: props.value || "",
+            onInput: (e: Event) =>
+              props.setValue((e.target as HTMLInputElement).value),
+          }),
+      hasError
+        ? h(
+            "span",
+            { style: { fontSize: "12px", color: "red" } },
+            props.validationErrors![0],
+          )
+        : null,
+    ],
+  );
+}, () => ({ id: useA2UIUniqueId() }));
+
+const CheckBox = createVueComponent(CheckBoxApi, ({ props, state }) => {
+  const uniqueId = state.id;
+  const hasError = props.validationErrors && props.validationErrors.length > 0;
+
+  return h(
+    "div",
+    {
+      style: { display: "flex", flexDirection: "column", margin: LEAF_MARGIN },
+    },
+    [
+      h(
+        "div",
+        { style: { display: "flex", alignItems: "center", gap: "8px" } },
+        [
+          h("input", {
+            id: uniqueId,
+            type: "checkbox",
+            checked: !!props.value,
+            onChange: (e: Event) =>
+              props.setValue((e.target as HTMLInputElement).checked),
+            style: {
+              cursor: "pointer",
+              outline: hasError ? "1px solid red" : "none",
+            },
+          }),
+          props.label
+            ? h(
+                "label",
+                {
+                  for: uniqueId,
+                  style: {
+                    cursor: "pointer",
+                    color: hasError ? "red" : "inherit",
+                  },
+                },
+                props.label,
+              )
+            : null,
+        ],
+      ),
+      hasError
+        ? h(
+            "span",
+            {
+              style: { fontSize: "12px", color: "red", marginTop: "4px" },
+            },
+            props.validationErrors?.[0],
+          )
+        : null,
+    ],
+  );
+}, () => ({ id: useA2UIUniqueId() }));
+
+const ChoicePicker = createVueComponent(
+  ChoicePickerApi,
+  ({ props, context, state }) => {
+    const values = Array.isArray(props.value) ? props.value : [];
+    const isMutuallyExclusive = props.variant === "mutuallyExclusive";
+
+    const onToggle = (val: string) => {
+      if (isMutuallyExclusive) {
+        props.setValue([val]);
+      } else {
+        const newValues = values.includes(val)
+          ? values.filter((v: string) => v !== val)
+          : [...values, val];
+        props.setValue(newValues);
+      }
+    };
+
+    type ChoiceOption = {
+      label?: string | Record<string, unknown>;
+      value: string;
+    };
+    const options = (props.options || []).filter(
+      (opt: ChoiceOption) =>
+        !props.filterable ||
+        state.filter.value === "" ||
+        String(typeof opt.label === "string" ? opt.label : "")
+          .toLowerCase()
+          .includes(state.filter.value.toLowerCase()),
+    );
+
+    return h(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          margin: LEAF_MARGIN,
+          width: "100%",
+        },
+      },
+      [
+        props.label
+          ? h("strong", { style: { fontSize: "14px" } }, props.label)
+          : null,
+        props.filterable
+          ? h("input", {
+              type: "text",
+              placeholder: "Filter options...",
+              value: state.filter.value,
+              onInput: (e: Event) => {
+                state.filter.value = (e.target as HTMLInputElement).value;
+              },
+              style: {
+                padding: "4px 8px",
+                border: STANDARD_BORDER,
+                borderRadius: STANDARD_RADIUS,
+              },
+            })
+          : null,
+        h(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: props.displayStyle === "chips" ? "row" : "column",
+              flexWrap: props.displayStyle === "chips" ? "wrap" : "nowrap",
+              gap: "8px",
+            },
+          },
+          options.map((opt: ChoiceOption, i: number) => {
+            const isSelected = values.includes(opt.value);
+            const label =
+              typeof opt.label === "string"
+                ? opt.label
+                : String(opt.label ?? opt.value);
+            if (props.displayStyle === "chips") {
+              return h(
+                "button",
+                {
+                  key: i,
+                  onClick: () => onToggle(opt.value),
+                  style: {
+                    padding: "4px 12px",
+                    borderRadius: "16px",
+                    border: isSelected
+                      ? "1px solid var(--a2ui-primary-color, #007bff)"
+                      : STANDARD_BORDER,
+                    backgroundColor: isSelected
+                      ? "var(--a2ui-primary-color, #007bff)"
+                      : "#fff",
+                    color: isSelected ? "#fff" : "inherit",
+                    cursor: "pointer",
+                    fontSize: "12px",
+                  },
+                },
+                label,
+              );
+            }
+            return h(
+              "label",
+              {
+                key: i,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  cursor: "pointer",
+                },
+              },
+              [
+                h("input", {
+                  type: isMutuallyExclusive ? "radio" : "checkbox",
+                  checked: isSelected,
+                  onChange: () => onToggle(opt.value),
+                  name: isMutuallyExclusive
+                    ? `choice-${context.componentModel.id}`
+                    : undefined,
+                }),
+                h("span", { style: { fontSize: "14px" } }, label),
+              ],
+            );
+          }),
+        ),
+      ],
+    );
+  },
+  () => ({ filter: ref("") }),
+);
+
+const Slider = createVueComponent(SliderApi, ({ props, state }) => {
+  const uniqueId = state.id;
+
+  return h(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        margin: LEAF_MARGIN,
+        width: "100%",
+      },
+    },
+    [
+      h(
+        "div",
+        { style: { display: "flex", justifyContent: "space-between" } },
+        [
+          props.label
+            ? h(
+                "label",
+                {
+                  for: uniqueId,
+                  style: { fontSize: "14px", fontWeight: "bold" },
+                },
+                props.label,
+              )
+            : null,
+          h(
+            "span",
+            { style: { fontSize: "12px", color: "#666" } },
+            String(props.value),
+          ),
+        ],
+      ),
+      h("input", {
+        id: uniqueId,
+        type: "range",
+        min: props.min ?? 0,
+        max: props.max,
+        value: props.value ?? 0,
+        onInput: (e: Event) =>
+          props.setValue(Number((e.target as HTMLInputElement).value)),
+        style: { width: "100%", cursor: "pointer" },
+      }),
+    ],
+  );
+}, () => ({ id: useA2UIUniqueId() }));
+
+const DateTimeInput = createVueComponent(DateTimeInputApi, ({ props, state }) => {
+  const uniqueId = state.id;
+
+  let type = "datetime-local";
+  if (props.enableDate && !props.enableTime) type = "date";
+  if (!props.enableDate && props.enableTime) type = "time";
+
+  const style = {
+    padding: "8px",
+    width: "100%",
+    border: STANDARD_BORDER,
+    borderRadius: STANDARD_RADIUS,
+    boxSizing: "border-box",
+  };
+
+  return h(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        width: "100%",
+        margin: LEAF_MARGIN,
+      },
+    },
+    [
+      props.label
+        ? h(
+            "label",
+            {
+              for: uniqueId,
+              style: { fontSize: "14px", fontWeight: "bold" },
+            },
+            props.label,
+          )
+        : null,
+      h("input", {
+        id: uniqueId,
+        type,
+        style,
+        value: props.value || "",
+        onInput: (e: Event) =>
+          props.setValue((e.target as HTMLInputElement).value),
+        min: typeof props.min === "string" ? props.min : undefined,
+        max: typeof props.max === "string" ? props.max : undefined,
+      }),
+    ],
+  );
+}, () => ({ id: useA2UIUniqueId() }));
+
+// ============================================================
+// Catalog Assembly
+// ============================================================
+
+const vueBasicComponents: VueComponentImplementation[] = [
+  Text,
+  Image,
+  Icon,
+  Video,
+  AudioPlayer,
+  Row,
+  Column,
+  List,
+  Card,
+  Tabs,
+  Divider,
+  Modal,
+  Button,
+  TextField,
+  CheckBox,
+  ChoicePicker,
+  Slider,
+  DateTimeInput,
+];
+
+export const vueBasicCatalog = new Catalog<VueComponentImplementation>(
+  "https://a2ui.org/specification/v0_9/basic_catalog.json",
+  vueBasicComponents,
+  BASIC_FUNCTIONS,
+);
+
+export {
+  Text,
+  Image,
+  Icon,
+  Video,
+  AudioPlayer,
+  Row,
+  Column,
+  List,
+  Card,
+  Tabs,
+  Divider,
+  Modal,
+  Button,
+  TextField,
+  CheckBox,
+  ChoicePicker,
+  Slider,
+  DateTimeInput,
+};