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

package/src/lib/widgets/Select.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="selector" ref="rootEl">
+    <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 widget-select-content">
+      <!-- 自定义下拉（antd 风格）：searchable 带搜索框，普通模式纯选项列表 -->
+      <button
+        type="button"
+        class="cas-input"
+        :disabled="disabled"
+        :aria-expanded="open"
+        @click="toggleOpen"
+      >
+        <span class="cas-input-text" :class="{ 'cas-placeholder': !display }">
+          {{ loading ? '加载中…' : display || '请选择' }}
+        </span>
+        <span class="cas-arrow" :class="{ 'cas-arrow-open': open }" aria-hidden="true">▾</span>
+      </button>
+      <div v-if="open" class="cas-panel cas-panel-single">
+        <div v-if="searchable" class="cas-search">
+          <input
+            ref="searchEl"
+            type="text"
+            class="cas-search-input"
+            v-model="query"
+            placeholder="搜索选项…"
+          />
+        </div>
+        <div class="cas-menu cas-menu-full" role="menu">
+          <button
+            v-for="it in filtered"
+            :key="it.value"
+            type="button"
+            class="cas-option"
+            :class="{ 'cas-option-active': value === it.value }"
+            @click="pick(it.value)"
+          >
+            <span class="cas-option-label">{{ it.label }}</span>
+          </button>
+          <div v-if="filtered.length === 0" class="cas-empty">{{ loading ? '加载中…' : query.trim() ? '无匹配选项' : '暂无数据' }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted, onBeforeUnmount, watch } from 'vue'
+import { normalizeRemoteChoices, parseChoice, resolveChoiceValue, type RemoteChoice } from './remoteChoices'
+
+interface SelectProps {
+  choices: string[]
+  label?: string
+  default?: string
+  /** 远端数据源 URL：设置后运行时 fetch 拉取选项，choices 作为初始/后备选项 */
+  url?: string
+  /** 是否可搜索：开启后下拉面板内置搜索框，按 key/value 与 label 过滤选项 */
+  searchable?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+  hint?: string
+  /** 是否必填 */
+  required?: boolean
+}
+
+interface SelectEvents {
+  change: [value: string | string[]]
+}
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  label: '',
+  url: '',
+  searchable: false,
+  disabled: false,
+  hint: '',
+  required: false
+})
+
+const emit = defineEmits<SelectEvents>()
+
+/** 解析 choices 条目的 key:label 格式："bj:北京" → {value:"bj", label:"北京"}；无冒号则 value=label=原文
+ *  判定规则：按首个冒号分割，仅当 key 非空且不含空白、非纯数字，且 label 非空、不以 // 开头时才视为 key:label */
+
+/** 展示条目（value=表单取值即 key，label=展示文案）：远端拉取成功用 {value,label}，否则本地 choices */
+const remoteItems = ref<RemoteChoice[] | null>(null)
+const items = computed(() => remoteItems.value ?? (props.choices || []).map(parseChoice))
+
+// 初始选中值：default 解析出 key → choices[0] 的 key
+const value = ref(props.default !== undefined ? parseChoice(props.default).value : (items.value[0]?.value ?? ''))
+
+// ---------- url 远端模式：拉取成功后覆盖本地 choices，失败静默回落本地 ----------
+const loading = ref(false)
+
+async function loadRemote() {
+  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
+    // 当前值不在远端取值中时：default/本地值按 label 映射到远端 value，否则回落第一项
+    if (!list.some(r => r.value === value.value)) {
+      const mapped = props.default !== undefined ? resolveChoiceValue(props.default, list) : value.value
+      const next = list.some(r => r.value === mapped) ? mapped : list[0].value
+      if (next !== value.value) {
+        value.value = next
+        emit('change', next)
+      }
+    }
+  } catch {
+    // 加载失败：静默回落本地 choices
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadRemote)
+watch(() => props.url, loadRemote)
+
+// ---------- 自定义下拉（antd 风格） ----------
+const rootEl = ref<HTMLElement | null>(null)
+const searchEl = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+/** 搜索关键字（按 value/key 与 label 过滤，大小写不敏感） */
+const query = ref('')
+
+/** 当前选中项展示文案（value 与 label 不同时优先 label） */
+const display = computed(() => items.value.find(it => it.value === value.value)?.label ?? '')
+
+/** 展示用的选项列表：searchable 模式按关键字过滤，普通模式全量 */
+const filtered = computed(() => {
+  if (!props.searchable) return items.value
+  const q = query.value.trim().toLowerCase()
+  if (!q) return items.value
+  return items.value.filter(it => it.value.toLowerCase().includes(q) || it.label.toLowerCase().includes(q))
+})
+
+function onDocClick(e: MouseEvent) {
+  if (rootEl.value && !rootEl.value.contains(e.target as Node)) open.value = false
+}
+onMounted(() => document.addEventListener('mousedown', onDocClick))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick))
+
+function toggleOpen() {
+  if (props.disabled) return
+  open.value = !open.value
+  if (open.value && props.searchable) {
+    // 打开面板时清空关键字并聚焦搜索框（面板渲染完成后）
+    query.value = ''
+    nextTick(() => searchEl.value?.focus())
+  }
+}
+
+/** 选中某选项：回填 value 并关闭面板 */
+function pick(v: string) {
+  if (props.disabled) return
+  value.value = v
+  open.value = false
+  emit('change', v)
+}
+</script>
+
+<style scoped>
+.widget-select-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.cas-input {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  text-align: left;
+}
+.cas-input:hover { border-color: #4096ff; }
+.cas-input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+}
+/* 禁用态：置灰 + 禁止交互 */
+.cas-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.cas-input:disabled:hover { border-color: #d9d9d9; }
+
+.cas-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
+.cas-placeholder { color: rgba(0, 0, 0, 0.45); }
+.cas-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; transition: transform 0.2s ease; }
+.cas-arrow-open { transform: rotate(180deg); }
+
+/* 可搜索面板：纵向排搜索框 + 选项列表 */
+.cas-panel {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  display: flex;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+}
+.cas-panel-single {
+  flex-direction: column;
+  min-width: 100%;
+  width: auto;
+}
+.cas-search {
+  padding: 0.5rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+.cas-search-input {
+  width: 100%;
+  padding: 0.375rem 0.625rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  box-sizing: border-box;
+}
+.cas-search-input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+}
+.cas-menu {
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 0.375rem;
+}
+.cas-menu-full {
+  width: 100%;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.cas-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.88);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s ease;
+}
+.cas-option:hover { background: #f5f5f5; }
+.cas-option-active { background: #e6f4ff; color: #1677ff; font-weight: 500; }
+.cas-option-active:hover { background: #bae0ff; }
+.cas-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cas-empty {
+  padding: 0.75rem 0.5rem;
+  font-size: 0.8125rem;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: center;
+}
+</style>

package/src/lib/widgets/SelectMulti.vue

@@ -0,0 +1,145 @@
+<template>
+  <div 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="checkbox-group"
+        :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;">暂无选项</div>
+        <label v-for="it in items" :key="it.value" class="checkbox-item">
+          <input
+            type="checkbox"
+            :value="it.value"
+            :checked="value.includes(it.value)"
+            :disabled="disabled"
+            @change="handleChange(it.value, ($event.target as HTMLInputElement).checked)"
+          />
+          <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 } from 'vue'
+
+interface ChoiceItem {
+  value: string
+  label: string
+}
+
+interface SelectMultiProps {
+  /** 选项：字符串数组（每项支持 key:label 格式）或对象数组（{key|value,label}，取值为 key/value，展示 label） */
+  choices: string[] | Array<{ value?: string; key?: string; label?: string }>
+  label?: string
+  default?: string | string[]
+  /** 选项排列方向：vertical 纵向（默认）/ horizontal 横向 */
+  direction?: 'vertical' | 'horizontal'
+  /** 自定义布局：每行列数（设置后按 N 列网格排列，优先于 direction） */
+  columns?: number
+  hint?: string
+  /** 是否必填：至少勾选一项 */
+  required?: boolean
+  /** 校验失败提示文案 */
+  message?: string
+  /** 外部（form 提交时）传入的错误信息 */
+  error?: string
+  /** 是否禁用 */
+  disabled?: boolean
+}
+
+interface SelectMultiEvents {
+  change: [value: string | string[]]
+}
+
+const props = withDefaults(defineProps<SelectMultiProps>(), {
+  label: '',
+  direction: 'vertical',
+  columns: 0,
+  hint: '',
+  required: false,
+  message: '',
+  error: '',
+  disabled: false
+})
+
+const emit = defineEmits<SelectMultiEvents>()
+
+/** 解析 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 items = 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
+})
+
+/** 初始勾选值：default 可能是 key、label 或 key:label 原文，统一解析为 key 体系；
+ *  对象数组 choices 时 default 写 label 也映射回 value */
+function mapInitial(v: any): string {
+  const s = String(v)
+  const hit = items.value.find(it => it.value === s || it.label === s)
+  return hit ? hit.value : parseChoice(s).value
+}
+
+const value = ref<string[]>(
+  Array.isArray(props.default)
+    ? props.default.map(mapInitial)
+    : (props.default ? [mapInitial(props.default)] : [])
+)
+
+const localError = ref('')
+
+const shownError = computed(() => props.error || localError.value)
+
+/** 必填校验：至少勾选一项 */
+function validate(v: string[]): string {
+  if (props.required && v.length === 0) {
+    return props.message || (props.label ? `请填写${props.label}` : '请至少选择一项')
+  }
+  return ''
+}
+
+function handleChange(choice: string, checked: boolean) {
+  value.value = checked
+    ? [...value.value, choice]
+    : value.value.filter(v => v !== choice)
+  localError.value = validate(value.value)
+  emit('change', value.value)
+}
+</script>

package/src/lib/widgets/ShortAnswerQuestion.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="widget-saq">
+    <div class="saq-question">{{ question }}</div>
+    <div class="saq-input-container">
+      <input
+        type="text"
+        v-model="answer"
+        :placeholder="placeholder || 'Type your answer here...'"
+        :disabled="hasAnswered && showFeedback"
+        :class="['saq-input', (hasAnswered && showFeedback) ? (isCorrect ? 'saq-input-correct' : 'saq-input-incorrect') : '']"
+        @keydown.enter.prevent="!hasAnswered && submit()"
+      />
+      <button
+        v-if="!hasAnswered"
+        class="saq-submit"
+        :disabled="!answer.trim()"
+        @click="submit"
+      >
+        Submit
+      </button>
+    </div>
+    <div
+      v-if="hasAnswered && showFeedback && feedbackMessage"
+      :class="['saq-feedback', isCorrect ? 'correct' : 'incorrect']"
+    >
+      {{ feedbackMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, withDefaults, defineProps, defineEmits } from 'vue'
+
+interface Props {
+  question: string
+  placeholder?: string
+  correctAnswer?: string
+  correctAnswers?: string[]
+  showFeedback?: boolean
+}
+
+interface Emits {
+  change: [value: { answer: string; isCorrect?: boolean }]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Type your answer here...',
+  showFeedback: false
+})
+
+const emit = defineEmits<Emits>()
+
+const answer = ref('')
+const hasAnswered = ref(false)
+const isCorrect = ref<boolean | undefined>(undefined)
+
+function submit() {
+  if (!answer.value.trim()) return
+  hasAnswered.value = true
+  const normalized = (props.correctAnswers && props.correctAnswers.length > 0)
+    ? props.correctAnswers
+    : (typeof props.correctAnswer === 'string' ? [props.correctAnswer] : undefined)
+  const correct = normalized
+    ? normalized.some(a => a.toLowerCase() === answer.value.trim().toLowerCase())
+    : undefined
+  isCorrect.value = correct
+  emit('change', { answer: answer.value.trim(), isCorrect: correct })
+}
+
+const feedbackMessage = computed(() => {
+  if (!hasAnswered.value || !props.showFeedback) return ''
+  const hasAnswers = (props.correctAnswers && props.correctAnswers.length > 0) || typeof props.correctAnswer !== 'undefined'
+  if (!hasAnswers) return `Your answer: ${answer.value.trim()}`
+  if (props.correctAnswers && props.correctAnswers.length > 0) {
+    return isCorrect.value ? '✓ Correct!' : `✗ Incorrect. Accepted answers: ${(props.correctAnswers || []).join(', ')}`
+  }
+  return isCorrect.value ? '✓ Correct!' : `✗ Incorrect. The correct answer is: ${props.correctAnswer}`
+})
+</script>

package/src/lib/widgets/Slider.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="widget-slider">
+    <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="slider-container">
+        <div class="slider-values">
+          <span class="min-value">{{ min }}</span>
+          <span class="current-value">{{ value }}</span>
+          <span class="max-value">{{ max }}</span>
+        </div>
+        <input
+          type="range"
+          v-model="value"
+          :min="min"
+          :max="max"
+          :step="step"
+          @mouseup="handleChange"
+          @touchend="handleChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits } from 'vue'
+
+interface SliderProps {
+  min: number
+  max: number
+  step?: number
+  label?: string
+  default?: number
+  hint?: string
+  /** 是否必填（slider 始终有值，仅语义标记） */
+  required?: boolean
+}
+
+interface SliderEvents {
+  change: [value: number]
+}
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  step: 1,
+  label: '',
+  hint: '',
+  required: false
+})
+
+const emit = defineEmits<SliderEvents>()
+
+const value = ref(props.default ?? props.min)
+
+const handleChange = () => {
+  emit('change', Number(value.value))
+}
+</script>

