cardbuddy 0.11.0 → 0.12.1

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

@@ -1,107 +0,0 @@
-<!--
-  变量表达式设置器：节点属性「变量」来源（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

@@ -1,125 +0,0 @@
-<!--
-  渐变设置器：对应编辑器 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

@@ -1,68 +0,0 @@
-<!--
-  九宫格对齐设置器：对应编辑器 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

@@ -1,67 +0,0 @@
-<!--
-  图标选择设置器：对应编辑器 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>

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

@@ -1,61 +0,0 @@
-<!--
-  条件表达式设置器：对应编辑器 forms/IfForm。
-
-  编辑器里点一下会弹「条件选择器」（依赖平台的数据域面板），本地没有那套服务，
-  所以直接把底层数据结构摊开来编辑 —— DSL 中该值就是 `{name, expression}`：
-    name       面板上显示的条件名
-    expression 真正参与求值的表达式，如 `$singleMode`
-  两者一般同值；这里默认联动，name 留空时自动取 expression。
--->
-<template>
-  <div class="st-ifform">
-    <SetExpr
-      :value="expression"
-      :disabled="disabled"
-      placeholder="表达式，如 $singleMode 或 $data.count > 0"
-      @input="setExpression"
-      @change="$emit('change')"
-    />
-    <input
-      class="ni-input"
-      type="text"
-      placeholder="显示名（留空跟随表达式）"
-      :disabled="disabled"
-      :value="name"
-      @input="setName($event.target.value)"
-      @change="$emit('change')"
-    />
-  </div>
-</template>
-
-<script>
-import { setterProps, setterEmits } from './props.js'
-import SetExpr from './SetExpr.vue'
-
-export default {
-  name: 'SetIfForm',
-  components: { SetExpr },
-  props: setterProps,
-  emits: setterEmits,
-  computed: {
-    obj() {
-      return this.value && typeof this.value === 'object' ? this.value : {}
-    },
-    expression() {
-      return this.obj.expression || ''
-    },
-    name() {
-      return this.obj.name || ''
-    },
-  },
-  methods: {
-    setExpression(v) {
-      const named = !this.name || this.name === this.expression
-      this.$emit('input', { name: named ? v : this.name, expression: v })
-    },
-    setName(v) {
-      this.$emit('input', { name: v, expression: this.expression })
-    },
-  },
-}
-</script>

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

@@ -1,43 +0,0 @@
-<!--
-  图片素材设置器：对应 itemValueFrom === '2' 的图片来源。
-
-  编辑器里这里是素材库选择器；本地没有素材库服务，故退化为：
-   - 可预览的直接给缩略图（http / data: / 以 / 开头的相对路径）；
-   - @filestore/... 这类虚拟路径只显示原文（无法预览）；
-   - 文本框手输路径 + 清空按钮。
--->
-<template>
-  <div class="st-image">
-    <div class="st-image__row">
-      <input
-        class="ni-input"
-        type="text"
-        :disabled="disabled"
-        :value="value || ''"
-        placeholder="图片路径，如 @filestore/...png 或 https://..."
-        @input="$emit('input', $event.target.value)"
-        @change="$emit('change')"
-      />
-      <button v-if="value" class="st-image__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>
-</template>
-
-<script>
-import { setterProps, setterEmits } from './props.js'
-
-export default {
-  name: 'SetImage',
-  props: setterProps,
-  emits: setterEmits,
-  methods: {
-    clear() {
-      if (this.disabled) return
-      this.$emit('input', '')
-      this.$emit('change')
-    },
-  },
-}
-</script>

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

