@c2-markdown-ui/svelte 0.0.0-stage → 0.4.2

package/src/lib/widgets/Widget.svelte

@@ -0,0 +1,90 @@
+<svelte:options
+  customElement={{
+    tag: 'markdown-ui-widget',
+    shadow: 'none',            // use 'none' if you want light-DOM
+    props: {
+      id: {               // the prop you asked for
+        type: 'String',        // treat incoming attribute as plain text
+        attribute: 'id',  // <markdown-ui-widget content="…">
+        reflect: true          // update the attribute if we change it
+      },
+      content: {               // the prop you asked for
+        type: 'String',        // treat incoming attribute as plain text
+        attribute: 'content',  // <markdown-ui-widget content="…">
+        reflect: true          // update the attribute if we change it
+      }
+    }
+  }}
+/>
+
+<script lang="ts">
+  import * as widgets from './index.js';
+
+  let { id, content } = $props();
+
+  // Type locking: track the first valid widget type we see to prevent flickering
+  let lockedType: string | null = null;
+
+  // Parse content and apply type locking
+  function parseContent(content: string): any {
+    try {
+      const decoded = JSON.parse(decodeURIComponent(content));
+
+      // If we have a valid type and no locked type yet, lock it
+      if (decoded.type && decoded.type !== 'incomplete' && !lockedType) {
+        lockedType = decoded.type;
+      }
+
+      // If we have a locked type but the new parse shows incomplete,
+      // keep using the locked type (prevents flickering)
+      if (lockedType && decoded.type === 'incomplete') {
+        return { ...decoded, type: lockedType, _streaming: true };
+      }
+
+      return decoded;
+    } catch (e) {
+      // If parsing fails but we have a locked type, return a streaming placeholder
+      if (lockedType) {
+        return { type: lockedType, _streaming: true, _pending: true };
+      }
+      return { type: "incomplete" };
+    }
+  }
+
+  // Use $derived to reactively parse content
+  let parsed: any = $derived(parseContent(content));
+
+  let Cmp = $derived(widgets[parsed.type as keyof typeof widgets]);
+
+  function dispatch(detail: any) {
+    try {
+      const host = $host();
+      if (host) {
+        host.dispatchEvent(
+          new CustomEvent('widget-event', {
+            detail: detail,
+            bubbles: true,
+            composed: true   // let it cross the shadow-root boundary
+          })
+        );
+      }
+    } catch (error) {
+      console.warn('Failed to dispatch widget event:', error);
+    }
+	}
+</script>
+
+<div class="widget" class:streaming={parsed._streaming}>
+  {#if Cmp}
+    <Cmp {...parsed} onchange={(value: any) => dispatch({id: id, value: value})}/>
+  {:else}
+    <span style="color:red">Unknown widget "{parsed.type}"</span>
+  {/if}
+</div>
+
+<style>
+  .widget.streaming {
+    /* Subtle visual indicator that content is still streaming */
+    opacity: 0.95;
+  }
+</style>

package/src/lib/widgets/chartRemoteData.ts

@@ -0,0 +1,84 @@
+/**
+ * 图表远端数据源解析：
+ * - CSV 文本（与 DSL 内嵌 CSV 同格式：首行 header「标签列,系列1,系列2...」，其后数据行）
+ * - JSON：支持 { labels, datasets:[{label,data}] } 及常见包装（{data|result} 内嵌）
+ */
+
+export interface ChartDataset {
+  label: string;
+  data: number[];
+}
+
+export interface RemoteChartData {
+  labels: string[];
+  datasets: ChartDataset[];
+}
+
+/** 解析 CSV 文本为图表数据（header 至少 2 列，数据列须为数字） */
+export function parseChartCsv(text: string): RemoteChartData | null {
+  const lines = text
+    .split('\n')
+    .map(l => l.trim())
+    .filter(l => l.length > 0);
+  if (lines.length === 0) return null;
+
+  const headers = lines[0].split(',').map(h => h.trim());
+  if (headers.length < 2) return null;
+
+  const labels: string[] = [];
+  const datasets: ChartDataset[] = headers.slice(1).map(label => ({ label, data: [] }));
+
+  for (let i = 1; i < lines.length; i++) {
+    const values = lines[i].split(',').map(v => v.trim());
+    if (values.length !== headers.length) return null;
+    labels.push(values[0]);
+    for (let j = 1; j < values.length; j++) {
+      const num = parseFloat(values[j]);
+      if (isNaN(num)) return null;
+      datasets[j - 1].data.push(num);
+    }
+  }
+  return { labels, datasets };
+}
+
+/** 归一化 JSON 响应为图表数据（labels + datasets） */
+export function normalizeRemoteChartData(json: any): RemoteChartData | null {
+  // 解开常见包装：{data|result|chart} 内嵌
+  let payload = json;
+  for (const key of ['data', 'result', 'chart']) {
+    if (payload && typeof payload === 'object' && !Array.isArray(payload)
+      && payload[key] && typeof payload[key] === 'object') {
+      payload = payload[key];
+    }
+  }
+
+  if (!payload || typeof payload !== 'object') return null;
+
+  // 直接是 { labels, datasets } 结构
+  let labels: any = payload.labels;
+  let datasets: any = payload.datasets;
+
+  // 数组形式：[{ label, value }] → 单系列
+  if (Array.isArray(payload) && payload.length > 0 && payload[0]?.label !== undefined && payload[0]?.value !== undefined) {
+    labels = payload.map((it: any) => it.label);
+    datasets = [{ label: 'Series', data: payload.map((it: any) => Number(it.value)) }];
+  }
+
+  if (!Array.isArray(labels) || !Array.isArray(datasets) || labels.length === 0 || datasets.length === 0) {
+    return null;
+  }
+
+  const normLabels = labels.map((l: any) => String(l));
+  const normDatasets: ChartDataset[] = [];
+  for (const ds of datasets) {
+    if (!ds || !Array.isArray(ds.data)) continue;
+    const data = ds.data.map((v: any) => {
+      const num = Number(v);
+      return isNaN(num) ? 0 : num;
+    });
+    normDatasets.push({ label: String(ds.label ?? 'Series'), data });
+  }
+  if (normDatasets.length === 0) return null;
+
+  return { labels: normLabels, datasets: normDatasets };
+}

package/src/lib/widgets/index.ts

@@ -0,0 +1,23 @@
+export { default as slider    } from './Slider.svelte';
+export { default as "date-picker" } from './DatePicker.svelte';
+export { default as button } from './Button.svelte';
+export { default as "button-group" } from './ButtonGroup.svelte';
+export { default as select    } from './Select.svelte';
+export { default as "select-multi"    } from './SelectMulti.svelte';
+export { default as "radio-group" } from './Radio.svelte';
+export { default as "cascade" } from './Cascader.svelte';
+export { default as "tree-select" } from './TreeSelect.svelte';
+export { default as switch } from './Switch.svelte';
+export { default as "text-input" } from './TextInput.svelte';
+export { default as "number-input" } from './NumberInput.svelte';
+export { default as text       } from './Text.svelte';
+export { default as form      } from './Form.svelte';
+export { default as row       } from './Row.svelte';
+export { default as "chart-line" } from './Chart.svelte';
+export { default as "chart-bar" } from './Chart.svelte';
+export { default as "chart-pie" } from './Chart.svelte';
+export { default as "chart-scatter" } from './Chart.svelte';
+export { default as incomplete } from './Incomplete.svelte';
+export { default as "multiple-choice-question" } from './MultipleChoiceQuestion.svelte';
+export { default as "short-answer-question" } from './ShortAnswerQuestion.svelte';
+export { default as "quiz" } from './Quiz.svelte';

package/src/lib/widgets/remoteChoices.ts

@@ -0,0 +1,90 @@
+/** 远端选项：value 是表单实际取值，label 是展示文案 */
+export interface RemoteChoice {
+  value: string;
+  label: string;
+}
+
+/**
+ * 兼容常见远端响应格式并归一化为 {value,label}：
+ * - ["测试"]                          → value=label="测试"
+ * - [{key:"test",label:"测试"}]       → value="test"（表单取值），label="测试"（展示）
+ * - [{value:"test",label:"测试"}]     → value="test"，label="测试"
+ * - {data:[...]} / {options:[...]} / {choices:[...]} / {items:[...]} → 取内嵌数组
+ *
+ * 对象条目取值优先级：value > key > id > name；展示优先级：label > name > text > value。
+ */
+export function normalizeRemoteChoices(json: any): RemoteChoice[] {
+  let list = json;
+  if (!Array.isArray(json)) {
+    list = Array.isArray(json?.data) ? json.data
+      : Array.isArray(json?.options) ? json.options
+      : Array.isArray(json?.choices) ? json.choices
+      : Array.isArray(json?.items) ? json.items
+      : [];
+  }
+  return list
+    .map((item: any): RemoteChoice | null => {
+      if (typeof item === 'string' || typeof item === 'number') {
+        const s = String(item);
+        return s ? { value: s, label: s } : null;
+      }
+      if (item && typeof item === 'object') {
+        const value = item.value ?? item.key ?? item.id ?? item.name;
+        if (value === undefined || value === null || value === '') return null;
+        const label = item.label ?? item.name ?? item.text ?? String(value);
+        return { value: String(value), label: String(label) };
+      }
+      return null;
+    })
+    .filter((c: RemoteChoice | null): c is RemoteChoice => c !== null);
+}
+
+/**
+ * 把选项集合解析为取值数组：条目本身已是 value 优先，字符串则用 label 匹配远端条目回查 value。
+ * 用于把本地 choices / default 值（可能写的是展示文案或 key:label 原文）映射到 value 体系。
+ */
+export function resolveChoiceValue(c: string, remote: RemoteChoice[]): string {
+  const parsed = parseChoice(c).value;
+  const hit = remote.find(r => r.value === c || r.label === c || r.value === parsed);
+  return hit ? hit.value : c;
+}
+
+/**
+ * 解析本地 choices 条目的 key:label 格式：
+ * - "bj:北京"  → {value: "bj", label: "北京"}（value 是表单实际取值，label 是展示文案）
+ * - "北京"     → {value: "北京", label: "北京"}（无冒号或不符合判定规则时视为纯文本）
+ * - "09:00"   → {value: "09:00", label: "09:00"}（纯数字 key 视为时间/比例值，保持原样）
+ * - "http://x" → 原样（label 以 // 开头视为 URL）
+ *
+ * 判定规则：按首个冒号分割，仅当 key 非空且不含空白、非纯数字，
+ * 且 label 非空、不以 // 开头时才视为 key:label。
+ */
+export function parseChoice(c: string): RemoteChoice {
+  const s = String(c ?? '');
+  const idx = s.indexOf(':');
+  if (idx > 0) {
+    const key = s.slice(0, idx);
+    const label = s.slice(idx + 1);
+    if (key && label && !/\s/.test(key) && !/^\d+$/.test(key) && !label.startsWith('//')) {
+      return { value: key, label };
+    }
+  }
+  return { value: s, label: s };
+}
+
+/** 把本地 choices（string[] 或对象数组）解析为 {value,label} 数组。
+ *  对象条目：value > key 取值（表单实际取值），label 缺省回落到 value */
+export function parseChoices(choices: string[] | Array<{ value?: string; key?: string; label?: string }> | undefined | null): RemoteChoice[] {
+  return (choices || []).map((c) => {
+    if (c !== null && typeof c === 'object') {
+      const value = (c as any).value ?? (c as any).key;
+      if (value === undefined || value === null || value === '') return null;
+      const valueStr = String(value);
+      const label = (c as any).label !== undefined && (c as any).label !== null && (c as any).label !== ''
+        ? String((c as any).label)
+        : valueStr;
+      return { value: valueStr, label };
+    }
+    return parseChoice(c as string);
+  }).filter((c: RemoteChoice | null): c is RemoteChoice => c !== null);
+}