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

package/dist/widgets/Widget.vue.d.ts

@@ -0,0 +1,8 @@
+interface WidgetProps {
+    id: string;
+    content: string;
+    /** 外部传入的表单初始值（encodeURIComponent 后的 JSON 字符串），由 MarkdownUI 注入 */
+    data?: string;
+}
+declare const _default: import("vue").DefineComponent<WidgetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WidgetProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/widgets/chartRemoteData.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 图表远端数据源解析：
+ * - 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 declare function parseChartCsv(text: string): RemoteChartData | null;
+/** 归一化 JSON 响应为图表数据（labels + datasets） */
+export declare function normalizeRemoteChartData(json: any): RemoteChartData | null;

package/dist/widgets/index.d.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/dist/widgets/remoteChoices.d.ts

@@ -0,0 +1,22 @@
+/** 远端选项：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 declare function normalizeRemoteChoices(json: any): RemoteChoice[];
+/** 解析本地 choices 条目的 key:label 格式："bj:北京" → {value:"bj",label:"北京"}；不符规则时 value=label=原文 */
+export declare function parseChoice(c: string): RemoteChoice;
+/**
+ * 把本地 choices / default 值（可能写的是展示文案或 key:label 原文）映射到远端 value 体系：
+ * 条目本身已是 value 优先，字符串则用 label 匹配远端条目回查 value。
+ */
+export declare function resolveChoiceValue(c: string, remote: RemoteChoice[]): string;

package/dist/widgets/treeSelectTypes.d.ts

@@ -0,0 +1,43 @@
+/** 远端/静态 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;
+}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@c2-markdown-ui/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.4",
+  "description": "Vue renderer for markdown-ui",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./widgets.css": "./src/lib/widgets.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vue-tsc -p tsconfig.build.json && vite build",
+    "dev": "vite build --watch",
+    "demo": "node demo/server.js",
+    "prepublishOnly": "npm run build",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "keywords": [
+    "vue",
+    "markdown",
+    "widgets",
+    "ui"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vue-tsc": "^3.0.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tsconfig/node22": "^22.0.2",
+    "@vue/tsconfig": "^0.8.1"
+  }
+}

package/src/App.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>You did it!</h1>
+  <p>
+    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
+    documentation
+  </p>
+</template>
+
+<style scoped></style>

package/src/lib/MarkdownUI.vue

@@ -0,0 +1,105 @@
+<template>
+  <div ref="container" class="widget-container">
+    <div v-html="processedHtml"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, defineEmits, defineProps } from 'vue'
+import Widget from './widgets/Widget.vue'
+
+interface MarkdownUIProps {
+  html: string
+  /** 表单初始值：{ 字段id: 值 }，作用于页面中所有 form widget（仅取各自 fields 声明的 id）；优先级高于字段 default */
+  data?: Record<string, unknown>
+}
+
+interface MarkdownUIEvents {
+  widgetEvent: [data: any]
+  /** 表单提交事件：form 校验通过并点击提交时触发（独立于 widgetEvent 的 change 流） */
+  submit: [data: any]
+  /** 表单字段级统计事件：任一表单项被填写时触发，detail.stats 含 visibleCount / filledCount / values */
+  formChange: [data: any]
+}
+
+const props = defineProps<MarkdownUIProps>()
+const emit = defineEmits<MarkdownUIEvents>()
+
+const container = ref<HTMLDivElement>()
+
+/** 向 <markdown-ui-widget> 占位标签注入 data-widget-data 属性，把外部初始值带过 custom element 边界 */
+const processedHtml = computed(() => {
+  const data = props.data
+  if (!data || Object.keys(data).length === 0) return props.html
+  const encoded = encodeURIComponent(JSON.stringify(data))
+  return props.html.replace(/<markdown-ui-widget\b/g, `<markdown-ui-widget data-widget-data="${encoded}"`)
+})
+
+let MarkdownUIWidgetElement: typeof HTMLElement | undefined
+
+if (typeof HTMLElement !== 'undefined') {
+  MarkdownUIWidgetElement = class extends HTMLElement {
+    private vueApp: any = null
+    private mountPoint: HTMLElement | null = null
+
+    connectedCallback() {
+      const id = this.getAttribute('id') || ''
+      const content = this.getAttribute('content') || ''
+      const data = this.getAttribute('data-widget-data') || ''
+
+      this.innerHTML = ''
+      const div = document.createElement('div')
+      this.appendChild(div)
+      this.mountPoint = div
+
+      import('vue').then(({ createApp }) => {
+        this.vueApp = createApp(Widget, { id, content, data })
+        this.vueApp.mount(div)
+      })
+    }
+
+    disconnectedCallback() {
+      if (this.vueApp && this.mountPoint) {
+        this.vueApp.unmount()
+        this.vueApp = null
+        this.mountPoint = null
+      }
+    }
+  }
+
+  if (typeof window !== 'undefined' && !customElements.get('markdown-ui-widget')) {
+    customElements.define('markdown-ui-widget', MarkdownUIWidgetElement)
+  }
+}
+
+const handleWidgetEvent = (e: Event) => {
+  const customEvent = e as CustomEvent<{id: string, value: unknown}>
+  emit('widgetEvent', customEvent)
+}
+
+const handleSubmit = (e: Event) => {
+  const customEvent = e as CustomEvent<{id: string, value: unknown}>
+  emit('submit', customEvent)
+}
+
+const handleFormChange = (e: Event) => {
+  const customEvent = e as CustomEvent<{id: string, stats: unknown}>
+  emit('formChange', customEvent)
+}
+
+onMounted(() => {
+  if (container.value) {
+    container.value.addEventListener('widget-event', handleWidgetEvent)
+    container.value.addEventListener('widget-submit', handleSubmit)
+    container.value.addEventListener('widget-form-change', handleFormChange)
+  }
+})
+
+onUnmounted(() => {
+  if (container.value) {
+    container.value.removeEventListener('widget-event', handleWidgetEvent)
+    container.value.removeEventListener('widget-submit', handleSubmit)
+    container.value.removeEventListener('widget-form-change', handleFormChange)
+  }
+})
+</script>

