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

package/src/lib/widgets/Form.vue

@@ -0,0 +1,479 @@
+<template>
+  <!-- Row 分组模式（24 栅格，类似 antd Row/Col） -->
+  <div v-if="rows && rows.length > 0" :class="['widget-form', layoutClass]" :style="layoutStyle">
+    <!-- 设置 columns 时：所有 row 的字段合并流动，每行自动 columns 列（覆盖 row 手动分组） -->
+    <div
+      v-if="columns && columns >= 1"
+      class="widget-form-row"
+      :style="mergedRowStyle"
+    >
+      <div
+        v-for="(field, fi) in mergedVisibleFields"
+        :key="`${field.id}:${version}`"
+        class="widget-form-field"
+        :style="{ gridColumn: `span ${mergedSpans[fi]}` }"
+      >
+        <component
+          :is="getComponent(field.type)"
+          v-bind="fieldProps(field)"
+          @change="(value) => setValue(field.id, value)"
+        />
+      </div>
+    </div>
+
+    <!-- 未设置 columns：按 row 手动分组渲染 -->
+    <div
+      v-for="(rawRow, ri) in rows"
+      v-else
+      :key="ri"
+      class="widget-form-row"
+      :style="rowStyle(rawRow)"
+    >
+      <div
+        v-for="(field, fi) in visibleRowFields(rawRow)"
+        :key="`${field.id}:${version}`"
+        class="widget-form-field"
+        :style="{ gridColumn: `span ${computeSpans(visibleRowFields(rawRow))[fi]}` }"
+      >
+        <component
+          :is="getComponent(field.type)"
+          v-bind="fieldProps(field)"
+          @change="(value) => setValue(field.id, value)"
+        />
+      </div>
+    </div>
+    <!-- 按钮组：data-align 控制对齐，全部未设置则不渲染 -->
+    <div v-if="cancelLabel || resetLabel || submitLabel" class="widget-form-actions" :data-align="buttonsAlign || 'left'">
+      <button v-if="cancelLabel" type="button" class="widget-form-cancel" @click="handleCancel">{{ cancelLabel }}</button>
+      <button v-if="resetLabel" type="button" class="widget-form-reset" @click="handleReset">{{ resetLabel }}</button>
+      <button v-if="submitLabel" type="button" class="widget-form-submit" @click="handleSubmit">{{ submitLabel }}</button>
+    </div>
+  </div>
+
+  <!-- Inline 模式 / 传统模式 -->
+  <div :class="[containerClass, layoutClass, fieldsGridMode ? 'widget-form-fields-grid' : '']" :style="containerStyle">
+    <div
+      v-for="field in visibleFields"
+      :key="`${field.id}:${version}`"
+      class="widget-form-field"
+      :data-field-type="field.type"
+      :style="fieldsSpanStyle(field)"
+    >
+      <component
+        :is="getComponent(field.type)"
+        v-bind="fieldProps(field)"
+        @change="(value) => setValue(field.id, value)"
+      />
+    </div>
+    <!-- 按钮组：data-align 控制对齐，全部未设置则不渲染 -->
+    <div v-if="cancelLabel || resetLabel || submitLabel" class="widget-form-actions" :data-align="buttonsAlign || 'left'">
+      <button v-if="cancelLabel" type="button" class="widget-form-cancel" @click="handleCancel">{{ cancelLabel }}</button>
+      <button v-if="resetLabel" type="button" class="widget-form-reset" @click="handleReset">{{ resetLabel }}</button>
+      <button v-if="submitLabel" type="button" class="widget-form-submit" @click="handleSubmit">{{ submitLabel }}</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, computed, watch, defineProps, defineEmits } from 'vue'
+import Button from './Button.vue'
+import ButtonGroup from './ButtonGroup.vue'
+import Select from './Select.vue'
+import TreeSelect from './TreeSelect.vue'
+import Cascader from './Cascader.vue'
+import Chart from './Chart.vue'
+import SelectMulti from './SelectMulti.vue'
+import RadioGroup from './RadioGroup.vue'
+import Slider from './Slider.vue'
+import Switch from './Switch.vue'
+import TextInput from './TextInput.vue'
+import NumberInput from './NumberInput.vue'
+import DatePicker from './DatePicker.vue'
+import Text from './Text.vue'
+
+interface Field {
+  type: string
+  id: string
+  /** 在 row 内占据的栅格数（1-24，类似 antd Col 的 span） */
+  span?: number
+  [key: string]: any
+}
+
+interface FormRow {
+  /** 列间距（px），类似 antd Row 的 gutter */
+  gutter?: number
+  fields: Field[]
+}
+
+interface ChoiceItem {
+  value: string
+  label: string
+}
+
+interface FormProps {
+  /** 表单 id（字段级统计事件携带，用于区分多个表单） */
+  id?: string
+  fields: Field[]
+  /** 行分组（对象形态 { gutter, fields }；兼容旧数组形态 Field[][]） */
+  rows?: (FormRow | Field[])[]
+  inline?: boolean
+  columns?: number
+  submitLabel?: string
+  /** 取消按钮文案，未设置则不显示 */
+  cancelLabel?: string
+  /** 清空/重置按钮文案，未设置则不显示 */
+  resetLabel?: string
+  /** 按钮组对齐：left / center / right */
+  buttonsAlign?: 'left' | 'center' | 'right'
+  /** 字段 label 与内容的布局：vertical 上下（默认）/ horizontal 左右 */
+  layout?: 'vertical' | 'horizontal'
+  /** 左右布局时 label 的宽度（px），默认 80 */
+  labelWidth?: number
+  /** 左右布局时内容区域的宽度（px 或省略自适应填满） */
+  contentWidth?: number
+  /** 是否禁用：级联禁用所有字段与按钮 */
+  disabled?: boolean
+  /** 外部注入的初始值 { 字段id: 值 }，优先级高于字段 default；仅覆盖表单中已声明的字段 id */
+  initialData?: Record<string, unknown>
+}
+
+interface FormEvents {
+  change: [values: Record<string, unknown>]
+  /** 提交成功：校验通过后触发（独立于 change 的提交事件） */
+  submit: [values: Record<string, unknown>]
+  /** 字段级变化：任一表单项被填写时触发，携带统计信息（可见字段数/已填字段数）与最新表单数据 */
+  fieldchange: [stats: FormStats]
+}
+
+/** 表单统计信息：字段级变化事件携带 */
+export interface FormStats {
+  /** 表单 id */
+  id: string
+  /** 当前展示（可见）的字段数 */
+  visibleCount: number
+  /** 已填写（非空）的字段数 */
+  filledCount: number
+  /** 当前表单数据（含隐藏字段值） */
+  values: Record<string, unknown>
+}
+
+const props = defineProps<FormProps>()
+
+const emit = defineEmits<FormEvents>()
+
+const containerClass = computed(() =>
+  props.inline ? 'widget-form widget-form-inline' : 'widget-form'
+)
+
+// 左右布局：容器类 + CSS 变量（label 宽度 / 内容宽度）
+const isHorizontal = computed(() => props.layout === 'horizontal')
+const layoutClass = computed(() => (isHorizontal.value ? 'widget-form-layout-horizontal' : ''))
+const layoutStyle = computed(() => {
+  if (!isHorizontal.value) return undefined
+  const vars: Record<string, string> = { '--form-label-width': `${props.labelWidth ?? 80}px` }
+  if (props.contentWidth) vars['--form-content-width'] = `${props.contentWidth}px`
+  return vars
+})
+
+const containerStyle = computed(() => {
+  const merged: Record<string, string> = {}
+  if (props.columns) merged['--form-columns'] = String(props.columns)
+  if (layoutStyle.value) Object.assign(merged, layoutStyle.value)
+  return Object.keys(merged).length ? merged : undefined
+})
+
+// 字段模式（无 row 分组）：任一字段带显式 span 时切换为 24 栅格布局，让 span 生效
+// （无 span 的字段保持整行显示，不配 span 的表单仍走 flex 纵向布局，完全向后兼容）
+const fieldsGridMode = computed(() =>
+  !props.inline && (!Array.isArray(props.rows) || props.rows.length === 0) &&
+  (props.fields || []).some(f => typeof f?.span === 'number' && f.span >= 1 && f.span <= 24)
+)
+
+/** 字段模式栅格样式：显式 span 占 N 列；无 span 占满整行（1/-1，保持传统一行一个）；inline 模式用 flex-basis 覆盖宽度 */
+const fieldsSpanStyle = (field: Field): Record<string, string> | undefined => {
+  const s = typeof field.span === 'number' && field.span >= 1 && field.span <= 24 ? Math.round(field.span) : 0
+  if (props.inline) {
+    return s >= 1 ? { flex: `0 1 calc(${s} / 24 * 100%)` } : undefined
+  }
+  if (!fieldsGridMode.value) return undefined
+  return { gridColumn: s >= 1 ? `span ${s}` : '1 / -1' }
+}
+
+/** 解析 key:label 格式取 key（表单值体系）："bj:北京" → "bj"；无冒号原样返回 */
+const parseChoiceValue = (c: string): string => {
+  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 key
+    }
+  }
+  return s
+}
+
+const buildDefaults = (fields: Field[]): Record<string, unknown> => {
+  const acc: Record<string, unknown> = {}
+  for (const f of fields) {
+    if (f.type === 'button') {
+      acc[f.id] = f.label ?? ''
+    } else if (f.type === 'button-group') {
+      acc[f.id] = f.default ?? (Array.isArray(f.choices) && f.choices.length ? f.choices[0] : undefined)
+    } else if (f.type === 'select') {
+      // choices[0]/default 可能是 key:label 格式，默认值取 key（与 Select 组件 value 体系一致）
+      acc[f.id] = f.default !== undefined && f.default !== null && f.default !== ''
+        ? parseChoiceValue(String(f.default))
+        : (Array.isArray(f.choices) && f.choices.length ? parseChoiceValue(String(f.choices[0])) : undefined)
+    } else if (f.type === 'select-multi') {
+      const d = f.default
+      // choices 可能是对象数组（{value,key,label}）或 key:label 字符串：default 写 label 时映射回 value 取值体系
+      const objChoices = (Array.isArray(f.choices) ? f.choices : [])
+        .filter((c: any) => c && typeof c === 'object') as Array<{ value?: string; key?: string; label?: string }>
+      const mapDefault = (v: any): string => {
+        const s = String(v)
+        const hit = objChoices.find(c => String(c.value ?? c.key) === s || c.label === s)
+        return hit ? String(hit.value ?? hit.key) : parseChoiceValue(s)
+      }
+      acc[f.id] = Array.isArray(d) ? d.map(mapDefault) : (d ? [mapDefault(d)] : [])
+    } else if (f.type === 'radio-group') {
+      // 单选：choices 可能是对象数组（{value,key,label}）或 key:label 字符串，default 写 label 时映射回 value；
+      // 无 default 时选中第一项（与 button-group 一致）
+      const items: ChoiceItem[] = []
+      for (const c of (Array.isArray(f.choices) ? f.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
+          items.push({ value: valueStr, label })
+        } else if (c !== undefined && c !== null) {
+          items.push({ value: parseChoiceValue(String(c)), label: String(c) })
+        }
+      }
+      const mapDefault = (v: any): string => {
+        const s = String(v)
+        const hit = items.find(c => c.value === s || c.label === s)
+        return hit ? hit.value : parseChoiceValue(s)
+      }
+      const d = f.default
+      if (d !== undefined && d !== null && d !== '') {
+        acc[f.id] = mapDefault(Array.isArray(d) ? d[0] : d)
+      } else {
+        acc[f.id] = items.length ? items[0].value : ''
+      }
+    } else if (f.type === 'slider') {
+      acc[f.id] = f.default ?? (typeof f.min === 'number' ? f.min : 0)
+    } else if (f.type === 'switch') {
+      acc[f.id] = f.default ?? false
+    } else if (f.type === 'number-input') {
+      // 无 default 时为 null（空值），由组件内部处理显示
+      acc[f.id] = f.default ?? null
+    } else if (f.type === 'text-input') {
+      acc[f.id] = f.default ?? ''
+    }
+  }
+  return acc
+}
+
+/** 合并后的初始值：字段 default 为基础，外部 initialData 覆盖（仅表单已声明的字段 id：fields 与 rows 的并集） */
+const initialData = computed(() => {
+  const acc = buildDefaults(props.fields || [])
+  const external = props.initialData
+  if (external) {
+    const declaredIds = new Set<string>()
+    for (const f of props.fields ?? []) { if (f?.id) declaredIds.add(f.id) }
+    for (const r of props.rows ?? []) {
+      const rowFields = Array.isArray(r) ? r : (r?.fields ?? [])
+      for (const f of rowFields) { if (f?.id) declaredIds.add(f.id) }
+    }
+    for (const [k, v] of Object.entries(external)) {
+      if (declaredIds.has(k)) acc[k] = v
+    }
+  }
+  return acc
+})
+
+const data = reactive<Record<string, unknown>>({ ...initialData.value })
+
+// 子组件以 default 初始化内部状态且仅挂载时读取一次；
+// version 用于 initialData 变化（异步回填）/重置时 remount 子组件，让新值真正回显
+const version = ref(0)
+
+// 外部初始值/字段定义变化时重置表单（如异步获取的数据到达后回填）
+watch(initialData, (v) => {
+  for (const k of Object.keys(data)) delete data[k]
+  Object.assign(data, v)
+  version.value++
+})
+
+/** 用当前表单值覆盖字段 default：子组件以 default 初始化内部状态，这样外部 data 才能回显到界面 */
+const fieldProps = (field: Field) => ({
+  ...field,
+  default: data[field.id] !== undefined ? data[field.id] : field.default
+})
+
+const setValue = (id: string, value: unknown) => {
+  data[id] = value
+  // 字段级统计事件：任一表单项被填写即触发（data 为 reactive，统计即时反映新值）
+  emit('fieldchange', buildStats())
+}
+
+/** 基于当前 reactive data 计算统计信息（mergedVisibleAll 依赖 data，自动反映最新可见性） */
+const buildStats = (): FormStats => {
+  const isEmptyVal = (v: unknown): boolean =>
+    v === undefined || v === null || v === '' || (Array.isArray(v) && v.length === 0)
+  const visibleFields = mergedVisibleAll.value
+  const next = { ...data }
+  return {
+    id: props.id ?? '',
+    visibleCount: visibleFields.length,
+    filledCount: visibleFields.filter(f => !isEmptyVal(next[f.id])).length,
+    values: next
+  }
+}
+
+/** 单条件命中：eq 为依赖字段的值在 values 任一中（依赖值为数组时任一元素命中即可，
+ *  支持 select-multi 等多选字段作为依赖）；比较运算符（gt/gte/lt/lte/ne）按数值比较
+ *  （依赖值或任一匹配值非数字时该值视为不命中）。values 为空或条件非法视为忽略=true */
+const matchCond = (c: any): boolean => {
+  if (!c?.field || !Array.isArray(c.values) || c.values.length === 0) return true // 非法条件忽略
+  const dep = data[c.field]
+  const op = c.op || 'eq'
+  if (op === 'eq') {
+    if (Array.isArray(dep)) return dep.some(v => c.values.includes(String(v ?? '')))
+    return c.values.includes(String(dep ?? ''))
+  }
+  const left = Number(dep)
+  if (dep === undefined || dep === null || dep === '' || isNaN(left)) return false
+  return c.values.some((v: string) => {
+    const right = Number(v)
+    if (isNaN(right)) return false
+    if (op === 'gt') return left > right
+    if (op === 'gte') return left >= right
+    if (op === 'lt') return left < right
+    if (op === 'lte') return left <= right
+    return left !== right // ne
+  })
+}
+
+/** 字段是否可见：无 when 时恒可见；
+ *  - 单条件：依赖字段值命中 values 任一
+ *  - 数组（FieldWhen[]）：AND 组合，全部命中才显示
+ *  - 分组（FieldWhenGroup）：且组 all 全部命中 且 或组 any 任一命中 */
+const isVisible = (f: Field): boolean => {
+  if (!f.when) return true
+  const when = f.when as any
+  if (!Array.isArray(when) && typeof when === 'object' && ('all' in when || 'any' in when)) {
+    const allOk = (when.all || []).every(matchCond)
+    const anyList = when.any || []
+    const anyOk = anyList.length === 0 ? true : anyList.some(matchCond)
+    return allOk && anyOk
+  }
+  const conds = Array.isArray(when) ? when : [when]
+  if (conds.length === 0) return true
+  return conds.every(matchCond)
+}
+
+// 过滤可见字段（data 响应式变化时自动重算，实现条件显隐联动）
+const visibleFields = computed(() => (props.fields || []).filter(isVisible))
+
+const visibleRowFields = (row: FormRow | Field[]): Field[] =>
+  rowFields(row).filter(isVisible)
+
+const mergedVisibleFields = computed(() => mergedFields.value.filter(isVisible))
+
+/** 全部可见字段（fields 模式 + rows 模式并集，供字段级统计使用） */
+const mergedVisibleAll = computed(() => {
+  const list = [...(props.fields || []), ...mergedFields.value]
+  const seen = new Set<string>()
+  return list.filter(f => {
+    if (!f?.id || seen.has(f.id)) return false
+    seen.add(f.id)
+    return isVisible(f)
+  })
+})
+
+const handleSubmit = () => {
+  emit('change', { ...data })
+  emit('submit', { ...data })
+}
+
+const handleReset = () => {
+  Object.assign(data, initialData.value)
+  version.value++ // remount 子组件，界面回到初始值
+  // 重置同样派发统计事件：让面板即时回到初始统计口径
+  emit('fieldchange', buildStats())
+}
+
+const handleCancel = () => {
+  emit('change', { ...initialData.value, _action: 'cancel' })
+}
+
+// 规范化 row：兼容旧数组形态 Field[][]
+const rowFields = (row: FormRow | Field[]): Field[] =>
+  Array.isArray(row) ? row : (row.fields || [])
+
+const rowStyle = (row: FormRow | Field[]) => {
+  if (Array.isArray(row) || row.gutter === undefined) return undefined
+  return { '--row-gutter': `${row.gutter}px` }
+}
+
+// 设置 columns 时：合并所有 row 的字段为单个流动 grid
+const mergedFields = computed(() =>
+  (props.rows || []).map(rowFields).flatMap(f => f)
+)
+
+const mergedSpans = computed(() => computeSpans(mergedFields.value))
+
+const mergedRowStyle = computed(() => {
+  const row = (props.rows || []).find(r => !Array.isArray(r) && r.gutter !== undefined) as FormRow | undefined
+  return row?.gutter !== undefined ? { '--row-gutter': `${row.gutter}px` } : undefined
+})
+
+// 计算行内每个字段的 grid span（24 栅格，类似 antd）
+// 显式 span 优先；无 span 时若 form 设置了 columns，则每字段占 24/columns（跨行对齐），
+// 否则均分剩余栅格；总 span 超 24 时自动换行（由 grid auto-flow 处理）
+const computeSpans = (fields: Field[]): number[] => {
+  const spans = fields.map(f =>
+    typeof f.span === 'number' && f.span >= 1 && f.span <= 24 ? Math.round(f.span) : undefined
+  )
+  const fixedTotal = spans.reduce<number>((acc, s) => acc + (s ?? 0), 0)
+  const autoCount = spans.filter(s => s === undefined).length
+  let autoSpan = 0
+  if (autoCount > 0) {
+    if (props.columns && props.columns >= 1) {
+      autoSpan = Math.max(Math.floor(24 / props.columns), 1)
+    } else {
+      const remaining = Math.max(24 - fixedTotal, 0)
+      autoSpan = Math.max(Math.floor(remaining / autoCount), 1)
+    }
+  }
+  return spans.map(s => s ?? autoSpan)
+}
+
+const getComponent = (type: string) => {
+  const typeMapping: Record<string, any> = {
+    'button': Button,
+    'button-group': ButtonGroup,
+    'select': Select,
+    'select-multi': SelectMulti,
+    'radio-group': RadioGroup,
+    'cascade': Cascader,
+    'tree-select': TreeSelect,
+    'slider': Slider,
+    'switch': Switch,
+    'text-input': TextInput,
+    'number-input': NumberInput,
+    'date-picker': DatePicker,
+    'text': Text,
+    'chart-line': Chart,
+    'chart-bar': Chart,
+    'chart-pie': Chart,
+    'chart-scatter': Chart
+  }
+  return typeMapping[type] || 'div'
+}
+</script>

