cardbuddy 0.6.0

package/dist/vendored/components/ProgressSlider.vue

@@ -0,0 +1,167 @@
+<!--
+  进度滑块（官方 module 1981 / 504）。
+  结构对齐在线编辑器渲染产物：
+  ce_slider > ce_slider_rect(bg) > ce_slider_bar(fg) + ce_slider_con > ce_slider_block
+  支持点击 / 拖动改变值（按 step 吸附），与在线交互一致。
+-->
+<template>
+  <div class="ce_slider" :style="rootStyle">
+    <div
+      ref="rect"
+      class="ce_slider_rect"
+      :style="rectStyle"
+      @pointerdown="onDown"
+    >
+      <div class="ce_slider_bar" :style="barStyle" />
+      <div class="ce_slider_con" :style="{ left: conLeft }">
+        <div
+          class="ce_slider_block"
+          :class="{ ce_dragging: dragging }"
+          :style="blockStyleObj"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import base from './base.js'
+
+export default {
+  name: 'CeProgressSlider',
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    value: { type: [String, Number], default: 0 },
+    minProgress: { type: [String, Number], default: 0 },
+    maxProgress: { type: [String, Number], default: 100 },
+    step: { type: [String, Number], default: 1 },
+    backgroundColor: { type: String, default: '#e6e6e6' },
+    foregroundColor: { type: String, default: '#0a59f5' },
+    processHeight: { type: [String, Number], default: 5 },
+    blockStyle: { type: String, default: 'circle' },
+    blockColor: { type: String, default: '#ffffff' },
+    blockImage: { type: String, default: '' },
+    blockWidth: { type: [String, Number], default: 15 },
+    blockHeight: { type: [String, Number], default: 15 },
+  },
+  emits: ['change', 'selectChange'],
+  data() {
+    return { dragging: false }
+  },
+  computed: {
+    rootStyle() {
+      // 注意：滑块根不裁切自身内容。滑块块在 0%/100% 时会落在轨道端点、且
+      // 按下时整体放大 1.2×，若这里 overflow:hidden 会把块裁掉。
+      return { height: 'auto', boxSizing: 'border-box' }
+    },
+    min() {
+      const n = Number(this.minProgress)
+      return Number.isFinite(n) ? n : 0
+    },
+    max() {
+      const n = Number(this.maxProgress)
+      return Number.isFinite(n) ? n : 100
+    },
+    stepVal() {
+      const n = Number(this.step)
+      return n > 0 ? n : 1
+    },
+    numValue() {
+      const n = Number(this.value)
+      return Number.isFinite(n) ? n : this.min
+    },
+    percent() {
+      const span = this.max - this.min || 1
+      const p = ((this.numValue - this.min) / span) * 100
+      return Math.max(0, Math.min(100, p))
+    },
+    conLeft() {
+      // 滑块块定位：轨道两侧各内缩半个滑块宽，使块在 0%/100% 时仍完整落在节点盒内
+      // （对齐线上滑块「滑块块不出轨」的呈现，不被节点 overflow:hidden 裁切）。
+      const bw = Number(this.blockWidth) || 15
+      const half = bw / 2
+      return `calc(${half}px + (100% - ${bw}px) * ${this.percent} / 100)`
+    },
+    rectStyle() {
+      const h = Number(this.processHeight) || 5
+      return {
+        backgroundColor: this.adapter.doColor(this.backgroundColor),
+        height: this.adapter.doSize(h),
+        borderRadius: this.adapter.doSize(h),
+        marginTop: this.adapter.doSize(8),
+        marginBottom: this.adapter.doSize(8),
+      }
+    },
+    barStyle() {
+      const h = Number(this.processHeight) || 5
+      const bw = Number(this.blockWidth) || 15
+      // 填充条与滑块块两端对齐：从半个滑块宽起，宽度按「(满宽 - 滑块宽) × 百分比」计算，
+      // 使 0%/100% 时填充条与滑块块始终落在轨道内，不被节点 overflow:hidden 裁切。
+      return {
+        backgroundColor: this.adapter.doColor(this.foregroundColor),
+        left: this.adapter.doSize(bw / 2),
+        width: `calc((100% - ${bw}px) * ${this.percent} / 100)`,
+        borderTopLeftRadius: this.adapter.doSize(h),
+        borderBottomLeftRadius: this.adapter.doSize(h),
+      }
+    },
+    blockStyleObj() {
+      const w = Number(this.blockWidth) || 15
+      const h = Number(this.blockHeight) || 15
+      const out = {
+        width: this.adapter.doSize(w),
+        height: this.adapter.doSize(h),
+        boxShadow: 'rgba(0,0,0,0.3) 0 0 3px 0',
+      }
+      if (this.blockStyle === 'image' && this.blockImage) {
+        out.backgroundImage = `url(${this.adapter.doReplaceUrl(this.doI18n(this.blockImage))})`
+        out.borderRadius = '0'
+      } else if (this.blockStyle === 'circle') {
+        out.backgroundColor = this.adapter.doColor(this.blockColor)
+        out.borderRadius = this.adapter.doSize(Math.min(w, h) / 2)
+      } else {
+        out.backgroundColor = this.adapter.doColor(this.blockColor)
+        out.borderRadius = this.adapter.doSize(2)
+      }
+      return out
+    },
+  },
+  methods: {
+    clampStep(v) {
+      const clamped = Math.max(this.min, Math.min(this.max, v))
+      const stepped = Math.round((clamped - this.min) / this.stepVal) * this.stepVal + this.min
+      return Math.max(this.min, Math.min(this.max, stepped))
+    },
+    valueFromEvent(ev) {
+      const el = this.$refs.rect
+      if (!el) return this.numValue
+      const rect = el.getBoundingClientRect()
+      const ratio = (ev.clientX - rect.left) / rect.width
+      return this.clampStep(this.min + ratio * (this.max - this.min))
+    },
+    onDown(ev) {
+      this.dragging = true
+      this.setValue(this.valueFromEvent(ev))
+      window.addEventListener('pointermove', this.onMove)
+      window.addEventListener('pointerup', this.onUp)
+    },
+    onMove(ev) {
+      if (!this.dragging) return
+      this.setValue(this.valueFromEvent(ev))
+    },
+    onUp() {
+      this.dragging = false
+      window.removeEventListener('pointermove', this.onMove)
+      window.removeEventListener('pointerup', this.onUp)
+    },
+    setValue(v) {
+      this.$emit('change', v)
+      this.$emit('selectChange', v)
+    },
+  },
+  beforeUnmount() {
+    this.onUp()
+  },
+}
+</script>

