cardbuddy 0.6.0

package/dist/vendored/components/setters/SetColor.vue

@@ -0,0 +1,244 @@
+<!--
+  颜色设置器：对应编辑器 common/Color。
+
+  使用第三方开源颜色选择器 @ckpack/vue-color 的 Sketch 控件（原生 <input type="color">
+  不支持 alpha，且交互简陋）。支持 rgba / hex / 空串；选择器以弹层形式挂载到 body，
+  避免被面板滚动容器裁切。色块预览使用棋盘格背景以展示透明效果。
+  重置按钮用「循环箭头」图标（语义更贴切），替代原来的 × 字符。
+-->
+<template>
+  <div class="st-color">
+    <!-- 色块预览 + 文本输入 + 重置（顶行） -->
+    <div class="st-color__top" ref="top">
+      <button
+        ref="swatch"
+        class="st-color__swatch"
+        type="button"
+        :title="text || '未设置'"
+        :disabled="disabled"
+        @click="togglePop"
+      >
+        <span class="st-color__checker" />
+        <span class="st-color__fill" :style="{ background: displayColor || 'transparent' }" />
+      </button>
+
+      <input
+        class="ni-input st-color__text"
+        type="text"
+        placeholder="如 #333333 / rgba(0,0,0,.5)"
+        :disabled="disabled"
+        :value="text"
+        @input="onTextInput($event.target.value)"
+        @change="$emit('change')"
+      />
+
+      <button
+        class="st-color__clear"
+        type="button"
+        title="重置（清空颜色）"
+        :disabled="disabled"
+        @click="clear"
+      >
+        <svg viewBox="0 0 16 16" class="st-ic" aria-hidden="true"><use href="#icon-reset" /></svg>
+      </button>
+    </div>
+
+    <!-- 透明度滑块（仅当颜色值非空时显示），作为快捷调节 -->
+    <div v-if="text" class="st-color__alpha-row">
+      <span class="st-color__alpha-label">透明度</span>
+      <input
+        class="st-color__alpha-slider"
+        type="range"
+        min="0"
+        max="100"
+        :disabled="disabled"
+        :value="Math.round(alpha * 100)"
+        @input="onAlphaChange($event.target.value)"
+        @change="$emit('change')"
+      />
+      <span class="st-color__alpha-val">{{ Math.round(alpha * 100) }}%</span>
+    </div>
+
+    <!-- 第三方颜色选择器弹层（挂载到 body，避免被滚动容器裁切） -->
+    <Teleport to="body">
+      <div
+        v-if="popOpen"
+        ref="pop"
+        class="st-color__pop"
+        :style="popStyle"
+        @mousedown.stop
+      >
+        <Sketch
+          :model-value="pickerValue"
+          :disable-alpha="false"
+          @update:model-value="onPicker"
+        />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+import { Sketch } from '@ckpack/vue-color'
+
+/** 解析任意 CSS 颜色为 { r, g, b, a }，解析失败返回 null */
+function parseColor(v) {
+  const s = String(v || '').trim()
+  if (!s) return null
+  // #RRGGBB
+  let m = s.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
+  if (m) return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16), a: 1 }
+  // #RGB
+  m = s.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
+  if (m) {
+    const p = (c) => parseInt(c + c, 16)
+    return { r: p(m[1]), g: p(m[2]), b: p(m[3]), a: 1 }
+  }
+  // #RRGGBBAA
+  m = s.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
+  if (m) return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16), a: parseInt(m[4], 16) / 255 }
+  // rgb() / rgba()
+  m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i)
+  if (m) {
+    const a = m[4] !== undefined ? parseFloat(m[4]) : 1
+    return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])), a }
+  }
+  return null
+}
+
+/** {r,g,b,a} → #rrggbb */
+function toHex(c) {
+  if (!c) return '#000000'
+  const p = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0')
+  return '#' + p(c.r) + p(c.g) + p(c.b)
+}
+
+/** {r,g,b,a} → rgba() 字符串 */
+function toRgba(c) {
+  if (!c) return ''
+  if (c.a >= 1) return toHex(c)
+  return `rgba(${Math.round(c.r)}, ${Math.round(c.g)}, ${Math.round(c.b)}, ${+c.a.toFixed(2)})`
+}
+
+export default {
+  name: 'SetColor',
+  components: { Sketch },
+  props: setterProps,
+  emits: setterEmits,
+  data() {
+    return {
+      _rgb: null, // 缓存解析后的 {r,g,b,a}，供滑块编辑时用
+      popOpen: false,
+      popW: 240,
+      popStyle: { position: 'fixed', left: '0px', top: '0px' },
+    }
+  },
+  computed: {
+    text() {
+      return this.value === undefined || this.value === null ? '' : String(this.value)
+    },
+    parsed() {
+      return parseColor(this.text) || { r: 0, g: 0, b: 0, a: 1 }
+    },
+    /** 传给 Sketch 的初始颜色（空值时给黑色作为起点） */
+    pickerValue() {
+      return this.text || '#000000'
+    },
+    /** 当前透明度 0~1 */
+    alpha() {
+      return this.parsed.a
+    },
+    /** 用于色块预览的完整颜色值（含 alpha） */
+    displayColor() {
+      return toRgba(this.parsed)
+    },
+  },
+  watch: {
+    text() {
+      this._rgb = parseColor(this.text)
+    },
+  },
+  beforeUnmount() {
+    this.removeDocListener()
+  },
+  methods: {
+    onTextInput(v) {
+      this._rgb = parseColor(v)
+      this.$emit('input', v)
+    },
+    onAlphaChange(pct) {
+      const a = Math.max(0, Math.min(1, parseInt(pct, 10) / 100))
+      const base = this._rgb || this.parsed
+      const c = { ...base, a }
+      this._rgb = c
+      this.$emit('input', toRgba(c))
+      this.$emit('change')
+    },
+    /** 第三方选择器回调：payload 含 hex / rgba([r,g,b,a]) / a */
+    onPicker(c) {
+      const rgba = c && c.rgba
+      let r, g, b, a
+      if (Array.isArray(rgba)) {
+        ;[r, g, b, a] = rgba
+      } else if (rgba) {
+        r = rgba.r; g = rgba.g; b = rgba.b; a = rgba.a
+      } else {
+        const parsed = parseColor(c.hex) || { r: 0, g: 0, b: 0, a: 1 }
+        r = parsed.r; g = parsed.g; b = parsed.b; a = parsed.a
+      }
+      a = a == null ? 1 : a
+      const hex = c.hex || toHex({ r, g, b, a: 1 })
+      this._rgb = { r, g, b, a }
+      this.$emit('input', a >= 1 ? hex : `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${+a.toFixed(2)})`)
+      this.$emit('change')
+    },
+    clear() {
+      if (this.disabled) return
+      this._rgb = null
+      this.closePop()
+      this.$emit('input', '')
+      this.$emit('change')
+    },
+    togglePop() {
+      if (this.disabled) return
+      this.popOpen ? this.closePop() : this.openPop()
+    },
+    openPop() {
+      const el = this.$refs.swatch
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      const topRect = (this.$refs.top && this.$refs.top.getBoundingClientRect()) || rect
+      const popW = Math.max(220, Math.min(Math.round(topRect.width), 400))
+      const popH = 320
+      const vw = window.innerWidth
+      const vh = window.innerHeight
+      let left = topRect.left
+      let top = rect.bottom + 6
+      if (left + popW > vw - 8) left = Math.max(8, vw - popW - 8)
+      if (top + popH > vh - 8) top = Math.max(8, rect.top - popH - 6)
+      this.popW = popW
+      this.popStyle = { position: 'fixed', left: left + 'px', top: top + 'px', width: popW + 'px', zIndex: 4000 }
+      this.popOpen = true
+      this.$nextTick(() => {
+        document.addEventListener('mousedown', this.onDocClick, true)
+      })
+    },
+    closePop() {
+      if (!this.popOpen) return
+      this.popOpen = false
+      this.removeDocListener()
+    },
+    removeDocListener() {
+      document.removeEventListener('mousedown', this.onDocClick, true)
+    },
+    onDocClick(e) {
+      const pop = this.$refs.pop
+      const sw = this.$refs.swatch
+      if (pop && pop.contains(e.target)) return
+      if (sw && sw.contains(e.target)) return
+      this.closePop()
+    },
+  },
+}
+</script>

