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

package/src/lib/widgets/NumberInput.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="widget-number-input" :class="{ 'widget-field-error': !!shownError }">
+    <div v-if="label || hint || required" class="widget-label-row">
+      <span v-if="required" class="widget-required-mark" aria-hidden="true">*</span>
+      <label v-if="label">{{ label }}</label>
+      <span v-if="hint" class="widget-hint" :data-hint="hint">ⓘ</span>
+    </div>
+    <div class="widget-field-content">
+      <div class="ni-wrap">
+        <input
+          type="text"
+          inputmode="decimal"
+          autocomplete="off"
+          v-model="text"
+          :class="{ 'widget-input-error': !!shownError }"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          @keydown="onKeydown"
+          @focusout="commit"
+          @input="onInput"
+        />
+        <span class="ni-steps" aria-hidden="true">
+          <button
+            type="button"
+            class="ni-step-up"
+            @click="stepBy(1)"
+            :disabled="disabled || atMax"
+            aria-label="增加"
+            tabindex="-1"
+          >
+            <svg viewBox="0 0 10 6" width="10" height="6"><path d="M5 0 L10 6 H0 Z" fill="currentColor" /></svg>
+          </button>
+          <button
+            type="button"
+            class="ni-step-down"
+            @click="stepBy(-1)"
+            :disabled="disabled || atMin"
+            aria-label="减少"
+            tabindex="-1"
+          >
+            <svg viewBox="0 0 10 6" width="10" height="6"><path d="M5 6 L0 0 H10 Z" fill="currentColor" /></svg>
+          </button>
+        </span>
+      </div>
+      <div v-if="shownError" class="widget-error-text" role="alert">{{ shownError }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits, watch } from 'vue'
+
+interface NumberInputProps {
+  label?: string
+  /** 最小值 */
+  min?: number
+  /** 最大值 */
+  max?: number
+  /** 步长（点击上下按钮/方向键的增减量），默认 1 */
+  step?: number
+  /** 数值精度（小数位数） */
+  precision?: number
+  default?: number
+  placeholder?: string
+  hint?: string
+  /** 是否必填：空值提交校验不通过 */
+  required?: boolean
+  /** 校验失败提示文案 */
+  message?: string
+  /** 外部（form 提交时）传入的错误信息，优先于组件内部即时校验 */
+  error?: string
+  /** 是否禁用 */
+  disabled?: boolean
+}
+
+interface NumberInputEvents {
+  change: [value: number | null]
+}
+
+const props = withDefaults(defineProps<NumberInputProps>(), {
+  label: '',
+  step: 1,
+  placeholder: '',
+  hint: '',
+  required: false,
+  message: '',
+  error: '',
+  disabled: false
+})
+
+const emit = defineEmits<NumberInputEvents>()
+
+/** 显示格式化：设置精度时固定位数小数（如 18 → "18.00"，antd 行为） */
+function format(v: number): string {
+  if (props.precision !== undefined && props.precision >= 0) return v.toFixed(props.precision)
+  return String(v)
+}
+
+/** 文本 → 数字：空串或输入中途态返回 null，非法文本返回 null */
+function parse(v: string): number | null {
+  const s = v.trim()
+  if (!s || s === '-' || s === '.' || s === '-.' || s === '+' || s === '+.') return null
+  const n = Number(s)
+  return isNaN(n) ? null : n
+}
+
+/** 应用精度四舍五入 + min/max 钳制 */
+function normalize(n: number): number {
+  if (props.precision !== undefined && props.precision >= 0) n = Number(n.toFixed(props.precision))
+  if (props.min !== undefined && n < props.min) n = props.min
+  if (props.max !== undefined && n > props.max) n = props.max
+  return n
+}
+
+/** 校验当前值：返回错误文案或空串 */
+function validate(v: number | null): string {
+  if (props.required && v === null) return props.message || (props.label ? `请填写${props.label}` : '该项为必填项')
+  return ''
+}
+
+// 输入框显示的原始文本：允许输入中途的临时态（如 "-" / "1."），失焦/回车时规范化
+const text = ref(props.default !== undefined && props.default !== null ? format(props.default) : '')
+const localError = ref('')
+
+// default 变化时同步显示（未交互前 DSL 默认值调整实时生效）
+watch(
+  () => props.default,
+  (v) => {
+    text.value = v !== undefined && v !== null ? format(v) : ''
+    localError.value = ''
+  }
+)
+
+/** 提交：规范化显示文本并对外发值（空/非法 → null） */
+function commit() {
+  const n = parse(text.value)
+  if (n === null) {
+    text.value = ''
+    localError.value = validate(null)
+    emit('change', null)
+    return
+  }
+  const v = normalize(n)
+  text.value = format(v)
+  localError.value = ''
+  emit('change', v)
+}
+
+/** 步进：direction 为 1（加）/ -1（减）；空值从 0（或 min/max）起步 */
+function stepBy(direction: 1 | -1) {
+  const base = parse(text.value)
+  const start = base ?? 0
+  const v = normalize(start + (props.step ?? 1) * direction)
+  text.value = format(v)
+  localError.value = ''
+  emit('change', v)
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    stepBy(1)
+  } else if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    stepBy(-1)
+  } else if (e.key === 'Enter') {
+    commit()
+  }
+}
+
+function onInput() {
+  if (localError.value) localError.value = validate(parse(text.value))
+}
+
+const current = computed(() => parse(text.value))
+const atMax = computed(() => props.max !== undefined && current.value !== null && current.value >= props.max)
+const atMin = computed(() => props.min !== undefined && current.value !== null && current.value <= props.min)
+const shownError = computed(() => props.error || localError.value)
+</script>