package/dist/vendored/components/PropControl.vue

@@ -0,0 +1,241 @@
+<!--
+  类型化属性控件（meta 驱动的分派注册表）。
+
+  参照 ubomp-h5-sub 的「控件注册 + itemValueFrom 切换」范式：
+   - 按 meta.itemType 渲染对应类型化设置器（颜色/数字/枚举/开关/文本/图标/表达式…）；
+   - 按 meta.itemTypeRange 决定是否显示「值来源」切换：const('0') / var('1') / image('2')；
+   - 写回：直接 mutate 传入的 Property 实例的 itemValue / itemValueFrom，
+     再由父级（PropTree / NodeInspector）统一刷新预览或定点并入样式实例树。
+
+  本组件只渲染「单个属性」，不负责字段发现（那是 PropTree / NodeInspector 的事）。
+
+  所有设置器统一 props：value / options / watches / itemInfo / disabled，
+  统一 emit：input(新值) / change(触发预览) / sync(批量样式，仅 CustomSelect)。
+-->
+<template>
+  <div class="pc" :class="{ 'pc--readonly': disabled }">
+    <!-- 值来源切换（仅当 meta 声明了多于一种来源 且 允许切换时显示） -->
+    <div class="pc-srcs" v-if="sources.length > 1 && bExchange">
+      <button
+        v-for="s in sources"
+        :key="s.key"
+        type="button"
+        class="pc-src"
+        :class="{ 'is-active': property.itemValueFrom === s.key }"
+        :disabled="disabled"
+        @click="setSource(s.key)"
+      >{{ s.label }}</button>
+    </div>
+
+    <div class="pc-body">
+      <!-- 图片素材来源 -->
+      <SetImage
+        v-if="property.itemValueFrom === '2'"
+        :value="property.itemValue"
+        :options="property.itemOption"
+        :item-info="property"
+        :disabled="disabled"
+        @input="onInput"
+        @change="onChange"
+      />
+
+      <!-- 变量 / 表达式来源：带语法高亮、可拖拽调高度 -->
+      <SetExpr
+        v-else-if="property.itemValueFrom === '1'"
+        :value="property.itemValue"
+        :disabled="disabled"
+        :item-info="property"
+        @input="onInput"
+        @change="onChange"
+      />
+
+      <!-- 常量来源：按 itemType 分派 -->
+      <component
+        v-else
+        :is="setterComp.comp"
+        :value="property.itemValue"
+        :options="property.itemOption"
+        :watches="watches"
+        :item-info="property"
+        :disabled="disabled"
+        :kind="setterComp.kind"
+        :multiline="setterComp.multiline"
+        :boolean="setterComp.boolean"
+        @input="onInput"
+        @change="onChange"
+        @sync="onSync"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import SetText from './setters/SetText.vue'
+import SetNumber from './setters/SetNumber.vue'
+import SetSelect from './setters/SetSelect.vue'
+import SetSegment from './setters/SetSegment.vue'
+import SetSwitch from './setters/SetSwitch.vue'
+import SetColor from './setters/SetColor.vue'
+import SetIconSelect from './setters/SetIconSelect.vue'
+import SetIfForm from './setters/SetIfForm.vue'
+import SetNumberStyle from './setters/SetNumberStyle.vue'
+import SetPadding from './setters/SetPadding.vue'
+import SetGrid9 from './setters/SetGrid9.vue'
+import SetBgPosition from './setters/SetBgPosition.vue'
+import SetBgSize from './setters/SetBgSize.vue'
+import SetGradient from './setters/SetGradient.vue'
+import SetCustomSelect from './setters/SetCustomSelect.vue'
+import SetList from './setters/SetList.vue'
+import SetImage from './setters/SetImage.vue'
+import SetCode from './setters/SetCode.vue'
+import SetExpr from './setters/SetExpr.vue'
+
+const FROM_LABEL = { '0': '常量', '1': '变量', '2': '图片' }
+// meta.itemTypeRange 字符串 -> 允许的来源 key
+const RANGE_KEYS = { const: '0', var: '1', image: '2' }
+
+/** itemType -> 设置器组件 + 附加 props（kind / multiline / boolean） */
+function resolveSetter(itemType) {
+  switch (itemType) {
+    case 'InputNumber': return { comp: SetNumber }
+    case 'Color': return { comp: SetColor }
+    case 'Select': return { comp: SetSelect }
+    case 'TabSelect': return { comp: SetSegment, kind: 'TabSelect' }
+    case 'Input': return { comp: SetText }
+    case 'Textarea': return { comp: SetText, multiline: true }
+    case 'Switcher': return { comp: SetSwitch }
+    case 'BooleanForm': return { comp: SetSwitch, boolean: true }
+    case 'PaddingStyle': return { comp: SetPadding }
+    case 'NumberStyle': return { comp: SetNumberStyle }
+    case 'PositionStyle': return { comp: SetGrid9, kind: 'PositionStyle' }
+    case 'BackgroundPositionStyle': return { comp: SetBgPosition }
+    case 'BackgroundSizeStyle': return { comp: SetBgSize }
+    case 'GradientStyle': return { comp: SetGradient }
+    case 'FontStyle': return { comp: SetSegment, kind: 'FontStyle' }
+    case 'TextDecorationStyle': return { comp: SetSegment, kind: 'TextDecorationStyle' }
+    case 'JustifyContentStyle': return { comp: SetSegment, kind: 'JustifyContentStyle' }
+    case 'AlignItemsStyle': return { comp: SetSegment, kind: 'AlignItemsStyle' }
+    case 'IconSelect': return { comp: SetIconSelect }
+    case 'CustomSelect': return { comp: SetCustomSelect }
+    case 'List': return { comp: SetList }
+    case 'IfForm': return { comp: SetIfForm }
+    case 'Code': return { comp: SetCode }
+    // 未识别 / (none) / 缺省：普通文本框，保证可回填、可编辑
+    default: return { comp: SetText }
+  }
+}
+
+export default {
+  name: 'PropControl',
+  components: {
+    SetText, SetNumber, SetSelect, SetSegment, SetSwitch, SetColor,
+    SetIconSelect, SetIfForm, SetNumberStyle, SetPadding, SetGrid9,
+    SetBgPosition, SetBgSize, SetGradient, SetCustomSelect, SetList,     SetImage, SetCode, SetExpr,
+  },
+  props: {
+    property: { type: Object, required: true },
+    watches: { type: Object, default: () => ({}) },
+    disabled: { type: Boolean, default: false },
+    /**
+     * 是否允许显示「常量 / 变量 / 图片」来源切换。
+     * 对齐线上编辑器 editorOptions.bExchange：指令(directives)区块固定为 false，
+     * 故显隐设置 / 具体条件这类指令子项不渲染切换 tab，直接以常量形态呈现。
+     */
+    bExchange: { type: Boolean, default: true },
+  },
+  emits: ['change', 'sync'],
+  computed: {
+    itemType() {
+      return (this.property && this.property.itemType) || ''
+    },
+    sources() {
+      const raw = (this.property && this.property.itemTypeRange) || 'const'
+      const keys = String(raw).split(',').map((s) => s.trim()).filter(Boolean)
+      let list = keys
+        .map((k) => ({ key: RANGE_KEYS[k], label: FROM_LABEL[RANGE_KEYS[k]] }))
+        .filter((x) => x.key)
+      // 当前 itemValueFrom 若不在声明来源内（schema 越界或缺失），也纳入以免丢值；
+      // 但仅当它是合法来源键（'0'/'1'/'2'）时才塞入，忽略 undefined/非法值，
+      // 避免单一来源属性（如 Code 脚本）被误渲染出脏来源按钮。
+      const cur = String(this.property.itemValueFrom)
+      if (/^[012]$/.test(cur) && !list.some((s) => s.key === cur)) {
+        list = list.concat([{ key: cur, label: FROM_LABEL[cur] || '来源' + cur }])
+      }
+      return list
+    },
+    setterComp() {
+      return resolveSetter(this.itemType)
+    },
+  },
+  methods: {
+    onInput(v) {
+      this.property.itemValue = v
+      // 输入即触发预览刷新：NodeInspector 的 scheduleApply 自带 250ms 防抖，
+      // 故高频输入只会触发一次（约 250ms 后）重建预览，满足「即时预览」预期（问题 #6）。
+      this.$emit('change')
+    },
+    onChange() {
+      this.$emit('change')
+    },
+    onSync(map) {
+      this.$emit('sync', map)
+    },
+    setSource(k) {
+      if (this.disabled) return
+      const prop = this.property
+      const to = String(k)
+      if (prop.itemValueFrom === to) return
+      // 切换来源：先把「当前来源」的实时值归档进缓存，再切到目标来源；
+      // 目标来源有缓存值则原样回填，没有（从未编辑过）才给默认值。
+      // 这样每种来源（常量/变量/图片）各存各的，互不复写 —— 修复「切走再切回内容被清空」。
+      if (!prop._valuesByFrom) {
+        prop._valuesByFrom = { '0': undefined, '1': undefined, '2': undefined }
+      }
+      prop._valuesByFrom[prop.itemValueFrom] = prop.itemValue
+      prop.itemValueFrom = to
+      if (prop._valuesByFrom[to] !== undefined) {
+        prop.itemValue = prop._valuesByFrom[to]
+      } else if (to === '0') {
+        const d = prop.itemDefaultValue
+        prop.itemValue = d === undefined || d === null ? this.defaultFor() : d
+        prop._valuesByFrom[to] = prop.itemValue
+      } else {
+        // 变量('1') / 图片('2') 首次进入时给空串作为起点（非清空，后续切回会回填）
+        prop.itemValue = ''
+        prop._valuesByFrom[to] = ''
+      }
+      this.$emit('change')
+    },
+    defaultFor() {
+      switch (this.itemType) {
+        case 'Color': return '#000000'
+        case 'InputNumber': return 0
+        case 'Switcher': return '0'
+        case 'BooleanForm': return false
+        case 'TabSelect':
+        case 'Select': {
+          const opt = this.property.itemOption || {}
+          const list = opt.iParamList || opt.iTypeList || []
+          return list.length ? list[0].key : ''
+        }
+        default: return ''
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.pc { display: flex; flex-direction: column; gap: 6px; }
+/* .pc-body 是块级容器，唯一子节点 .st-switch 是 inline-flex（内联级原子盒子）。
+   行盒高度由继承的 line-height（body 默认 16px / normal ≈ 21.5px）决定，而非 18px 的开关本身，
+   导致 .pc-body 被撑到 21.5px 且开关按 baseline 对齐而非垂直居中。置 0 让行盒坍缩为 18px。 */
+.pc-body { line-height: 0; }
+.pc-srcs { display: flex; gap: 4px; line-height: 1.5; }
+.pc-src {
+  flex: 1; font-size: 12px; padding: 3px 0; border: 1px solid var(--border);
+  background: transparent; color: var(--text-dim); border-radius: 6px; cursor: pointer;
+}
+.pc-src.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
+.pc--readonly .pc-src { opacity: .6; cursor: not-allowed; }
+</style>

package/dist/vendored/components/PropTree.vue

@@ -0,0 +1,128 @@
+<!--
+  属性树递归渲染器。
+
+  职责（与编辑器右侧面板的字段组织一致）：
+   - group 类型 / 含 itemChildren 的属性 → 渲染可折叠分组头，递归渲染其子属性；
+   - 叶子属性 → 「标签 + 控件」一行，控件交给全局 <prop-control>；
+   - 把「从根到当前叶子的链」(Property[]) 透传给父级，父级据此决定：
+       * style 模式：调用 NodeEditModel.applyStyleChange(链首分组, 链身)；
+       * property / directive 模式：整树导出（applyToSchema）。
+
+  本组件通过全局注册 self-reference（prop-tree）+ 全局 prop-control 实现递归，
+  避免与 PropControl 互相 import 造成的循环依赖。
+-->
+<template>
+  <div class="ptree" :class="{ 'ptree--plain': plain }">
+    <template v-for="p in properties" :key="p.itemId">
+      <!-- 分组（自身可见 且 存在可见后代才渲染，避免空分组） -->
+      <div v-if="isGroup(p) && groupVisible(p)" class="ptree__group">
+        <div class="ptree__group-head" type="button" @click="toggle(p)">
+          <span class="ptree__caret" :class="{ 'is-open': isOpen(p) }">▸</span>
+          <span class="ptree__group-name">{{ p.itemName || p.itemKey }}</span>
+        </div>
+        <div v-show="isOpen(p)" class="ptree__group-body">
+          <prop-tree
+            v-if="p.itemChildren && p.itemChildren.properties.length"
+            :properties="p.itemChildren.properties"
+            :mode="mode"
+            :depth="depth + 1"
+            :chain="chain.concat(p)"
+            :watches="watches"
+            :disabled="disabled"
+            :b-exchange="bExchange"
+            :plain="plain"
+            @leaf-change="$emit('leaf-change', $event)"
+            @leaf-sync="$emit('leaf-sync', $event)"
+          />
+        </div>
+      </div>
+
+      <!-- 叶子（itemCondition 判定为不可见时不渲染，与线上编辑器一致） -->
+      <div
+        v-else-if="p.itemVisible !== false"
+        class="ptree__row"
+        :class="{ 'ptree__row--disabled': disabled, 'ptree__row--block': isBlock(p) }"
+      >
+        <label class="ptree__label" :title="p.itemDesc || p.itemName || p.itemKey">{{ p.itemName || p.itemKey || p.itemType || '字段' }}</label>
+        <div class="ptree__control">
+          <prop-control
+            :property="p"
+            :watches="watches"
+            :disabled="disabled"
+            :b-exchange="bExchange"
+            @change="onLeaf(p)"
+            @sync="onSync"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PropTree',
+  props: {
+    properties: { type: Array, default: () => [] },
+    mode: { type: String, default: 'property' },
+    /** 嵌套深度：顶层 ptree 为 1，每深入一层 +1（用于决定是否显示分组计数） */
+    depth: { type: Number, default: 1 },
+    /** 从根到当前层父分组的链（Property[]），叶子变更时拼接上自身 */
+    chain: { type: Array, default: () => [] },
+    /** 同级联动快照，供 itemWatch 使用（如 flexDirection 决定对齐图标方向） */
+    watches: { type: Object, default: () => ({}) },
+    disabled: { type: Boolean, default: false },
+    /** 是否允许显示来源切换 tab（指令区块由父级传 false） */
+    bExchange: { type: Boolean, default: true },
+    /** 无 hover 高亮模式（事件抽屉脚本/参数区用，深/浅主题一致） */
+    plain: { type: Boolean, default: false },
+  },
+  emits: ['leaf-change', 'leaf-sync'],
+  data() {
+    // 分组默认展开
+    return { openMap: {} }
+  },
+  methods: {
+    isGroup(p) {
+      if (!p) return false
+      if (p.itemType === 'group') return true
+      const kids = p.itemChildren && p.itemChildren.properties
+      return !!(kids && kids.length)
+    },
+    childCount(p) {
+      const kids = p.itemChildren && p.itemChildren.properties
+      return kids ? kids.length : 0
+    },
+    /** 需要整行铺开的控件（代码编辑器这类高控件，横排会被挤扁） */
+    isBlock(p) {
+      return p && p.itemType === 'Code'
+    },
+    /** 分组是否应当渲染：自身可见 且 至少存在一个可见后代（叶子或子分组） */
+    groupVisible(p) {
+      if (p.itemVisible === false) return false
+      const kids = p.itemChildren && p.itemChildren.properties
+      if (!kids || !kids.length) return true
+      return kids.some((c) => {
+        if (c.itemVisible === false) return false
+        if (this.isGroup(c)) return this.groupVisible(c)
+        return true
+      })
+    },
+    isOpen(p) {
+      // 默认展开；仅当显式置为 false 时收起
+      return this.openMap[p.itemId] !== false
+    },
+    toggle(p) {
+      this.openMap[p.itemId] = this.openMap[p.itemId] === false
+      // 触发响应式
+      this.openMap = Object.assign({}, this.openMap)
+    },
+    onLeaf(p) {
+      this.$emit('leaf-change', this.chain.concat(p))
+    },
+    onSync(map) {
+      this.$emit('leaf-sync', map)
+    },
+  },
+}
+</script>

package/dist/vendored/components/RadioButton.vue

@@ -0,0 +1,74 @@
+<!--
+  单选按钮（官方 module 1979 / 502）。
+  结构对齐在线编辑器渲染产物：
+  ce_radio_button > ce_radio_item > ce_radio_icon(svg) + span(text)
+  RadioButton 在 DSL 里是「单个独立单选」，无分组 key；
+  selected 状态由本地维护（点击切换），选中色用 selectColor、未选中用 unSelectColor。
+-->
+<template>
+  <span class="ce_radio_button" :style="rootStyle">
+    <div class="ce_radio_item" @click="toggle">
+      <span
+        v-if="buttonStyle !== 'Text'"
+        class="ce_radio_icon"
+        :style="{ width: iconSize + 'px', height: iconSize + 'px', marginRight: textSpacing + 'px' }"
+      >
+        <svg class="ce_svgradiostyle" :viewBox="'0 0 1024 1024'" :style="{ fill: color, stroke: color }">
+          <path v-for="(d, i) in radioPaths" :key="i" :d="d" />
+        </svg>
+      </span>
+      <span v-if="showText === '1' || showText === 1" :style="{ color, fontSize: fontSize + 'px' }">{{ doI18n(text) }}</span>
+    </div>
+  </span>
+</template>
+
+<script>
+import base from './base.js'
+import { RADIO_PATHS } from './icons.js'
+
+export default {
+  name: 'CeRadioButton',
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    value: { type: [String, Number], default: '' },
+    selectColor: { type: String, default: '#0082ff' },
+    unSelectColor: { type: String, default: '#333333' },
+    buttonStyle: { type: String, default: 'Circle' },
+    textSpacing: { type: [String, Number], default: '3' },
+    fontSize: { type: [String, Number], default: '14' },
+    iconSize: { type: [String, Number], default: '14' },
+    showText: { type: [String, Number], default: '1' },
+    text: { type: [String, Number], default: '' },
+  },
+  emits: ['change', 'selectChange'],
+  computed: {
+    rootStyle() {
+      return { overflow: 'hidden', boxSizing: 'border-box' }
+    },
+    selected() {
+      const v = this.value
+      return v !== '' && v != null && v !== false && v !== '0'
+    },
+    color() {
+      return this.selected ? this.selectColor : this.unSelectColor
+    },
+    radioPaths() {
+      if (this.selected && this.buttonStyle === 'CircleEmpty') {
+        return RADIO_PATHS.RadioButtonCircleEmptyCheck
+      }
+      if (this.buttonStyle === 'CircleEmpty') {
+        return RADIO_PATHS.RadioButtonCircleEmpty
+      }
+      return RADIO_PATHS.RadioButtonCircle
+    },
+  },
+  methods: {
+    toggle() {
+      const next = this.selected ? '' : (this.value || '1')
+      this.$emit('change', next)
+      this.$emit('selectChange', !!next)
+    },
+  },
+}
+</script>