package/src/lib/index.ts

@@ -0,0 +1,28 @@
+// 全局公共样式（widget-label-row / checkbox-group 等无 scoped 类，需消费者引入）
+import './widgets.css'
+
+// SFC scoped 样式：从包入口统一导入，消费方（Vite/Astro）按源码引入组件时会自动编译注入；
+// 库构建（vite lib mode）产物 dist/index.css 与之分离，入口导入保证源码消费路径样式不丢失
+import './widgets/Button.vue'
+import './widgets/ButtonGroup.vue'
+import './widgets/Cascader.vue'
+import './widgets/Chart.vue'
+import './widgets/DatePicker.vue'
+import './widgets/Form.vue'
+import './widgets/Incomplete.vue'
+import './widgets/MultipleChoiceQuestion.vue'
+import './widgets/NumberInput.vue'
+import './widgets/Quiz.vue'
+import './widgets/RadioGroup.vue'
+import './widgets/Select.vue'
+import './widgets/SelectMulti.vue'
+import './widgets/ShortAnswerQuestion.vue'
+import './widgets/Slider.vue'
+import './widgets/Switch.vue'
+import './widgets/Text.vue'
+import './widgets/TextInput.vue'
+import './widgets/TreeSelect.vue'
+import './widgets/Widget.vue'
+
+export { default as MarkdownUI } from './MarkdownUI.vue'
+export * from './widgets/index'

package/src/lib/widgets/Button.vue

@@ -0,0 +1,47 @@
+<template>
+  <button
+    type="button"
+    :class="`widget-button size-${size}`"
+    :style="buttonStyle"
+    @click="handleClick"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+interface ButtonProps {
+  /** 按钮文字 */
+  label?: string
+  /** 背景色（十六进制或 CSS 颜色名） */
+  color?: string
+  /** 字体颜色（十六进制或 CSS 颜色名） */
+  textColor?: string
+  /** 尺寸：small / medium / large，默认 medium */
+  size?: 'small' | 'medium' | 'large'
+}
+
+interface ButtonEvents {
+  change: [value: string]
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  label: '按钮',
+  size: 'medium'
+})
+
+const emit = defineEmits<ButtonEvents>()
+
+// 组合内联样式：背景色 + 字体颜色
+const buttonStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.color) style.backgroundColor = props.color
+  if (props.textColor) style.color = props.textColor
+  return Object.keys(style).length > 0 ? style : undefined
+})
+
+const handleClick = () => {
+  emit('change', props.label)
+}
+</script>

package/src/lib/widgets/ButtonGroup.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="widget-button-group">
+    <label v-if="label">{{ label }}</label>
+    <div role="group" :aria-label="label">
+      <button
+        v-for="choice in choices"
+        :key="choice"
+        type="button"
+        :aria-pressed="selected === choice"
+        @click="handleClick(choice)"
+      >
+        {{ choice }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits } from 'vue'
+
+interface ButtonGroupProps {
+  choices: string[]
+  label?: string
+  default?: string
+}
+
+interface ButtonGroupEvents {
+  change: [value: string]
+}
+
+const props = withDefaults(defineProps<ButtonGroupProps>(), {
+  label: ''
+})
+
+const emit = defineEmits<ButtonGroupEvents>()
+
+const selected = ref(props.default ?? props.choices[0])
+
+const handleClick = (choice: string) => {
+  selected.value = choice
+  emit('change', choice)
+}
+</script>