package/src/lib/widgets/Switch.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="widget-switch">
+    <div v-if="label || hint || required" class="widget-label-row switch-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">
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="checked"
+        :aria-label="label"
+        class="switch-track"
+        :data-checked="checked"
+        :disabled="disabled"
+        @click="toggle"
+      >
+        <span class="switch-thumb"></span>
+        <span v-if="checkedText" class="switch-text switch-text-checked">{{ checkedText }}</span>
+        <span v-if="unCheckedText" class="switch-text switch-text-unchecked">{{ unCheckedText }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface SwitchProps {
+  /** 显示标签 */
+  label?: string
+  /** 默认是否选中（缺省 false） */
+  default?: boolean
+  /** 选中时展示的文案（antd checkedChildren） */
+  checkedText?: string
+  /** 未选中时展示的文案（antd unCheckedChildren） */
+  unCheckedText?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  hint?: string
+  /** 是否必填 */
+  required?: boolean
+}
+
+interface SwitchEvents {
+  change: [value: boolean]
+}
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  label: '',
+  checkedText: '',
+  unCheckedText: '',
+  disabled: false,
+  hint: '',
+  required: false
+})
+
+const emit = defineEmits<SwitchEvents>()
+
+const checked = ref(props.default ?? false)
+
+const toggle = () => {
+  if (props.disabled) return
+  checked.value = !checked.value
+  emit('change', checked.value)
+}
+</script>

