@c2-markdown-ui/vue 0.0.0-stage → 0.4.4

package/src/lib/widgets/Widget.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="widget">
+    <component
+      v-if="WidgetComponent"
+      :is="WidgetComponent"
+      v-bind="parsed"
+      :initial-data="initialData"
+      @change="(value) => dispatch({ id: props.id, value })"
+      @submit="(value) => dispatchSubmit(props.id, value)"
+      @fieldchange="(stats) => dispatchFieldChange(props.id, stats)"
+    />
+    <span v-else style="color: red">
+      Unknown widget "{{ parsed.type }}"
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+import Button from './Button.vue'
+import ButtonGroup from './ButtonGroup.vue'
+import Cascader from './Cascader.vue'
+import TreeSelect from './TreeSelect.vue'
+import Chart from './Chart.vue'
+import Form from './Form.vue'
+import Incomplete from './Incomplete.vue'
+import Select from './Select.vue'
+import SelectMulti from './SelectMulti.vue'
+import Slider from './Slider.vue'
+import Switch from './Switch.vue'
+import TextInput from './TextInput.vue'
+import MultipleChoiceQuestion from './MultipleChoiceQuestion.vue'
+import ShortAnswerQuestion from './ShortAnswerQuestion.vue'
+import Quiz from './Quiz.vue'
+import RadioGroup from './RadioGroup.vue'
+import Text from './Text.vue'
+import NumberInput from './NumberInput.vue'
+import DatePicker from './DatePicker.vue'
+
+interface WidgetProps {
+  id: string
+  content: string
+  /** 外部传入的表单初始值（encodeURIComponent 后的 JSON 字符串），由 MarkdownUI 注入 */
+  data?: string
+}
+
+const props = defineProps<WidgetProps>()
+
+const widgets = {
+  'Button': Button,
+  'ButtonGroup': ButtonGroup,
+  'Cascader': Cascader,
+  'TreeSelect': TreeSelect,
+  'Chart': Chart,
+  'Form': Form,
+  'Incomplete': Incomplete,
+  // Support both PascalCase and DSL type strings for robustness
+  'MultipleChoiceQuestion': MultipleChoiceQuestion,
+  'multiple-choice-question': MultipleChoiceQuestion,
+  'Select': Select,
+  'SelectMulti': SelectMulti,
+  'ShortAnswerQuestion': ShortAnswerQuestion,
+  'short-answer-question': ShortAnswerQuestion,
+  'Slider': Slider,
+  'Switch': Switch,
+  'TextInput': TextInput,
+  'Quiz': Quiz,
+  'quiz': Quiz,
+  'RadioGroup': RadioGroup,
+  'radio-group': RadioGroup,
+  'Text': Text,
+  'text': Text,
+  'NumberInput': NumberInput,
+  'number-input': NumberInput,
+  'DatePicker': DatePicker,
+  'date-picker': DatePicker
+}
+
+const typeMapping: Record<string, keyof typeof widgets> = {
+  'button': 'Button',
+  'button-group': 'ButtonGroup',
+  'cascade': 'Cascader',
+  'tree-select': 'TreeSelect',
+  'chart-line': 'Chart',
+  'chart-bar': 'Chart',
+  'chart-pie': 'Chart',
+  'chart-scatter': 'Chart',
+  'form': 'Form',
+  'incomplete': 'Incomplete',
+  'multiple-choice-question': 'MultipleChoiceQuestion',
+  'quiz': 'Quiz',
+  'radio-group': 'RadioGroup',
+  'select': 'Select',
+  'select-multi': 'SelectMulti',
+  'short-answer-question': 'ShortAnswerQuestion',
+  'slider': 'Slider',
+  'switch': 'Switch',
+  'text': 'Text',
+  'text-input': 'TextInput',
+  'number-input': 'NumberInput',
+  'date-picker': 'DatePicker'
+}
+
+let parsed = { type: 'incomplete' }
+
+try {
+  parsed = JSON.parse(decodeURIComponent(props.content))
+} catch (e) {
+  // suppress intermediate states
+}
+
+// 解析外部注入的表单初始值（容错：非法 JSON 时忽略）
+const initialData = computed(() => {
+  if (!props.data) return undefined
+  try {
+    return JSON.parse(decodeURIComponent(props.data))
+  } catch {
+    return undefined
+  }
+})
+
+const WidgetComponent = computed(() => {
+  const rawType = parsed.type as string
+  const mapped = typeMapping[rawType] || rawType
+  let component = widgets[mapped as keyof typeof widgets]
+
+  // Fallback: try PascalCase from hyphen/underscore types
+  if (!component && typeof mapped === 'string') {
+    const pascal = mapped
+      .split(/[-_]/)
+      .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+      .join('')
+    component = widgets[pascal as keyof typeof widgets]
+  }
+
+  return component
+})
+
+const dispatch = (detail: any) => {
+  const event = new CustomEvent('widget-event', {
+    detail: detail,
+    bubbles: true,
+    composed: true
+  })
+
+  // Find the custom element and bubble up to find the closest widget container
+  const customElement = document.querySelector(`markdown-ui-widget[id="${props.id}"]`)
+  if (customElement) {
+    const container = customElement.closest('.widget-container')
+    if (container) {
+      container.dispatchEvent(event)
+    }
+  }
+}
+
+/** form 提交事件：独立于 widget-event，通过 widget-submit 派发 */
+const dispatchSubmit = (id: string, value: unknown) => {
+  const customElement = document.querySelector(`markdown-ui-widget[id="${id}"]`)
+  if (customElement) {
+    const container = customElement.closest('.widget-container')
+    if (container) {
+      container.dispatchEvent(new CustomEvent('widget-submit', {
+        detail: { id, value },
+        bubbles: true,
+        composed: true
+      }))
+    }
+  }
+}
+
+/** form 字段级统计事件：任一表单项被填写时通过 widget-form-change 派发 */
+const dispatchFieldChange = (id: string, stats: unknown) => {
+  const customElement = document.querySelector(`markdown-ui-widget[id="${id}"]`)
+  if (customElement) {
+    const container = customElement.closest('.widget-container')
+    if (container) {
+      container.dispatchEvent(new CustomEvent('widget-form-change', {
+        detail: { id, stats },
+        bubbles: true,
+        composed: true
+      }))
+    }
+  }
+}
+</script>

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,20 @@
+export { default as Button } from './Button.vue'
+export { default as ButtonGroup } from './ButtonGroup.vue'
+export { default as Cascader } from './Cascader.vue'
+export { default as Chart } from './Chart.vue'
+export { default as Form } from './Form.vue'
+export { default as Incomplete } from './Incomplete.vue'
+export { default as MultipleChoiceQuestion } from './MultipleChoiceQuestion.vue'
+export { default as Select } from './Select.vue'
+export { default as SelectMulti } from './SelectMulti.vue'
+export { default as TreeSelect } from './TreeSelect.vue'
+export { default as ShortAnswerQuestion } from './ShortAnswerQuestion.vue'
+export { default as Slider } from './Slider.vue'
+export { default as Switch } from './Switch.vue'
+export { default as TextInput } from './TextInput.vue'
+export { default as NumberInput } from './NumberInput.vue'
+export { default as DatePicker } from './DatePicker.vue'
+export { default as Text } from './Text.vue'
+export { default as Quiz } from './Quiz.vue'
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as Widget } from './Widget.vue'

