cardbuddy 0.6.0

package/dist/vendored/components/SvgCode.vue

@@ -0,0 +1,19 @@
+<!-- 官方 module 1995 / 513：卡片里内联的 svg 源码直接 innerHTML 塞进去 -->
+<template>
+  <span class="ce_svgcode" :style="svgStyle" v-html="content" />
+</template>
+
+<script>
+export default {
+  name: 'SvgCode',
+  props: {
+    content: { type: String, default: '' },
+    color: { type: String, default: '' },
+  },
+  computed: {
+    svgStyle() {
+      return { fill: this.color }
+    },
+  },
+}
+</script>

package/dist/vendored/components/SvgSymbols.vue

@@ -0,0 +1,30 @@
+<!--
+  官方 module 1992 / 511。
+  从 sprite 里按 id 取图标；sprite 文件（svg-symbols.svg）由仓库直接维护在 preview/assets/。
+  官方只有 IE 才 inline 注入 sprite，现代浏览器直接用外链 `#id`，这里保持一致。
+-->
+<template>
+  <svg class="ce_svgsymbols" :fill="color">
+    <use :xlink:href="href" :fill="color" />
+  </svg>
+</template>
+
+<script>
+import { SVG_SYMBOLS_URL } from '../runtime/assets.js'
+
+export default {
+  name: 'SvgSymbols',
+  props: {
+    icon: { type: String, default: '' },
+    color: { type: String, default: '' },
+  },
+  data() {
+    return { symbols: SVG_SYMBOLS_URL }
+  },
+  computed: {
+    href() {
+      return `${this.symbols}#${this.icon}`
+    },
+  },
+}
+</script>

package/dist/vendored/components/Switch.vue

@@ -0,0 +1,38 @@
+<!-- 通用开关组件（受控）。
+     视觉对齐 App.vue 内的 .theme-toggle 范式，配色严格遵循
+     《深浅主题配色规范手册》§4.5 Switch：
+       - 关闭：中性灰（复用 --bg-input / --border-strong / --text-faint）
+       - 开启：主色实心（--accent）+ 滑块用主色上的文字（--on-accent）
+     双主题仅切换同名 Token 取值，组件不写颜色分支、禁止硬编码十六进制。 -->
+<template>
+  <button
+    type="button"
+    class="switch"
+    :class="{ 'switch--on': modelValue, 'switch--disabled': disabled }"
+    role="switch"
+    :aria-checked="String(modelValue)"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <span class="switch__track">
+      <span class="switch__thumb"></span>
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'Switch',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    onClick() {
+      if (this.disabled) return
+      this.$emit('update:modelValue', !this.modelValue)
+    },
+  },
+}
+</script>

package/dist/vendored/components/Text.vue

@@ -0,0 +1,32 @@
+<!-- 官方 module 1977 / 502 -->
+<template>
+  <span class="ce_text" :style="styleObj" @click="$emit('click', $event)">{{
+    doI18n(value)
+  }}</span>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeText',
+  emits: ['click'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    // 官方声明是 String；变量绑定完全可能算出数字，放宽类型只为少刷 warning，
+    // 渲染结果（插值）与官方一致
+    value: { type: [String, Number], default: '' },
+  },
+  computed: {
+    styleObj() {
+      // Text 比容器多一步 parseFont（IE 的 justifyContent 兼容分支省略）
+      const parser = new StyleParser(this, this.styleProps)
+      const out = parser.parse()
+      parser.parseFont(this.styleProps.font || {}, out)
+      return out
+    },
+  },
+}
+</script>

package/dist/vendored/components/Video.vue