@@ -1,139 +0,0 @@
-<!--
-  列表设置器：对应编辑器 common/List。
-
-  DSL 里 List 类型的实体数据在 property.itemList（数组，每项是带 properties 的 PropertyList），
-  itemValue 固定为空数组。itemOption.iFieldList 给出「列定义」{key, value}，
-  但已落库的每项实际字段往往比 iFieldList 更全（编辑器按组件包里的富模板生成）。
-
-  这里：
-   - 逐项渲染：复用全局 <prop-control> 把每项的子属性交给对应类型化控件编辑；
-   - 增 / 删 / 上下移：直接操作 property.itemList（PropertyList[]）；
-   - 新增项：优先克隆首项结构（空白值），没有首项时退化为 iFieldList 生成的 Input 字段。
--->
-<template>
-  <div class="st-list">
-    <div
-      v-for="(item, idx) in list"
-      :key="item.id"
-      class="st-list__item"
-    >
-      <div class="st-list__head">
-        <span class="st-list__idx">#{{ idx + 1 }}</span>
-        <span class="st-list__head-spacer" />
-        <button class="st-list__op" type="button" title="上移" :disabled="disabled || idx === 0" @click="move(idx, -1)">↑</button>
-        <button class="st-list__op" type="button" title="下移" :disabled="disabled || idx === list.length - 1" @click="move(idx, 1)">↓</button>
-        <button class="st-list__op st-list__op--del" type="button" title="删除" :disabled="disabled" @click="remove(idx)">
-          <svg viewBox="0 0 16 16" class="st-ic" aria-hidden="true"><use href="#icon-delete" /></svg>
-        </button>
-      </div>
-      <div class="st-list__body">
-        <div
-          v-for="sub in item.properties"
-          v-show="sub.itemVisible"
-          :key="sub.itemId"
-          class="st-list__row"
-        >
-          <label class="st-list__label" :title="sub.itemDesc || displayName(sub)">{{ displayName(sub) }}</label>
-          <div class="st-list__control">
-            <prop-control
-              :property="sub"
-              :disabled="disabled"
-              @change="$emit('change')"
-              @sync="$emit('sync', $event)"
-            />
-          </div>
-        </div>
-        <p v-if="!item.properties.length" class="st-list__empty">该项无字段</p>
-      </div>
-    </div>
-
-    <p v-if="!list.length" class="st-list__empty">暂无项</p>
-
-    <button class="st-minibtn st-list__add" type="button" :disabled="disabled" @click="add">{{ addText }}</button>
-  </div>
-</template>
-
-<script>
-import { setterProps, setterEmits } from './props.js'
-import { PropertyList } from '../../runtime/property.js'
-
-export default {
-  name: 'SetList',
-  props: setterProps,
-  emits: setterEmits,
-  computed: {
-    /** itemInfo 即承载本 List 的 Property 实例；其 itemList 为 PropertyList[] */
-    list() {
-      const info = this.itemInfo
-      return (info && info.itemList) || []
-    },
-    addText() {
-      const t = this.options && this.options.btnText
-      return t || '添加项'
-    },
-  },
-  methods: {
-    /** 消除 meta 中重复标签（如 fontStyle/textDecoration 均名「字体样式」） */
-    displayName(sub) {
-      const raw = sub.itemName || sub.itemKey || ''
-      // MultiText textList 中的字段名消歧
-      const MAP = {
-        fontStyle: '字体风格',
-        textDecoration: '文字装饰',
-      }
-      return MAP[sub.itemKey] || raw
-    },
-    add() {
-      if (this.disabled) return
-      const info = this.itemInfo
-      const src = this.list[0]
-      let list
-      if (src) {
-        // 克隆首项结构、清空值，保证新增项字段与已有项一致
-        list = new PropertyList(
-          src.properties.map((p) => ({
-            itemId: p.itemId,
-            itemKey: p.itemKey,
-            itemName: p.itemName,
-            itemType: p.itemType,
-            itemOption: p.itemOption,
-            itemParam: p.itemParam,
-            itemDefaultValue: p.itemDefaultValue,
-            itemDesc: p.itemDesc,
-            itemTypeRange: p.itemTypeRange,
-            itemValueFrom: '0',
-            itemValue: '',
-          })),
-          {},
-        )
-      } else {
-        // 没有可参考的项时，退化用 iFieldList 生成 Input 字段
-        const fields = (this.options && this.options.iFieldList) || []
-        list = new PropertyList(
-          fields.map((f) => ({
-            itemId: f.key,
-            itemKey: f.key,
-            itemName: f.value || f.key,
-            itemType: 'Input',
-            itemValueFrom: '0',
-            itemValue: '',
-          })),
-          {},
-        )
-      }
-      info.itemList.push(list)
-      this.$emit('change')
-    },
-    remove(idx) {
-      if (this.disabled) return
-      this.itemInfo.removeAt(idx)
-      this.$emit('change')
-    },
-    move(idx, dir) {
-      if (this.disabled) return
-      this.itemInfo.moveItem(idx, idx + dir)
-      this.$emit('change')
-    },
-  },
-}
-</script>