@antglobal/copilot-cards-mini-program 0.0.0 → 0.0.20260724033338-dev.3

package/dist/components/card-icon/definition.js

@@ -0,0 +1,17 @@
+function createCardIconComponent() {
+    return {
+        // Alipay mini program component input.
+        props: {
+            node: null,
+        },
+        // WeChat mini program component input.
+        properties: {
+            node: {
+                type: Object,
+                value: null,
+            },
+        },
+    };
+}
+
+export { createCardIconComponent };

package/dist/components/card-icon/index.acss

@@ -0,0 +1,19 @@
+.card-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 0;
+}
+
+.card-icon__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.card-icon__text {
+  display: block;
+  line-height: 1;
+}

package/dist/components/card-icon/index.axml

@@ -0,0 +1,16 @@
+<view
+  class="card-icon"
+  style="{{node.props._styleString || ''}}; width: {{node.props._iconSize}}px; height: {{node.props._iconSize}}px;"
+>
+  <image
+    a:if="{{node.props._iconKind === 'image'}}"
+    class="card-icon__image"
+    src="{{node.props._iconSrc}}"
+    mode="aspectFit"
+  />
+  <text
+    a:else
+    class="card-icon__text"
+    style="font-size: {{node.props._iconSize}}px; color: {{node.props.color || 'currentColor'}};"
+  >{{node.props._iconText}}</text>
+</view>

package/dist/components/card-icon/index.d.ts

@@ -0,0 +1 @@
+export { createCardIconComponent } from './definition.js';

package/dist/components/card-icon/index.js

@@ -0,0 +1,8 @@
+import { createCardIconComponent } from './definition.js';
+
+const componentRegistrar = globalThis.Component;
+if (typeof componentRegistrar === 'function') {
+    componentRegistrar(createCardIconComponent());
+}
+
+export { createCardIconComponent };

package/dist/components/card-icon/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/components/card-icon/index.wxml

@@ -0,0 +1,16 @@
+<view
+  class="card-icon"
+  style="{{node.props._styleString || ''}}; width: {{node.props._iconSize}}px; height: {{node.props._iconSize}}px;"
+>
+  <image
+    wx:if="{{node.props._iconKind === 'image'}}"
+    class="card-icon__image"
+    src="{{node.props._iconSrc}}"
+    mode="aspectFit"
+  />
+  <text
+    wx:else
+    class="card-icon__text"
+    style="font-size: {{node.props._iconSize}}px; color: {{node.props.color || 'currentColor'}};"
+  >{{node.props._iconText}}</text>
+</view>

package/dist/components/card-icon/index.wxss

@@ -0,0 +1,19 @@
+.card-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 0;
+}
+
+.card-icon__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.card-icon__text {
+  display: block;
+  line-height: 1;
+}

package/dist/components/card-image/index.acss

@@ -0,0 +1,7 @@
+.card-image {
+  display: flex;
+}
+
+.card-image__img {
+  display: block;
+}

package/dist/components/card-image/index.axml

@@ -0,0 +1,9 @@
+<!-- card-image: Alipay template -->
+<view class="card-image" style="{{node.props._styleString || ''}}" onTap="onTap">
+  <image
+    class="card-image__img"
+    src="{{node.props.src}}"
+    mode="{{node.props.objectFit === 'cover' ? 'aspectFill' : node.props.objectFit === 'contain' ? 'aspectFit' : 'widthFix'}}"
+    style="width: {{node.props.width || '100%'}}; height: {{node.props.height || 'auto'}}; border-radius: {{node.props.borderRadius || '0'}};"
+  />
+</view>

package/dist/components/card-image/index.d.ts

@@ -0,0 +1,22 @@
+import { MiniProgramRenderNode } from '../../renderer/index.js';
+
+/**
+ * card-image — Image component for mini-program.
+ */
+
+interface CardImageInstance {
+    props: {
+        node: MiniProgramRenderNode | null;
+    };
+    triggerEvent(name: string, detail?: any): void;
+}
+declare function createCardImageComponent(): {
+    props: {
+        node: null;
+    };
+    methods: {
+        onTap(this: CardImageInstance): void;
+    };
+};
+
+export { createCardImageComponent };

package/dist/components/card-image/index.js