@@ -0,0 +1,70 @@
+<!--
+  视频（官方 module 1982 / 505）。
+  结构对齐在线编辑器渲染产物：
+  ce_video > video(ce_video_elem) + ce_video_poster(封面遮罩)
+  有封面时先显示封面，点击封面播放并隐藏；无封面直接显示 video 控件。
+-->
+<template>
+  <div class="ce_video" :style="rootStyle">
+    <video
+      ref="video"
+      class="ce_video_elem ce_npc"
+      :src="src"
+      :poster="poster"
+      controls
+      playsinline
+      webkit-playsinline
+    />
+    <div
+      v-if="poster && showPoster"
+      class="ce_video_poster ce_npc"
+      :style="{ backgroundImage: `url(${poster})`, backgroundSize: 'cover', backgroundPosition: 'center' }"
+      @click="play"
+    />
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeVideo',
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    url: { type: String, default: '' },
+    previewUrl: { type: String, default: '' },
+  },
+  emits: ['click'],
+  data() {
+    return { showPoster: true }
+  },
+  computed: {
+    rootStyle() {
+      const out = new StyleParser(this, this.styleProps).parse()
+      return Object.assign(out, { overflow: 'hidden', boxSizing: 'border-box' })
+    },
+    src() {
+      return this.adapter.doReplaceUrl(this.doI18n(this.url || ''))
+    },
+    poster() {
+      return this.adapter.doReplaceUrl(this.doI18n(this.previewUrl || ''))
+    },
+  },
+  methods: {
+    play() {
+      this.showPoster = false
+      const v = this.$refs.video
+      if (v) {
+        try {
+          v.play()
+        } catch (e) {
+          /* 自动播放可能被拦截，忽略 */
+        }
+      }
+      this.$emit('click')
+    },
+  },
+}
+</script>

package/dist/vendored/components/ViewContainer.vue

@@ -0,0 +1,52 @@
+<!--
+  官方 module 2085 / 533。
+  宿主注册的「自定义组件」插槽，业务方在 App 里通过 customComponents 注入实现；
+  预览工程没有真实实现，统一落到 Placeholder 上画个占位块。
+-->
+<template>
+  <div class="ce_viewcontainer" :style="styleObj">
+    <component
+      :is="componentClass"
+      v-if="componentClass"
+      :icon="componentIcon"
+      :props="componentProps"
+      :custom-class="customClass"
+      @action="$emit('action', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeViewContainer',
+  emits: ['action'],
+  mixins: [base],
+  inject: ['adapter', 'customComponents'],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    customClass: { type: String, default: '' },
+    customProps: { type: Object, default: () => ({}) },
+    customRemarkImg: { type: String, default: '' },
+  },
+  computed: {
+    componentClass() {
+      const reg = this.customComponents
+      if (!reg) return ''
+      if (!this.customClass) return reg.Placeholder || ''
+      return reg[this.customClass] || reg.Placeholder || ''
+    },
+    componentProps() {
+      return this.customProps || {}
+    },
+    componentIcon() {
+      return this.customRemarkImg || ''
+    },
+    styleObj() {
+      return new StyleParser(this, this.styleProps).parse()
+    },
+  },
+}
+</script>

package/dist/vendored/components/base.js

@@ -0,0 +1,12 @@
+/**
+ * 官方每个渲染组件都有的两段样板：`inject:["adapter"]` 和 `doI18n`。
+ * 抽成 mixin，组件里只保留真正有差异的部分，方便和 comp/*.js 逐行对照。
+ */
+export default {
+  inject: ['adapter'],
+  methods: {
+    doI18n(v) {
+      return this.adapter.doI18n(v)
+    },
+  },
+}

package/dist/vendored/components/icons.js