package/src/lib/widgets/Incomplete.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="incomplete-widget">
+    <div class="loading-indicator">
+      <span class="loading-text">Loading...</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+const styles = `
+.incomplete-widget {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.loading-text {
+  opacity: 0.7;
+}
+
+.loading-text::after {
+  content: '';
+  animation: dots 1.5s infinite;
+}
+
+@keyframes dots {
+  0%, 20% { content: ''; }
+  40% { content: '.'; }
+  60% { content: '..'; }
+  80%, 100% { content: '...'; }
+}
+`
+
+onMounted(() => {
+  if (typeof document !== 'undefined' && !document.getElementById('incomplete-widget-styles')) {
+    const styleSheet = document.createElement('style')
+    styleSheet.id = 'incomplete-widget-styles'
+    styleSheet.textContent = styles
+    document.head.appendChild(styleSheet)
+  }
+})
+</script>

package/src/lib/widgets/MultipleChoiceQuestion.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="widget-mcq">
+    <div class="mcq-question">{{ question }}</div>
+    <div class="mcq-choices">
+      <button
+        v-for="(choice, idx) in choices"
+        :key="idx"
+        :class="choiceClass(choice)"
+        :disabled="hasAnswered && showFeedback"
+        @click="onSelect(choice)"
+      >
+        {{ choice }}
+      </button>
+    </div>
+    <div
+      v-if="hasAnswered && showFeedback && selectedAnswer"
+      :class="['mcq-feedback', selectedAnswer === correctAnswer ? 'correct' : 'incorrect']"
+    >
+      <template v-if="correctAnswer">
+        {{ selectedAnswer === correctAnswer ? '✓ Correct!' : `✗ Incorrect. The correct answer is: ${correctAnswer}` }}
+      </template>
+      <template v-else>
+        You selected: {{ selectedAnswer }}
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, withDefaults, defineProps, defineEmits } from 'vue'
+
+interface Props {
+  question: string
+  choices: string[]
+  correctAnswer?: string
+  showFeedback?: boolean
+}
+
+interface Emits {
+  change: [value: { answer: string; isCorrect?: boolean }]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showFeedback: false
+})
+
+const emit = defineEmits<Emits>()
+
+const selectedAnswer = ref('')
+const hasAnswered = ref(false)
+
+function onSelect(answer: string) {
+  selectedAnswer.value = answer
+  hasAnswered.value = true
+  const isCorrect = props.correctAnswer ? answer === props.correctAnswer : undefined
+  emit('change', { answer, isCorrect })
+}
+
+function choiceClass(choice: string) {
+  let className = 'mcq-choice'
+  if (hasAnswered.value && props.showFeedback && props.correctAnswer) {
+    if (choice === props.correctAnswer) {
+      className += ' mcq-choice-correct'
+    } else if (choice === selectedAnswer.value && choice !== props.correctAnswer) {
+      className += ' mcq-choice-incorrect'
+    }
+  } else if (choice === selectedAnswer.value) {
+    className += ' mcq-choice-selected'
+  }
+  return className
+}
+</script>
+