@@ -0,0 +1,22 @@
+/**
+ * card-image — Image component for mini-program.
+ */
+function createCardImageComponent() {
+    return {
+        props: {
+            node: null,
+        },
+        methods: {
+            onTap() {
+                if (!this.props.node?.events.includes('onClick'))
+                    return;
+                this.triggerEvent('event', {
+                    nodeId: this.props.node.id,
+                    eventName: 'onClick',
+                });
+            },
+        },
+    };
+}
+
+export { createCardImageComponent };

package/dist/components/card-image/index.wxml

@@ -0,0 +1,9 @@
+<!-- card-image: WeChat template -->
+<view class="card-image" style="{{node.props._styleString || ''}}" bindtap="onTap">
+  <image
+    class="card-image__img"
+    src="{{node.props.src}}"
+    mode="{{node.props.objectFit === 'cover' ? 'aspectFill' : node.props.objectFit === 'contain' ? 'aspectFit' : 'widthFix'}}"
+    style="width: {{node.props.width || '100%'}}; height: {{node.props.height || 'auto'}}; border-radius: {{node.props.borderRadius || '0'}};"
+  />
+</view>

package/dist/components/card-input/index.acss

@@ -0,0 +1,24 @@
+.card-input {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-input__label {
+  font-size: 28rpx;
+  color: #333333;
+  margin-bottom: 8rpx;
+}
+
+.card-input__field {
+  border: 1rpx solid #D9D9D9;
+  border-radius: 8rpx;
+  padding: 16rpx 24rpx;
+  font-size: 28rpx;
+  color: #333333;
+  background-color: #FFFFFF;
+}
+
+.card-input__field--disabled {
+  background-color: #F5F5F5;
+  color: #C0C0C0;
+}

package/dist/components/card-input/index.axml

@@ -0,0 +1,16 @@
+<!-- card-input: Alipay template -->
+<view class="card-input" style="{{node.props._styleString || ''}}">
+  <text a:if="{{node.props.label}}" class="card-input__label">{{node.props.label}}</text>
+  <input
+    class="card-input__field {{node.disabled ? 'card-input__field--disabled' : ''}}"
+    type="{{node.props.type || 'text'}}"
+    password="{{node.props.type === 'password'}}"
+    placeholder="{{node.props.placeholder || ''}}"
+    value="{{node.props.value || ''}}"
+    disabled="{{node.disabled}}"
+    maxlength="{{node.props.maxLength || -1}}"
+    onInput="onInput"
+    onBlur="onChange"
+    onConfirm="onConfirm"
+  />
+</view>

package/dist/components/card-input/index.d.ts

@@ -0,0 +1,25 @@
+import { MiniProgramRenderNode } from '../../renderer/index.js';
+
+/**
+ * card-input — Input component for mini-program.
+ * Supports text/password/number types with placeholder and label.
+ */
+
+interface CardInputInstance {
+    props: {
+        node: MiniProgramRenderNode | null;
+    };
+    triggerEvent(name: string, detail?: any): void;
+}
+declare function createCardInputComponent(): {
+    props: {
+        node: null;
+    };
+    methods: {
+        onInput(this: CardInputInstance, e: any): void;
+        onChange(this: CardInputInstance, e: any): void;
+        onConfirm(this: CardInputInstance, e: any): void;
+    };
+};
+
+export { createCardInputComponent };

package/dist/components/card-input/index.js

@@ -0,0 +1,45 @@
+/**
+ * card-input — Input component for mini-program.
+ * Supports text/password/number types with placeholder and label.
+ */
+function createCardInputComponent() {
+    return {
+        props: {
+            node: null,
+        },
+        methods: {
+            onInput(e) {
+                const value = e.detail?.value ?? '';
+                if (!this.props.node)
+                    return;
+                this.triggerEvent('event', {
+                    nodeId: this.props.node.id,
+                    eventName: 'onInput',
+                    value,
+                });
+            },
+            onChange(e) {
+                const value = e.detail?.value ?? '';
+                if (!this.props.node)
+                    return;
+                this.triggerEvent('event', {
+                    nodeId: this.props.node.id,
+                    eventName: 'onChange',
+                    value,
+                });
+            },
+            onConfirm(e) {
+                const value = e.detail?.value ?? '';
+                if (!this.props.node)
+                    return;
+                this.triggerEvent('event', {
+                    nodeId: this.props.node.id,
+                    eventName: 'onSubmit',
+                    value,
+                });
+            },
+        },
+    };
+}
+
+export { createCardInputComponent };

package/dist/components/card-input/index.wxml

@@ -0,0 +1,16 @@
+<!-- card-input: WeChat template -->
+<view class="card-input" style="{{node.props._styleString || ''}}">
+  <text wx:if="{{node.props.label}}" class="card-input__label">{{node.props.label}}</text>
+  <input
+    class="card-input__field {{node.disabled ? 'card-input__field--disabled' : ''}}"
+    type="{{node.props.type || 'text'}}"
+    password="{{node.props.type === 'password'}}"
+    placeholder="{{node.props.placeholder || ''}}"
+    value="{{node.props.value || ''}}"
+    disabled="{{node.disabled}}"
+    maxlength="{{node.props.maxLength || -1}}"
+    bindinput="onInput"
+    bindblur="onChange"
+    bindconfirm="onConfirm"
+  />
+</view>

package/dist/components/card-node/index.acss

@@ -0,0 +1,5 @@
+.card-container {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}

package/dist/components/card-node/index.axml

@@ -0,0 +1,30 @@
+<!-- card-node: Alipay recursive dispatcher template -->
+<block a:if="{{node && node.visible}}">
+  <!-- Text -->
+  <card-text a:if="{{node.type === 'Text'}}" node="{{node}}" onEvent="onEvent" />
+
+  <!-- Button -->
+  <card-button a:elif="{{node.type === 'Button'}}" node="{{node}}" onEvent="onEvent" />
+
+  <!-- Image -->
+  <card-image a:elif="{{node.type === 'Image'}}" node="{{node}}" onEvent="onEvent" />
+
+  <!-- Icon -->
+  <card-icon a:elif="{{node.type === 'Icon'}}" node="{{node}}" />
+
+  <!-- Input -->
+  <card-input a:elif="{{node.type === 'Input'}}" node="{{node}}" onEvent="onEvent" />
+
+  <!-- Divider -->
+  <card-divider a:elif="{{node.type === 'Divider'}}" node="{{node}}" />
+
+  <!-- Default container (unknown type or layout container) -->
+  <view a:else class="card-container card-{{node.type}}" style="{{node.props._styleString || ''}}">
+    <card-node
+      a:for="{{node.children}}"
+      a:key="id"
+      node="{{item}}"
+      onEvent="onEvent"
+    />
+  </view>
+</block>

package/dist/components/card-node/index.d.ts

@@ -0,0 +1,31 @@
+import { MiniProgramRenderNode } from '../../renderer/index.js';
+
+/**
+ * card-node — Recursive dispatcher component.
+ *
+ * Receives a MiniProgramRenderNode and dispatches rendering
+ * to the appropriate typed component based on node.type.
+ * For unknown types, renders as a generic container with children.
+ */
+
+interface CardNodeInstance {
+    props: {
+        node: MiniProgramRenderNode | null;
+    };
+    triggerEvent(name: string, detail?: any): void;
+}
+declare function createCardNodeComponent(): {
+    props: {
+        node: null;
+    };
+    methods: {
+        /**
+         * Bubble events up to card-root.
+         * Each leaf component calls triggerEvent('event', { nodeId, eventName, ... })
+         * which flows through card-node → card-root.
+         */
+        onEvent(this: CardNodeInstance, e: any): void;
+    };
+};
+
+export { createCardNodeComponent };

package/dist/components/card-node/index.js

@@ -0,0 +1,28 @@
+/**
+ * card-node — Recursive dispatcher component.
+ *
+ * Receives a MiniProgramRenderNode and dispatches rendering
+ * to the appropriate typed component based on node.type.
+ * For unknown types, renders as a generic container with children.
+ */
+// ─── Component Definition ────────────────────────────────────────
+function createCardNodeComponent() {
+    return {
+        props: {
+            node: null,
+        },
+        methods: {
+            /**
+             * Bubble events up to card-root.
+             * Each leaf component calls triggerEvent('event', { nodeId, eventName, ... })
+             * which flows through card-node → card-root.
+             */
+            onEvent(e) {
+                // Pass through to parent
+                this.triggerEvent('event', e.detail ?? e);
+            },
+        },
+    };
+}
+
+export { createCardNodeComponent };

package/dist/components/card-node/index.wxml

@@ -0,0 +1,30 @@
+<!-- card-node: WeChat recursive dispatcher template -->
+<block wx:if="{{node && node.visible}}">
+  <!-- Text -->
+  <card-text wx:if="{{node.type === 'Text'}}" node="{{node}}" bind:event="onEvent" />
+
+  <!-- Button -->
+  <card-button wx:elif="{{node.type === 'Button'}}" node="{{node}}" bind:event="onEvent" />
+
+  <!-- Image -->
+  <card-image wx:elif="{{node.type === 'Image'}}" node="{{node}}" bind:event="onEvent" />
+
+  <!-- Icon -->
+  <card-icon wx:elif="{{node.type === 'Icon'}}" node="{{node}}" />
+
+  <!-- Input -->
+  <card-input wx:elif="{{node.type === 'Input'}}" node="{{node}}" bind:event="onEvent" />
+
+  <!-- Divider -->
+  <card-divider wx:elif="{{node.type === 'Divider'}}" node="{{node}}" />
+
+  <!-- Default container (unknown type or layout container) -->
+  <view wx:else class="card-container card-{{node.type}}" style="{{node.props._styleString || ''}}">
+    <card-node
+      wx:for="{{node.children}}"
+      wx:key="id"
+      node="{{item}}"
+      bind:event="onEvent"
+    />
+  </view>
+</block>

package/dist/components/card-root/index.acss

@@ -0,0 +1,4 @@
+.copilot-card-root {
+  width: 100%;
+  box-sizing: border-box;
+}

package/dist/components/card-root/index.axml

@@ -0,0 +1,4 @@
+<!-- card-root: Alipay mini-program template -->
+<view class="copilot-card-root">
+  <card-node a:if="{{tree}}" node="{{tree}}" onEvent="handleEvent" />
+</view>

package/dist/components/card-root/index.d.ts

@@ -0,0 +1,78 @@
+import { MiniProgramRenderNode, MiniProgramCardInstance } from '../../renderer/index.js';
+import { MiniProgramAdapter } from '../../adapter/index.js';
+import { CardSchemaInput } from '@antglobal/copilot-cards-core';
+
+/**
+ * card-root — Root container component for mini-program card rendering.
+ *
+ * This is the entry point component that accepts a CardSchema,
+ * initializes the renderer, and drives the recursive rendering pipeline.
+ *
+ * Usage in page AXML/WXML:
+ * ```xml
+ * <card-root schema="{{cardSchema}}" variables="{{variables}}" />
+ * ```
+ */
+
+interface CardRootProps {
+    /** The card schema JSON */
+    schema: CardSchemaInput | null;
+    /** External variables to merge */
+    variables: Record<string, any> | null;
+    /** Platform adapter instance (injected from page) */
+    adapter: MiniProgramAdapter | null;
+    /** Bot ID for bot-scoped action handlers */
+    botId: string;
+}
+interface CardRootData {
+    tree: MiniProgramRenderNode | null;
+}
+/**
+ * Mini-program component instance interface.
+ * This is the `this` context inside Component() methods.
+ */
+interface CardRootInstance {
+    props: CardRootProps;
+    data: CardRootData;
+    _instance: MiniProgramCardInstance | null;
+    setData(data: Partial<CardRootData>): void;
+    triggerEvent(name: string, detail?: any): void;
+}
+/**
+ * Create the card-root component definition object.
+ *
+ * This returns a plain object that can be passed to the platform's
+ * `Component()` constructor (Alipay or WeChat).
+ *
+ * @example
+ * ```ts
+ * // Alipay
+ * Component(createCardRootComponent());
+ *
+ * // WeChat
+ * Component(createCardRootComponent());
+ * ```
+ */
+declare function createCardRootComponent(): {
+    props: {
+        schema: null;
+        variables: null;
+        adapter: null;
+        botId: string;
+    };
+    data: {
+        tree: null;
+    };
+    didMount(this: CardRootInstance): void;
+    attached(this: CardRootInstance): void;
+    didUpdate(this: CardRootInstance, prevProps: CardRootProps): void;
+    didUnmount(this: CardRootInstance): void;
+    detached(this: CardRootInstance): void;
+    methods: {
+        handleEvent(this: CardRootInstance, e: any): Promise<void>;
+    };
+    _instance: MiniProgramCardInstance | null;
+};
+
+export { createCardRootComponent };
+export type { CardRootData, CardRootProps };

package/dist/components/card-root/index.js

@@ -0,0 +1,93 @@
+import { renderForMiniProgram } from '../../renderer/index.js';
+
+/**
+ * card-root — Root container component for mini-program card rendering.
+ *
+ * This is the entry point component that accepts a CardSchema,
+ * initializes the renderer, and drives the recursive rendering pipeline.
+ *
+ * Usage in page AXML/WXML:
+ * ```xml
+ * <card-root schema="{{cardSchema}}" variables="{{variables}}" />
+ * ```
+ */
+// ─── Component Definition ────────────────────────────────────────
+/**
+ * Create the card-root component definition object.
+ *
+ * This returns a plain object that can be passed to the platform's
+ * `Component()` constructor (Alipay or WeChat).
+ *
+ * @example
+ * ```ts
+ * // Alipay
+ * Component(createCardRootComponent());
+ *
+ * // WeChat
+ * Component(createCardRootComponent());
+ * ```
+ */
+function createCardRootComponent() {
+    function init(ctx) {
+        if (!ctx.props.schema || !ctx.props.adapter) {
+            console.warn('[card-root] Missing schema or adapter prop');
+            return;
+        }
+        ctx._instance = renderForMiniProgram(ctx.props.schema, {
+            adapter: ctx.props.adapter,
+            data: ctx.props.variables ?? undefined,
+            botId: ctx.props.botId || undefined,
+            onEmit: (eventName, payload) => {
+                ctx.triggerEvent('emit', { eventName, payload });
+            },
+        });
+        ctx.setData({ tree: ctx._instance.getData().tree });
+    }
+    return {
+        props: {
+            schema: null,
+            variables: null,
+            adapter: null,
+            botId: '',
+        },
+        data: {
+            tree: null,
+        },
+        // Alipay lifecycle
+        didMount() {
+            init(this);
+        },
+        // WeChat lifecycle
+        attached() {
+            init(this);
+        },
+        didUpdate(prevProps) {
+            if (prevProps.variables !== this.props.variables && this._instance) {
+                const result = this._instance.updateVariables(this.props.variables ?? {});
+                this.setData({ tree: result.tree });
+            }
+        },
+        didUnmount() {
+            this._instance?.dispose();
+            this._instance = null;
+        },
+        detached() {
+            this._instance?.dispose();
+            this._instance = null;
+        },
+        methods: {
+            async handleEvent(e) {
+                const detail = e.detail ?? e.target?.dataset ?? {};
+                const { nodeId, eventName } = detail;
+                if (!nodeId || !eventName || !this._instance)
+                    return;
+                await this._instance.handleEvent(nodeId, eventName, detail.value ?? detail);
+                // Re-sync data after event handling (variables may have changed)
+                this.setData({ tree: this._instance.getData().tree });
+            },
+        },
+        _instance: null,
+    };
+}
+
+export { createCardRootComponent };

package/dist/components/card-root/index.wxml

@@ -0,0 +1,4 @@
+<!-- card-root: WeChat mini-program template -->
+<view class="copilot-card-root">
+  <card-node wx:if="{{tree}}" node="{{tree}}" bind:event="handleEvent" />
+</view>

package/dist/components/card-text/index.acss

@@ -0,0 +1,11 @@
+.card-text {
+  word-break: break-word;
+}
+
+.card-text--bold {
+  font-weight: 600;
+}
+
+.card-text--italic {
+  font-style: italic;
+}

package/dist/components/card-text/index.axml

@@ -0,0 +1,8 @@
+<!-- card-text: Alipay template -->
+<view
+  class="card-text {{node.props.bold ? 'card-text--bold' : ''}} {{node.props.italic ? 'card-text--italic' : ''}}"
+  style="font-size: {{node.props.fontSize || '14px'}}; color: {{node.props.color || '#333333'}}; line-height: {{node.props.lineHeight || '1.5'}}; text-align: {{node.props.textAlign || 'left'}}; {{node.props.style ? node.props._styleString : ''}}"
+  onTap="onTap"
+>
+  <text>{{node.props.content}}</text>
+</view>