@@ -0,0 +1,47 @@
+/**
+ * 复选 / 单选图标的 SVG 路径数据。
+ *
+ * 取自官方 inner_card svg sprite（svg-check-style / svg-radio-style），
+ * 用于预览端离线渲染，避免依赖远程 sprite 文件。
+ * 每个符号对应一组 <path d="...">，视图框统一为 0 0 1024 1024。
+ */
+
+export const CHECK_PATHS = {
+  // 圆形：两种状态共用同一符号，靠 fill 颜色区分选中/未选中
+  CheckGroupCircle: [
+    'M512 65.983389c-245.919634 0-446.016611 200.095256-446.016611 446.016611 0 245.952318 200.064292 446.016611 446.016611 446.016611S958.016611 757.952318 958.016611 512C958.016611 266.080366 757.952318 65.983389 512 65.983389zM512 894.016611c-210.655557 0-382.016611-171.392017-382.016611-382.016611 0-210.655557 171.359333-382.016611 382.016611-382.016611 210.624593 0 382.016611 171.359333 382.016611 382.016611C894.016611 722.624593 722.624593 894.016611 512 894.016611z',
+    'M512 352.00086c-88.223841 0-160.00086 71.775299-160.00086 159.99914s71.775299 160.00086 160.00086 160.00086 160.00086-71.775299 160.00086-160.00086S600.223841 352.00086 512 352.00086z',
+  ],
+  // 方框（空心）：未选中
+  CheckGroupSquareEmpty: [
+    'M833.008 928h-640c-52.944 0-96-43.072-96-96V192c0-52.928 43.056-96 96-96h640c52.912 0 96 43.072 96 96v640c0 52.928-43.072 96-96 96z m-640-768c-17.648 0-32 14.368-32 32v640c0 17.664 14.352 32 32 32h640a32 32 0 0 0 32-32V192c0-17.632-14.352-32-32-32h-640z',
+  ],
+  // 方框（空心）+ 勾：选中
+  CheckGroupSquareEmptyCheck: [
+    'M727.984 393.184a31.968 31.968 0 0 0-45.248 0.256L449.44 629.248l-103.28-106.112a32 32 0 1 0-45.888 44.608l126.032 129.504c0.048 0.096 0.192 0.096 0.256 0.192 0.064 0.064 0.096 0.192 0.16 0.256 2.016 1.984 4.512 3.2 6.88 4.544 1.248 0.672 2.24 1.792 3.52 2.304a31.728 31.728 0 0 0 24.064 0.064c1.232-0.512 2.208-1.536 3.392-2.176 2.4-1.344 4.896-2.528 6.944-4.544 0.064-0.064 0.096-0.192 0.192-0.256 0.064-0.096 0.16-0.128 0.256-0.192l256.224-259.008a32 32 0 0 0-0.224-45.248zM832.992 928h-640c-52.928 0-96-43.072-96-96V192c0-52.928 43.072-96 96-96h640c52.928 0 96 43.072 96 96v640c0 52.928-43.056 96-96 96z m-640-768c-17.632 0-32 14.368-32 32v640c0 17.664 14.368 32 32 32h640a32 32 0 0 0 32-32V192c0-17.632-14.336-32-32-32h-640z',
+  ],
+  // 实心方框：未选中
+  CheckGroupSquare: [
+    'M186 123c-33.137 0-60 26.863-60 60v655c0 33.137 26.863 60 60 60h655c33.137 0 60-26.863 60-60V183c0-33.137-26.863-60-60-60H186z m0-60h655c66.274 0 120 53.726 120 120v655c0 66.274-53.726 120-120 120H186c-66.274 0-120-53.726-120-120V183c0-66.274 53.726-120 120-120z',
+  ],
+  // 实心方框 + 勾：选中
+  CheckGroupSquareCheck: [
+    'M840.6 97H185.4C137.1 97 98 136.1 98 184.4v655.3c0 48.3 39.1 87.4 87.4 87.4h655.3c48.3 0 87.4-39.1 87.4-87.4V184.4C928 136.1 888.9 97 840.6 97zM791 380.7L466.7 705.1c-17.1 17.1-44.7 17.1-61.8 0L235 535.2c-17.1-17.1-17.1-44.7 0-61.8 17.1-17.1 44.7-17.1 61.8 0l139 139L729.2 319c17.1-17.1 44.7-17.1 61.8 0 17.1 17 17.1 44.7 0 61.7z',
+  ],
+}
+
+export const RADIO_PATHS = {
+  // 实心圆形：两种状态共用，靠颜色区分
+  RadioButtonCircle: [
+    'M512 65.983389c-245.919634 0-446.016611 200.095256-446.016611 446.016611 0 245.952318 200.064292 446.016611 446.016611 446.016611S958.016611 757.952318 958.016611 512C958.016611 266.080366 757.952318 65.983389 512 65.983389zM512 894.016611c-210.655557 0-382.016611-171.392017-382.016611-382.016611 0-210.655557 171.359333-382.016611 382.016611-382.016611 210.624593 0 382.016611 171.359333 382.016611 382.016611C894.016611 722.624593 722.624593 894.016611 512 894.016611z',
+    'M512 352.00086c-88.223841 0-160.00086 71.775299-160.00086 159.99914s71.775299 160.00086 160.00086 160.00086 160.00086-71.775299 160.00086-160.00086S600.223841 352.00086 512 352.00086z',
+  ],
+  // 空心圆：未选中
+  RadioButtonCircleEmpty: [
+    'M512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667z m0-64c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667z',
+  ],
+  // 空心圆 + 勾：选中
+  RadioButtonCircleEmptyCheck: [
+    'M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m182.613333 297.354667a32 32 0 0 0-45.258666 0.032L458.922667 573.44l-84.341334-83.989333a32 32 0 0 0-45.162666 45.344l106.986666 106.549333a32 32 0 0 0 45.226667-0.064l213.013333-213.333333a32 32 0 0 0-0.032-45.258667z',
+  ],
+}

package/dist/vendored/components/index.js