package/src/lib/widgets/Quiz.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="widget-quiz">
+    <div class="quiz-header">
+      <h2 class="quiz-title">{{ title }}</h2>
+      <div class="quiz-stats">
+        <div v-if="showProgress" class="quiz-progress">
+          <span class="quiz-progress-text">
+            Progress: {{ questionsAnswered }}/{{ questions.length }} questions
+          </span>
+          <div class="quiz-progress-bar">
+            <div class="quiz-progress-fill" :style="{ width: `${progressPercentage}%` }" />
+          </div>
+        </div>
+        <div v-if="showScore" class="quiz-score">
+          <span class="quiz-score-text">
+            Score: {{ totalScore }}/{{ maxScore }} ({{ scorePercentage }}%)
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="quiz-questions">
+      <div v-for="q in questions" :key="q.id">
+        <div v-if="q.type === 'mcq'" class="quiz-question">
+          <div class="quiz-question-header">
+            <h3 class="quiz-question-text">{{ q.question }}</h3>
+            <span class="quiz-question-points">{{ q.points }} pts</span>
+          </div>
+          <div class="quiz-choices">
+            <button
+              v-for="(choice, idx) in q.choices || []"
+              :key="idx"
+              :class="mcqChoiceClass(q, choice)"
+              :disabled="answers[q.id]?.submitted"
+              @click="onAnswer(q.id, choice)"
+            >
+              {{ choice }}
+            </button>
+          </div>
+          <div v-if="answers[q.id]?.submitted">
+            <div v-if="typeof q.correctAnswer !== 'undefined'" :class="['quiz-feedback', answers[q.id].isCorrect ? 'correct' : 'incorrect']">
+              {{ answers[q.id].isCorrect ? `✓ Correct! (+${answers[q.id].points} pts)` : `✗ Incorrect. The correct answer is: ${q.correctAnswer}` }}
+            </div>
+            <div v-else class="quiz-feedback">
+              You selected: {{ answers[q.id].answer }}
+            </div>
+          </div>
+        </div>
+
+        <div v-else-if="q.type === 'short-answer'" class="quiz-question">
+          <div class="quiz-question-header">
+            <h3 class="quiz-question-text">{{ q.question }}</h3>
+            <span class="quiz-question-points">{{ q.points }} pts</span>
+          </div>
+          <div class="quiz-input-container">
+            <input
+              type="text"
+              :value="answers[q.id]?.submitted ? answers[q.id].answer : (draftInputs[q.id] || '')"
+              :placeholder="q.placeholder || 'Type your answer here...'"
+              :disabled="answers[q.id]?.submitted"
+              :class="['quiz-input', answers[q.id]?.submitted ? ((q.correctAnswers && q.correctAnswers.length) ? (answers[q.id].isCorrect ? 'quiz-input-correct' : 'quiz-input-incorrect') : '') : '']"
+              @input="(e: any) => !answers[q.id]?.submitted && (draftInputs[q.id] = e.target.value)"
+              @keydown.enter.prevent="!answers[q.id]?.submitted && submitShort(q)"
+            />
+            <button
+              v-if="!answers[q.id]?.submitted"
+              class="quiz-submit"
+              :disabled="!(draftInputs[q.id] || '').trim()"
+              @click="submitShort(q)"
+            >
+              Submit
+            </button>
+          </div>
+          <div v-if="answers[q.id]?.submitted">
+            <div v-if="q.correctAnswers && q.correctAnswers.length" :class="['quiz-feedback', answers[q.id].isCorrect ? 'correct' : 'incorrect']">
+              {{ answers[q.id].isCorrect ? `✓ Correct! (+${answers[q.id].points} pts)` : `✗ Incorrect. Accepted answers: ${(q.correctAnswers || []).join(', ') || 'N/A'}` }}
+            </div>
+            <div v-else class="quiz-feedback">
+              Your answer: {{ answers[q.id].answer }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="isCompleted" class="quiz-summary">
+      <h3>Quiz Complete!</h3>
+      <div class="quiz-final-score">
+        Final Score: {{ totalScore }}/{{ maxScore }} points ({{ scorePercentage }}%)
+      </div>
+      <div v-if="passingScore !== undefined" :class="['quiz-result', isPassing ? 'passed' : 'failed']">
+        {{ isPassing ? '🎉 Passed!' : '❌ Failed' }} (Passing: {{ passingScore }}%)
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, withDefaults, defineProps, defineEmits } from 'vue'
+
+interface QuizQuestion {
+  id: string
+  type: 'mcq' | 'short-answer'
+  question: string
+  points: number
+  choices?: string[]
+  correctAnswer?: string
+  placeholder?: string
+  correctAnswers?: string[]
+}
+
+interface QuizAnswer {
+  answer: string
+  isCorrect: boolean
+  points: number
+  submitted: boolean
+}
+
+interface QuizState {
+  answers: Record<string, QuizAnswer>
+  totalScore: number
+  maxScore: number
+  questionsAnswered: number
+  isCompleted: boolean
+}
+
+interface Props {
+  title: string
+  questions: QuizQuestion[]
+  showScore?: boolean
+  showProgress?: boolean
+  passingScore?: number
+}
+
+interface Emits {
+  change: [value: QuizState]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showScore: true,
+  showProgress: true
+})
+
+const emit = defineEmits<Emits>()
+
+const answers = reactive<Record<string, QuizAnswer>>({})
+const draftInputs = reactive<Record<string, string>>({})
+
+const maxScore = computed(() => props.questions.reduce((s, q) => s + q.points, 0))
+const totalScore = computed(() => Object.values(answers).reduce((s, a) => s + a.points, 0))
+const questionsAnswered = computed(() => Object.keys(answers).length)
+const isCompleted = computed(() => questionsAnswered.value === props.questions.length)
+const progressPercentage = computed(() => Math.round((questionsAnswered.value / props.questions.length) * 100))
+const scorePercentage = computed(() => maxScore.value > 0 ? Math.round((totalScore.value / maxScore.value) * 100) : 0)
+const isPassing = computed(() => props.passingScore !== undefined ? scorePercentage.value >= (props.passingScore as number) : false)
+
+function emitChange() {
+  emit('change', {
+    answers: { ...answers },
+    totalScore: totalScore.value,
+    maxScore: maxScore.value,
+    questionsAnswered: questionsAnswered.value,
+    isCompleted: isCompleted.value
+  })
+}
+
+function onAnswer(questionId: string, userAnswer: string) {
+  const q = props.questions.find(q => q.id === questionId)
+  if (!q || answers[questionId]?.submitted) return
+
+  let correct = false
+  if (q.type === 'mcq') {
+    correct = q.correctAnswer === userAnswer
+  } else if (q.type === 'short-answer') {
+    if (q.correctAnswers) {
+      correct = q.correctAnswers.some(a => a.toLowerCase() === userAnswer.toLowerCase())
+    }
+  }
+
+  answers[questionId] = {
+    answer: userAnswer,
+    isCorrect: correct,
+    points: correct ? q.points : 0,
+    submitted: true
+  }
+  if (draftInputs[questionId]) delete draftInputs[questionId]
+  emitChange()
+}
+
+function submitShort(q: QuizQuestion) {
+  const val = (draftInputs[q.id] || '').trim()
+  if (!val) return
+  onAnswer(q.id, val)
+}
+
+function mcqChoiceClass(q: QuizQuestion, choice: string) {
+  const ans = answers[q.id]
+  let cls = 'quiz-choice'
+  if (ans?.submitted && typeof q.correctAnswer !== 'undefined') {
+    if (choice === q.correctAnswer) cls += ' quiz-choice-correct'
+    else if (choice === ans.answer && choice !== q.correctAnswer) cls += ' quiz-choice-incorrect'
+  }
+  return cls
+}
+</script>