package/dist/vendored/components/setters/SetCustomSelect.vue

@@ -0,0 +1,58 @@
+<!--
+  常用样式设置器：对应编辑器 custom/CustomSelect。
+
+  itemOption.list 每一项是一段「DOM 描述 + sync 映射」：
+    {type:'div', style:{…}, list:[{type:'span', innerText:'黑色', style:{…}}],
+     sync:{'style.font.color':'#333333', 'style.font.fontSize':'14', …}}
+  点击后编辑器会把 sync 里的点号路径批量写回组件（style.<分组>.<字段>）。
+  这里不直接改数据，而是向上抛 `sync` 事件，由 NodeInspector 统一落到 NodeEditModel，
+  这样样式的定点写入仍然走 Style.applyChange，不会污染实例树。
+-->
+<template>
+  <div class="st-customsel">
+    <div
+      v-for="(info, i) in list"
+      :key="i"
+      class="st-customsel__item"
+      :style="normalizeStyle(info.style)"
+      :title="'应用：' + Object.keys(info.sync || {}).join('、')"
+      @click="apply(info)"
+    >
+      <span v-for="(c, ci) in info.list || []" :key="ci" :style="normalizeStyle(c.style)">{{ c.innerText }}</span>
+      <span v-if="!(info.list || []).length">{{ info.innerText || '样式' + (i + 1) }}</span>
+    </div>
+    <p v-if="!list.length" class="st-list__empty">未配置常用样式</p>
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+
+/** 只保留视觉相关的样式，剔除会撑破面板的定位/尺寸类声明 */
+const DROP = new Set(['width', 'height', 'lineHeight', 'marginRight', 'cursor', 'textAlign'])
+
+export default {
+  name: 'SetCustomSelect',
+  props: setterProps,
+  emits: [...setterEmits, 'sync'],
+  computed: {
+    list() {
+      return this.options.list || []
+    },
+  },
+  methods: {
+    normalizeStyle(s) {
+      if (!s || typeof s !== 'object') return {}
+      const out = {}
+      for (const k in s) if (!DROP.has(k)) out[k] = s[k]
+      return out
+    },
+    apply(info) {
+      if (this.disabled) return
+      const sync = info.sync || {}
+      if (!Object.keys(sync).length) return
+      this.$emit('sync', sync)
+    },
+  },
+}
+</script>