@@ -0,0 +1,58 @@
+/**
+ * className -> Vue 组件 的注册表。
+ * key 与 schema 里的 `className`（也就是 component-meta.json 的 className）一一对应。
+ */
+import Root from './Root.vue'
+import Row from './Row.vue'
+import Column from './Column.vue'
+import Text from './Text.vue'
+import Button from './Button.vue'
+import Divider from './Divider.vue'
+import Icon from './Icon.vue'
+import Image from './Image.vue'
+import MultiText from './MultiText.vue'
+import ListLayout from './ListLayout.vue'
+import GridLayout from './GridLayout.vue'
+import Canvas from './Canvas.vue'
+import Input from './Input.vue'
+import ViewContainer from './ViewContainer.vue'
+import AbsoluteLayout from './AbsoluteLayout.vue'
+import CheckGroup from './CheckGroup.vue'
+import RadioButton from './RadioButton.vue'
+import ProgressSlider from './ProgressSlider.vue'
+import Video from './Video.vue'
+import Map from './Map.vue'
+import MultiColumn from './MultiColumn.vue'
+
+export const COMPONENTS = {
+  Root,
+  Row,
+  Column,
+  Text,
+  Button,
+  Divider,
+  Icon,
+  Image,
+  MultiText,
+  ListLayout,
+  GridLayout,
+  Canvas,
+  Input,
+  ViewContainer,
+  AbsoluteLayout,
+  CheckGroup,
+  RadioButton,
+  ProgressSlider,
+  Video,
+  Map,
+  MultiColumn,
+}
+
+/** 带作用域插槽的容器：插槽内容要按 value 逐项渲染，scope 里能取到 item 字段 */
+export const SCOPED_SLOT_COMPONENTS = new Set(['ListLayout', 'GridLayout'])
+
+export function getComponent(className) {
+  return COMPONENTS[className] || null
+}
+
+export default COMPONENTS

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