package/src/lib/widgets/remoteChoices.ts

@@ -0,0 +1,64 @@
+/** 远端选项：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);
+}
+
+/** 解析本地 choices 条目的 key:label 格式："bj:北京" → {value:"bj",label:"北京"}；不符规则时 value=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 / default 值（可能写的是展示文案或 key:label 原文）映射到远端 value 体系：
+ * 条目本身已是 value 优先，字符串则用 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;
+}

package/src/lib/widgets/treeSelectTypes.ts

@@ -0,0 +1,49 @@
+// 树形选择组件共享类型：
+// 单独成文件是因为 TreeSelect.vue 的 <script setup>（主组件）与普通 <script>（TreeNode 子组件）
+// 是两个独立作用域，无法共享局部 interface；放此处两边统一 import，避免与 DOM 全局 Node 类型冲突
+
+/** 远端/静态 data 原始节点（容错：value/key、label/name 等字段映射） */
+export interface TreeNodeRaw {
+  value?: string | number
+  key?: string | number
+  label?: string | number
+  children?: TreeNodeRaw[]
+  loaded?: boolean
+  [k: string]: any
+}
+
+/** 内部归一化树节点 */
+export interface TreeSelectNode {
+  value: string
+  label: string
+  children: TreeSelectNode[]
+  loaded: boolean
+  depth: number
+}
+
+/** TreeSelect 组件 props */
+export interface TreeSelectProps {
+  choices: string[]
+  data?: TreeNodeRaw[]
+  url?: string
+  lazy?: boolean
+  /** 多选模式（antd 默认单选，multiple 开启多选） */
+  multiple?: boolean
+  /** 父子节点选中不关联（antd checkStrictly） */
+  checkStrictly?: boolean
+  /** 选中值回显策略：all / parent / child（antd SHOW_ALL/SHOW_PARENT/SHOW_CHILD） */
+  showCheckedStrategy?: string
+  /** 触发器最多显示的标签数，超出 +N（antd maxTagCount） */
+  maxTagCount?: number
+  /** 树连接线（antd treeLine） */
+  treeLine?: boolean
+  label?: string
+  default?: string | string[]
+  placeholder?: string
+  hint?: string
+  required?: boolean
+  message?: string
+  error?: string
+  disabled?: boolean
+  searchable?: boolean
+}