package/dist/vendored/components/setters/SetExpr.vue

@@ -0,0 +1,107 @@
+<!--
+  变量表达式设置器：节点属性「变量」来源（itemValueFrom === '1'）下的表达式输入框。
+
+  值形态：itemValue 是**裸字符串**（如 "$name" / "($a ? $b : $c)"），不是对象。
+  编辑器实例由 CodeJar 托管 DOM，因此**不能**用 :value 双向绑定重渲染，
+  只在挂载时灌一次初值；外部值变化（切换节点/非空聚焦时）通过「非聚焦才同步」守卫避免打断输入。
+
+  语法高亮：复用 SetCode 的 CodeJar + Prism(javascript) 方案，并额外注册一条
+  "$ 变量"规则，让绑定变量（如 $name）以独立青色凸显，更贴合表达式语义。
+  高度可调：容器 .st-expr 设 resize: vertical，底部右下角出现原生拖拽手柄，便于编辑长表达式。
+-->
+<template>
+  <div class="st-expr" :class="{ 'st-expr--disabled': disabled }">
+    <div ref="editor" class="st-expr__editor" :class="{ 'is-disabled': disabled }"></div>
+    <span v-if="placeholder && !code" class="st-expr__ph">{{ placeholder }}</span>
+    <div class="st-expr__foot">
+      <span class="st-expr__hint">{{ lines }} 行 · {{ chars }} 字符</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CodeJar } from 'codejar'
+import Prism from 'prismjs'
+import 'prismjs/components/prism-javascript'
+import { setterProps, setterEmits } from './props.js'
+
+// 表达式里 $name 形式的绑定变量单独高亮（在 javascript 规则之前插入）
+if (Prism.languages.javascript && !Prism.languages.javascript['binding-var']) {
+  Prism.languages.insertBefore('javascript', 'keyword', {
+    'binding-var': /\$[A-Za-z_$][\w$]*/,
+  })
+}
+
+export default {
+  name: 'SetExpr',
+  props: {
+    ...setterProps,
+    // 可选占位提示（如条件表达式的「表达式，如 $singleMode」）。空字符串则不渲染。
+    placeholder: { type: String, default: '' },
+  },
+  emits: setterEmits,
+  data() {
+    return { code: '' }
+  },
+  computed: {
+    lines() {
+      return this.code ? this.code.split('\n').length : 0
+    },
+    chars() {
+      return this.code.length
+    },
+  },
+  watch: {
+    // 外部值变化（如切换节点、撤销/重做）时同步，但正在编辑（聚焦）不打断光标
+    value(v) {
+      this.syncFromValue(v)
+    },
+  },
+  mounted() {
+    this.code = this.readValue(this.value)
+    this.$nextTick(() => this.initJar())
+  },
+  beforeUnmount() {
+    if (this._t) clearTimeout(this._t)
+    if (this._jar && this._jar.destroy) this._jar.destroy()
+  },
+  methods: {
+    readValue(v) {
+      if (v == null) return ''
+      return typeof v === 'string' ? v : String(v)
+    },
+    syncFromValue(v) {
+      const next = this.readValue(v)
+      if (next === this.code) return
+      const el = this.$refs.editor
+      // 用户正在输入时，DOM 已经是最新内容，不要回填以免光标跳到末尾
+      if (el && document.activeElement === el) return
+      this.code = next
+      if (this._jar) this._jar.updateCode(next)
+    },
+    initJar() {
+      const el = this.$refs.editor
+      if (!el) return
+      const highlight = (editor) => {
+        editor.innerHTML = Prism.highlight(editor.textContent, Prism.languages.javascript, 'javascript')
+      }
+      this._jar = CodeJar(el, highlight, {
+        tab: '  ',
+        indentOn: /[({[]$/,
+        addClosing: true,
+        history: true,
+      })
+      this._jar.updateCode(this.code)
+      this._jar.onUpdate((code) => this.onCode(code))
+    },
+    onCode(code) {
+      if (this.disabled) return
+      this.code = code
+      this.$emit('input', code)
+      // 表达式输入频繁，change（触发重建预览）做防抖
+      if (this._t) clearTimeout(this._t)
+      this._t = setTimeout(() => this.$emit('change'), 400)
+    },
+  },
+}
+</script>

package/dist/vendored/components/setters/SetGradient.vue

@@ -0,0 +1,125 @@
+<!--
+  渐变设置器：对应编辑器 style/GradientStyle。
+  DSL 值是一整条 CSS 表达式：`linear-gradient(to bottom, #fff, #000)`。
+  解析时要注意色值里可能带括号（rgba(...)），所以拆分逗号得跳过括号内部。
+-->
+<template>
+  <div class="st-gradient">
+    <div class="st-gradient__preview" :style="{ background: preview }" />
+
+    <Dropdown
+      :value="direction"
+      :options="DIRECTIONS.map(d => ({ key: d.key, value: d.desc }))"
+      size="sm"
+      block
+      :disabled="disabled"
+      @input="setDirection($event)"
+    />
+
+    <div v-for="(s, i) in stops" :key="'stop' + i" class="st-gradient__stop">
+      <SetColor :value="s.color" :disabled="disabled" @input="setStop(i, $event)" @change="emitOut" />
+      <button class="st-gradient__del" type="button" title="删除该渐变色" @click="removeStop(i)">✕</button>
+    </div>
+
+    <button class="st-minibtn" type="button" :disabled="disabled" @click="addStop">+ 新增渐变色</button>
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+import SetColor from './SetColor.vue'
+import Dropdown from '../Dropdown.vue'
+
+const DIRECTIONS = [
+  { key: 'to bottom', desc: '从上到下' },
+  { key: 'to top', desc: '从下到上' },
+  { key: 'to left', desc: '从右到左' },
+  { key: 'to right', desc: '从左到右' },
+  { key: 'to bottom right', desc: '从左上到右下' },
+  { key: 'to bottom left', desc: '从右上到左下' },
+  { key: 'to top left', desc: '从右下到左上' },
+  { key: 'to top right', desc: '从左下到右上' },
+]
+
+/** 按逗号切分但跳过括号内部（rgba(0,0,0,.5) 不能被拆开） */
+function splitTop(str) {
+  const out = []
+  let depth = 0
+  let start = 0
+  for (let i = 0; i < str.length; i++) {
+    const ch = str[i]
+    if (ch === '(') depth++
+    else if (ch === ')') depth--
+    else if (ch === ',' && depth === 0) {
+      out.push(str.slice(start, i).trim())
+      start = i + 1
+    }
+  }
+  out.push(str.slice(start).trim())
+  return out.filter((s) => s !== '')
+}
+
+export default {
+  name: 'SetGradient',
+  components: { SetColor, Dropdown },
+  props: setterProps,
+  emits: setterEmits,
+  data() {
+    return { DIRECTIONS, direction: 'to bottom', stops: [] }
+  },
+  computed: {
+    preview() {
+      if (!this.stops.length) return 'transparent'
+      const colors = this.stops.map((s) => s.color).filter(Boolean)
+      if (colors.length < 2) return colors[0] || 'transparent'
+      return `linear-gradient(${this.direction}, ${colors.join(', ')})`
+    },
+  },
+  watch: {
+    value: { immediate: true, handler() { this.parse() } },
+  },
+  methods: {
+    parse() {
+      const raw = String(this.value || '').trim()
+      const m = raw.match(/linear-gradient\((.+)\)$/)
+      if (!m) {
+        this.direction = this.options.defaultDirection || DIRECTIONS[0].key
+        this.stops = []
+        return
+      }
+      const parts = splitTop(m[1])
+      this.direction = (parts[0] || '').toLowerCase() || DIRECTIONS[0].key
+      this.stops = parts.slice(1).map((c) => ({ color: c }))
+    },
+    setDirection(v) {
+      this.direction = v
+      this.emitValue()
+      this.$emit('change')
+    },
+    setStop(i, color) {
+      this.stops[i].color = color
+      this.emitValue()
+    },
+    addStop() {
+      if (this.disabled) return
+      this.stops.push({ color: '#ffffff' })
+      this.emitValue()
+      this.$emit('change')
+    },
+    removeStop(i) {
+      if (this.disabled) return
+      this.stops.splice(i, 1)
+      this.emitValue()
+      this.$emit('change')
+    },
+    emitValue() {
+      const colors = this.stops.map((s) => s.color).filter((c) => c !== '' && c !== undefined)
+      // 不足两个色标时渐变无意义，输出空串（与编辑器一致：清掉 backgroundImage）
+      this.$emit('input', colors.length ? `linear-gradient(${this.direction}, ${colors.join(', ')})` : '')
+    },
+    emitOut() {
+      this.$emit('change')
+    },
+  },
+}
+</script>

package/dist/vendored/components/setters/SetGrid9.vue

@@ -0,0 +1,68 @@
+<!--
+  九宫格对齐设置器：对应编辑器 style/PositionStyle 与 BackgroundPositionStyle 的左半部分。
+
+  两者格子布局一致、只是取值不同：
+    PositionStyle           TopLeft / TopCenter / … / BottomRight
+    BackgroundPositionStyle "0% 0%" / "50% 0%" / … / "100% 100%"
+  通过 kind 切换取值表。
+-->
+<template>
+  <div class="st-grid9">
+    <div
+      v-for="c in cells"
+      :key="c.key"
+      class="st-grid9__cell"
+      :class="{ 'st-grid9__cell--on': String(c.key) === String(value) }"
+      :title="c.value"
+      @click="pick(c)"
+    >
+      <span class="st-grid9__dot" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+
+const POSITION = [
+  { key: 'TopLeft', value: '上左' },
+  { key: 'TopCenter', value: '上中' },
+  { key: 'TopRight', value: '上右' },
+  { key: 'CenterLeft', value: '中左' },
+  { key: 'Center', value: '中间' },
+  { key: 'CenterRight', value: '中右' },
+  { key: 'BottomLeft', value: '下左' },
+  { key: 'BottomCenter', value: '下中' },
+  { key: 'BottomRight', value: '下右' },
+]
+
+const BG_POSITION = [
+  { key: '0% 0%', value: '左上对齐' },
+  { key: '50% 0%', value: '中上对齐' },
+  { key: '100% 0%', value: '右上对齐' },
+  { key: '0% 50%', value: '左中对齐' },
+  { key: '50% 50%', value: '居中对齐' },
+  { key: '100% 50%', value: '右中对齐' },
+  { key: '0% 100%', value: '左下对齐' },
+  { key: '50% 100%', value: '中下对齐' },
+  { key: '100% 100%', value: '右下对齐' },
+]
+
+export default {
+  name: 'SetGrid9',
+  props: { ...setterProps, kind: { type: String, default: 'PositionStyle' } },
+  emits: setterEmits,
+  computed: {
+    cells() {
+      return this.kind === 'BackgroundPositionStyle' ? BG_POSITION : POSITION
+    },
+  },
+  methods: {
+    pick(c) {
+      if (this.disabled) return
+      this.$emit('input', c.key)
+      this.$emit('change')
+    },
+  },
+}
+</script>

package/dist/vendored/components/setters/SetIconSelect.vue

@@ -0,0 +1,67 @@
+<!--
+  图标选择设置器：对应编辑器 custom/IconSelect。
+  图标来自 sprite（itemOption.image / iIconList），预览复用工程已有的 SvgSymbols。
+  收起时只显示当前图标 + 名称，点开展开成网格。
+-->
+<template>
+  <div class="st-iconsel-wrap">
+    <div class="st-iconsel">
+      <span class="st-iconsel__preview">
+        <SvgSymbols v-if="value" :icon="String(value)" color="currentColor" />
+        <span v-else style="font-size:11px;color:var(--text-faint)">无</span>
+      </span>
+      <input
+        class="ni-input"
+        type="text"
+        placeholder="图标 key"
+        :disabled="disabled"
+        :value="value || ''"
+        @input="$emit('input', $event.target.value)"
+        @change="$emit('change')"
+      />
+      <button class="st-minibtn" type="button" @click="open = !open">{{ open ? '收起' : '选择' }}</button>
+    </div>
+
+    <div v-if="open" class="st-iconsel__grid">
+      <span
+        v-for="ic in list"
+        :key="ic.key"
+        class="st-iconsel__cell"
+        :class="{ 'st-iconsel__cell--on': ic.key === value }"
+        :title="ic.name || ic.value || ic.key"
+        @click="pick(ic)"
+      >
+        <SvgSymbols :icon="ic.key" color="currentColor" />
+      </span>
+      <p v-if="!list.length" class="st-list__empty">该组件未提供图标列表</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+import SvgSymbols from '../SvgSymbols.vue'
+
+export default {
+  name: 'SetIconSelect',
+  components: { SvgSymbols },
+  props: setterProps,
+  emits: setterEmits,
+  data() {
+    return { open: false }
+  },
+  computed: {
+    list() {
+      return this.options.iIconList || []
+    },
+  },
+  methods: {
+    pick(ic) {
+      if (this.disabled) return
+      this.open = false
+      this.$emit('input', ic.key)
+      this.$emit('change')
+    },
+  },
+}
+</script>