package/src/lib/widgets/Text.vue

@@ -0,0 +1,59 @@
+<template>
+  <!-- Alert 提示风格（antd Alert） -->
+  <div
+    v-if="alert"
+    class="widget-alert"
+    :class="`widget-alert-${alertStyle}`"
+    :style="{ textAlign: align || undefined }"
+    role="alert"
+  >
+    <span class="widget-alert-icon" aria-hidden="true">{{ alertIcons[alertStyle] ?? alertIcons.info }}</span>
+    <span
+      class="widget-alert-message"
+      :style="textStyle"
+    >{{ text }}</span>
+  </div>
+  <!-- 普通段落 -->
+  <p v-else class="widget-text" :style="textStyle">{{ text }}</p>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+interface TextProps {
+  /** 文字内容 */
+  text?: string
+  /** 字号（12-48），默认 14 */
+  size?: number
+  /** 字体颜色（十六进制或 CSS 颜色名） */
+  color?: string
+  /** 加粗 */
+  bold?: boolean
+  /** 文字对齐：left / center / right */
+  align?: 'left' | 'center' | 'right'
+  /** 是否启用 Alert 提示风格（参考 antd Alert） */
+  alert?: boolean
+  /** Alert 风格：info（默认）/ warning / error */
+  alertStyle?: 'info' | 'warning' | 'error'
+}
+
+const props = withDefaults(defineProps<TextProps>(), {
+  text: '',
+  alert: false,
+  alertStyle: 'info'
+})
+
+// Alert 风格图标（antd 风格：info 圆形 i / warning 圆形感叹 / error 圆形叉）
+const alertIcons: Record<string, string> = {
+  info: 'ℹ',
+  warning: '⚠',
+  error: '✕'
+}
+
+const textStyle = computed(() => ({
+  fontSize: props.size ? `${props.size}px` : undefined,
+  color: props.color || undefined,
+  fontWeight: props.bold ? 600 : undefined,
+  textAlign: props.align || undefined
+}))
+</script>