@@ -0,0 +1,64 @@
+<!--
+  背景图位置设置器：对应编辑器 style/BackgroundPositionStyle。
+  左侧九宫格给常用位置，右侧两个带单位数值给自定义 X / Y（DSL 值形如 "50% 50%"）。
+-->
+<template>
+  <div class="st-bgpos">
+    <SetGrid9 kind="BackgroundPositionStyle" :value="value" :disabled="disabled" @input="pickGrid" @change="$emit('change')" />
+    <div class="st-bgpos__xy">
+      <SetNumberStyle :value="x" :options="numOptions('X')" :disabled="disabled" @input="setX" @change="emitOut" />
+      <SetNumberStyle :value="y" :options="numOptions('Y')" :disabled="disabled" @input="setY" @change="emitOut" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+import SetGrid9 from './SetGrid9.vue'
+import SetNumberStyle from './SetNumberStyle.vue'
+
+const UNITS = [
+  { key: 'number', value: 'px' },
+  { key: 'percent', value: '%' },
+]
+
+export default {
+  name: 'SetBgPosition',
+  components: { SetGrid9, SetNumberStyle },
+  props: setterProps,
+  emits: setterEmits,
+  data() {
+    return { x: '', y: '' }
+  },
+  watch: {
+    value: { immediate: true, handler() { this.parse() } },
+  },
+  methods: {
+    parse() {
+      const parts = String(this.value || '').split(/\s+/)
+      this.x = parts[0] || ''
+      this.y = parts[1] || ''
+    },
+    numOptions(placeholder) {
+      return { placeholder, iTypeList: UNITS }
+    },
+    pickGrid(v) {
+      this.$emit('input', v)
+    },
+    setX(v) {
+      this.x = v
+      this.emitValue()
+    },
+    setY(v) {
+      this.y = v
+      this.emitValue()
+    },
+    emitValue() {
+      this.$emit('input', `${this.x || '0'} ${this.y || '0'}`)
+    },
+    emitOut() {
+      this.$emit('change')
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,90 @@
+<!--
+  背景图大小设置器：对应编辑器 style/BackgroundSizeStyle。
+  下拉给 cover / contain，选「自定义」时展开宽高两个带单位数值（DSL 值形如 "auto auto"）。
+-->
+<template>
+  <div class="st-bgsize">
+    <Dropdown
+      :value="preset"
+      :options="bgOptions"
+      size="sm"
+      block
+      :disabled="disabled"
+      @input="pickPreset($event)"
+    />
+    <div v-if="!preset" class="st-bgsize__xy">
+      <SetNumberStyle :value="x" :options="{ placeholder: '宽' }" :disabled="disabled" @input="setX" @change="emitOut" />
+      <SetNumberStyle :value="y" :options="{ placeholder: '高' }" :disabled="disabled" @input="setY" @change="emitOut" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+import SetNumberStyle from './SetNumberStyle.vue'
+import Dropdown from '../Dropdown.vue'
+
+const TYPES = [
+  { key: 'cover', desc: 'cover：保持纵横比，缩放到完全覆盖背景定位区域的最小尺寸' },
+  { key: 'contain', desc: 'contain：保持纵横比，缩放到能放进背景定位区域的最大尺寸' },
+]
+
+export default {
+  name: 'SetBgSize',
+  components: { SetNumberStyle, Dropdown },
+  computed: {
+    bgOptions() {
+      return [{ key: '', value: '自定义' }].concat(
+        this.TYPES.map((t) => ({ key: t.key, value: t.key }))
+      )
+    },
+  },
+  props: setterProps,
+  emits: setterEmits,
+  data() {
+    return { TYPES, preset: '', x: '', y: '' }
+  },
+  watch: {
+    value: { immediate: true, handler() { this.parse() } },
+  },
+  methods: {
+    parse() {
+      const v = String(this.value || '')
+      const keys = TYPES.map((t) => t.key)
+      this.preset = keys.includes(v) ? v : ''
+      const parts = v.split(/\s+/)
+      if (parts.length >= 2) {
+        this.x = parts[0] || ''
+        this.y = parts[1] || ''
+      } else {
+        this.x = ''
+        this.y = ''
+      }
+    },
+    pickPreset(v) {
+      this.preset = v
+      if (!v) {
+        this.x = 'auto'
+        this.y = 'auto'
+      }
+      this.emitValue()
+      this.$emit('change')
+    },
+    setX(v) {
+      this.x = v
+      this.emitValue()
+    },
+    setY(v) {
+      this.y = v
+      this.emitValue()
+    },
+    emitValue() {
+      const out = this.preset ? this.preset : `${this.x || 'auto'} ${this.y || 'auto'}`
+      this.$emit('input', out)
+    },
+    emitOut() {
+      this.$emit('change')
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,90 @@
+<!--
+  代码设置器：对应编辑器里 customAction 的脚本编辑框。
+  itemType === 'Code' 时使用。
+
+  值形态：itemValue 是**对象** `{ code, compiled? }`（schema 实测形态），
+  不是裸字符串。这里只改写 options.codeKey（默认 'code'）那一个键，
+  其余键（如线上 babel 产物 compiled）原样保留 —— 避免编辑器把不认识的
+  字段擦掉造成回传丢数据。
+
+  编辑器实例由 CodeJar 托管 DOM，因此**不能**用 :value 双向绑定重渲染，
+  只在挂载时灌一次初值；外部值变化（切换节点/切换动作类型）通过 key 重建组件。
+-->
+<template>
+  <div class="st-code">
+    <div ref="editor" class="st-code__editor" :class="{ 'is-disabled': disabled }"></div>
+    <div class="st-code__foot">
+      <span class="st-code__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'
+
+export default {
+  name: 'SetCode',
+  props: setterProps,
+  emits: setterEmits,
+  data() {
+    return { code: '' }
+  },
+  computed: {
+    codeKey() {
+      return this.options.codeKey || 'code'
+    },
+    lines() {
+      return this.code ? this.code.split('\n').length : 0
+    },
+    chars() {
+      return this.code.length
+    },
+  },
+  mounted() {
+    this.code = this.readCode()
+    this.$nextTick(() => this.initJar())
+  },
+  beforeUnmount() {
+    if (this._t) clearTimeout(this._t)
+    if (this._jar && this._jar.destroy) this._jar.destroy()
+  },
+  methods: {
+    readCode() {
+      const v = this.value
+      if (v == null) return ''
+      if (typeof v === 'string') return v
+      if (typeof v === 'object') return String(v[this.codeKey] || '')
+      return String(v)
+    },
+    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
+      // 保留 compiled 等未知键，只覆写 codeKey
+      const base = this.value && typeof this.value === 'object' ? Object.assign({}, this.value) : {}
+      base[this.codeKey] = code
+      this.$emit('input', base)
+      // 代码输入频繁，change（触发重建预览）做防抖
+      if (this._t) clearTimeout(this._t)
+      this._t = setTimeout(() => this.$emit('change'), 400)
+    },
+  },
+}
+</script>