package/src/lib/widgets/RadioGroup.vue

@@ -0,0 +1,237 @@
+<template>
+  <!-- 按钮样式（antd Radio optionType:button）：复用 widget-button-group 视觉 -->
+  <div v-if="button" class="widget-button-group" :class="{ 'widget-field-error': !!shownError }">
+    <label v-if="label">{{ label }}</label>
+    <div
+      role="group"
+      :aria-label="label"
+      class="radio-button-group"
+      :data-direction="columns >= 1 ? 'grid' : (direction || 'horizontal')"
+      :style="columns >= 1 ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : undefined"
+    >
+      <div v-if="items.length === 0" style="color: rgba(0, 0, 0, 0.45); font-size: 13px;">{{ loading ? '加载中…' : '暂无数据' }}</div>
+      <button
+        v-for="it in items"
+        :key="it.value"
+        type="button"
+        :aria-pressed="val === it.value"
+        :disabled="disabled"
+        @click="pick(it.value)"
+      >
+        {{ it.label }}
+      </button>
+    </div>
+    <div v-if="shownError" class="widget-error-text" role="alert">{{ shownError }}</div>
+  </div>
+
+  <!-- 默认圆点单选样式（antd Radio） -->
+  <div v-else class="selector-multi" :class="{ 'widget-field-error': !!shownError }">
+    <div v-if="label || hint || required" class="widget-label-row">
+      <span v-if="required" class="widget-required-mark" aria-hidden="true">*</span>
+      <div v-if="label" class="selector-multi-label">{{ label }}</div>
+      <span v-if="hint" class="widget-hint" :data-hint="hint">ⓘ</span>
+    </div>
+    <div class="widget-field-content">
+      <!-- 选项布局：columns 自定义列数（grid）优先；direction 横向/纵向（默认纵向） -->
+      <div
+        class="radio-group"
+        role="radiogroup"
+        :aria-label="label"
+        :data-direction="columns >= 1 ? 'grid' : (direction || 'vertical')"
+        :style="columns >= 1 ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : undefined"
+      >
+        <div v-if="items.length === 0" style="color: rgba(0, 0, 0, 0.45); font-size: 13px;">{{ loading ? '加载中…' : '暂无数据' }}</div>
+        <label v-for="it in items" :key="it.value" class="radio-item">
+          <input
+            type="radio"
+            :value="it.value"
+            :checked="val === it.value"
+            :disabled="disabled"
+            @change="pick(it.value)"
+          />
+          <span>{{ it.label }}</span>
+        </label>
+      </div>
+      <div v-if="shownError" class="widget-error-text" role="alert">{{ shownError }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+interface ChoiceItem {
+  value: string
+  label: string
+}
+
+interface RadioGroupProps {
+  /** 选项：字符串数组（每项支持 key:label 格式）或对象数组（{key|value,label}，取值为 key/value，展示 label） */
+  choices: string[] | Array<{ value?: string; key?: string; label?: string }>
+  label?: string
+  default?: string | string[]
+  /** 按钮样式（参考 antd Radio optionType:button）：渲染为按钮组而非圆点单选 */
+  button?: boolean
+  /** 远端数据源 URL：设置后运行时 fetch 拉取选项，choices 作为初始/后备选项 */
+  url?: string
+  /** 选项排列方向：vertical 纵向（默认）/ horizontal 横向；按钮样式默认 horizontal */
+  direction?: 'vertical' | 'horizontal'
+  /** 自定义布局：每行列数（设置后按 N 列网格排列，优先于 direction） */
+  columns?: number
+  hint?: string
+  /** 是否必填 */
+  required?: boolean
+  /** 校验失败提示文案 */
+  message?: string
+  /** 外部（form 提交时）传入的错误信息 */
+  error?: string
+  /** 是否禁用 */
+  disabled?: boolean
+}
+
+interface RadioGroupEvents {
+  change: [value: string]
+}
+
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+  label: '',
+  button: false,
+  url: '',
+  columns: 0,
+  hint: '',
+  required: false,
+  message: '',
+  error: '',
+  disabled: false
+})
+
+const emit = defineEmits<RadioGroupEvents>()
+
+/** 解析 choices 条目的 key:label 格式："bj:北京" → {value:"bj", label:"北京"}；无冒号则 value=label=原文
+ *  判定规则：按首个冒号分割，仅当 key 非空且不含空白、非纯数字，且 label 非空、不以 // 开头时才视为 key:label */
+function parseChoice(c: string): ChoiceItem {
+  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 }
+}
+
+/** 本地条目：对象条目 value > key 取值（表单实际取值），label 缺省回落到 value；
+ *  字符串条目走 key:label 解析 */
+const localItems = computed<ChoiceItem[]>(() => {
+  const list: ChoiceItem[] = []
+  for (const c of props.choices || []) {
+    if (c !== null && typeof c === 'object') {
+      const value = (c as any).value ?? (c as any).key
+      if (value === undefined || value === null || value === '') continue
+      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
+      list.push({ value: valueStr, label })
+    } else {
+      list.push(parseChoice(c as string))
+    }
+  }
+  return list
+})
+
+/** 展示条目：远端拉取成功用远端；否则本地 choices */
+const items = computed<ChoiceItem[]>(() => remoteItems.value ?? localItems.value)
+
+/** 初始选中：default 可能是 key、label 或 key:label 原文，统一解析为 key 体系；
+ *  对象数组 choices 时 default 写 label 也映射回 value；无 default 时选中第一项（与 button-group 一致） */
+function mapInitial(v: any): string {
+  const s = String(v)
+  const hit = localItems.value.find(it => it.value === s || it.label === s)
+  return hit ? hit.value : parseChoice(s).value
+}
+
+const val = ref<string>(
+  props.default !== undefined && props.default !== null && props.default !== ''
+    ? mapInitial(Array.isArray(props.default) ? props.default[0] : props.default)
+    : (localItems.value[0]?.value ?? '')
+)
+
+const localError = ref('')
+
+/** 必填校验 */
+function validate(v: string): string {
+  if (props.required && v === '') {
+    return props.message || (props.label ? `请填写${props.label}` : '请至少选择一项')
+  }
+  return ''
+}
+
+function pick(v: string) {
+  if (props.disabled) return
+  val.value = v
+  localError.value = validate(v)
+  emit('change', v)
+}
+
+// ---------- url 远端模式 ----------
+// 加载失败静默处理：回落本地 choices，均无数据时显示灰色"暂无数据"
+const remoteItems = ref<ChoiceItem[] | null>(null)
+const loading = ref(false)
+
+/** 远端响应归一化为选项数组：兼容裸数组与 {data|options|choices|items} 包裹 */
+function normalizeRemoteChoices(json: any): ChoiceItem[] {
+  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
+      : []
+  }
+  const out: ChoiceItem[] = []
+  for (const item of (list || [])) {
+    if (item === null || item === undefined) continue
+    if (typeof item === 'string' || typeof item === 'number') {
+      const s = String(item)
+      if (s) out.push({ value: s, label: s })
+      continue
+    }
+    if (typeof item === 'object') {
+      const value = (item as any).value ?? (item as any).key ?? (item as any).id ?? (item as any).name
+      if (value === undefined || value === null || value === '') continue
+      const label = (item as any).label ?? (item as any).name ?? (item as any).text ?? String(value)
+      out.push({ value: String(value), label: String(label) })
+    }
+  }
+  return out
+}
+
+onMounted(async () => {
+  if (!props.url) return
+  loading.value = true
+  try {
+    const res = await fetch(props.url)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const json: any = await res.json()
+    const list = normalizeRemoteChoices(json)
+    if (list.length === 0) throw new Error('响应中没有可用选项')
+    remoteItems.value = list
+    // 选中值处理：当前值（可能是本地 label）映射到远端 value，不在远端取值中则回落第一项
+    const hit = list.find(r => r.value === val.value || r.label === val.value)
+    const mapped = hit ? hit.value : (list[0]?.value ?? '')
+    if (mapped !== val.value) {
+      val.value = mapped
+      emit('change', mapped)
+    }
+  } catch {
+    // 加载失败：静默回落本地 choices
+  } finally {
+    loading.value = false
+  }
+})
+
+const shownError = computed(() => props.error || localError.value)
+</script>