cardbuddy 0.6.0

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

@@ -0,0 +1,61 @@
+<!--
+  条件表达式设置器：对应编辑器 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

@@ -0,0 +1,43 @@
+<!--
+  图片素材设置器：对应 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

@@ -0,0 +1,139 @@
+<!--
+  列表设置器：对应编辑器 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>

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

@@ -0,0 +1,118 @@
+<!--
+  数字输入设置器：对应编辑器 common/InputNumber。
+  - itemOption.type      取值 integer/+integer/-integer/float/+float/-float，决定输入正则
+  - itemOption.iParamList 预设值列表（点击右侧箭头弹出，如字号 12/14/16…）
+  - itemOption.symbol    右侧单位文案；NumberStyle 通过具名插槽 symbol 注入单位下拉
+-->
+<template>
+  <div class="st-number-wrap">
+    <div class="st-number">
+      <input
+        ref="field"
+        class="st-number__field"
+        type="text"
+        :placeholder="options.placeholder || '请输入'"
+        :disabled="disabled"
+        :value="inputValue"
+        @input="onInput($event.target.value)"
+        @change="emitChange()"
+        @keydown.up.prevent="step(1)"
+        @keydown.down.prevent="step(-1)"
+        @blur="closeSug()"
+      />
+
+      <span v-if="$slots.symbol" class="st-number__symbol st-number__symbol--btn">
+        <slot name="symbol" />
+      </span>
+      <span v-else-if="options.symbol && options.symbol !== true" class="st-number__symbol">{{ options.symbol }}</span>
+
+      <span
+        v-if="suggestions.length"
+        class="st-number__caret"
+        title="预设值"
+        @mousedown.prevent="sugOpen = !sugOpen"
+      >▾</span>
+    </div>
+
+    <!-- 预设值浮层：移出 .st-number，避免被 overflow:hidden 裁切 -->
+    <div v-if="sugOpen && suggestions.length" class="st-pop st-pop--sug">
+      <div
+        v-for="s in suggestions"
+        :key="s.key"
+        class="st-pop__item"
+        :class="{ 'st-pop__item--on': String(s.key) === String(inputValue) }"
+        @mousedown.prevent="pick(s)"
+      >{{ s.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+
+const TYPES = {
+  integer: /^-?(0|[1-9][0-9]*)?$/,
+  '+integer': /^(0|[1-9][0-9]*)?$/,
+  '-integer': /^(0|-[1-9]?[0-9]*)?$/,
+  float: /^-?([0-9]*|(0|[1-9][0-9]*)\.[0-9]*)?$/,
+  '+float': /^([0-9]*|(0|[1-9][0-9]*)\.[0-9]*)?$/,
+  '-float': /^(0|-[0-9]*|-(0|[1-9][0-9]*)\.[0-9]*)?$/,
+}
+
+export default {
+  name: 'SetNumber',
+  props: setterProps,
+  emits: setterEmits,
+  data() {
+    return { inputValue: '', sugOpen: false }
+  },
+  computed: {
+    suggestions() {
+      return this.options.iParamList || []
+    },
+    pattern() {
+      return TYPES[this.options.type] || TYPES.integer
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(v) {
+        this.inputValue = v === undefined || v === null ? '' : String(v)
+      },
+    },
+  },
+  methods: {
+    onInput(v) {
+      if (!this.pattern.test(v)) {
+        // 非法输入回滚（与编辑器一致：直接丢弃这次按键）
+        this.$refs.field.value = this.inputValue
+        return
+      }
+      this.inputValue = v
+      this.$emit('input', v)
+    },
+    step(delta) {
+      const n = parseFloat(this.inputValue)
+      const next = String((Number.isNaN(n) ? 0 : n) + delta)
+      if (!this.pattern.test(next)) return
+      this.inputValue = next
+      this.$emit('input', next)
+      this.emitChange()
+    },
+    pick(s) {
+      this.sugOpen = false
+      this.inputValue = String(s.key)
+      this.$emit('input', this.inputValue)
+      this.emitChange()
+    },
+    closeSug() {
+      // 交给 mousedown 先跑完（pick 用的是 mousedown）
+      setTimeout(() => (this.sugOpen = false), 0)
+    },
+    emitChange() {
+      this.$emit('change')
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,113 @@
+<!--
+  带单位的数值设置器：对应编辑器 style/NumberStyle。
+
+  DSL 里 width/height 这类字段是**单个字符串**，靠后缀区分单位：
+    "120"  → px
+    "50%"  → 百分比
+    "auto" → 自适应
+  切换单位时编辑器会重置数值（percent→100、auto→'auto'、number→''），这里保持一致。
+-->
+<template>
+  <div class="st-numberstyle">
+    <SetNumber
+      :value="numValue"
+      :options="numberOptions"
+      :disabled="disabled || isAuto"
+      @input="onNum"
+      @change="$emit('change')"
+    >
+      <template #symbol>
+        <span class="st-unit" @mousedown.prevent="menuOpen = !menuOpen">{{ unitLabel }}</span>
+      </template>
+    </SetNumber>
+
+    <!-- 单位切换浮层：移到 .st-number 之外，避免被 overflow:hidden 裁切 -->
+    <div v-if="menuOpen" class="st-pop-mask" @mousedown.prevent="menuOpen = false"></div>
+    <div v-if="menuOpen" class="st-pop st-pop--unit">
+      <div
+        v-for="u in unitList"
+        :key="u.key"
+        class="st-pop__item"
+        :class="{ 'st-pop__item--on': u.key === unit }"
+        @mousedown.prevent="pickUnit(u.key)"
+      >{{ u.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+import SetNumber from './SetNumber.vue'
+
+const DEFAULT_UNITS = [
+  { key: 'number', value: 'px' },
+  { key: 'percent', value: '%' },
+  { key: 'auto', value: '@' },
+]
+
+export default {
+  name: 'SetNumberStyle',
+  components: { SetNumber },
+  props: setterProps,
+  emits: setterEmits,
+  data() {
+    return { unit: 'number', numValue: '', menuOpen: false }
+  },
+  computed: {
+    unitList() {
+      return this.options.iTypeList || DEFAULT_UNITS
+    },
+    unitLabel() {
+      const hit = this.unitList.filter((u) => u.key === this.unit)[0]
+      return hit ? hit.value : 'px'
+    },
+    // @/auto 单位下，输入框只读（显示 auto 且不可编辑）
+    isAuto() {
+      return this.unit === 'auto'
+    },
+    numberOptions() {
+      return {
+        ...this.options,
+        type: this.unit === 'percent' ? 'integer' : 'float',
+        placeholder: this.options.placeholder || '',
+        symbol: true,
+      }
+    },
+  },
+  watch: {
+    value: { immediate: true, handler() { this.parse() } },
+  },
+  methods: {
+    parse() {
+      const v = this.value
+      if (/%$/.test(String(v))) {
+        this.unit = 'percent'
+        this.numValue = String(v).replace(/%/g, '')
+      } else if (v === 'auto') {
+        this.unit = 'auto'
+        this.numValue = 'auto'
+      } else {
+        this.unit = 'number'
+        this.numValue = v === 0 ? '0' : v === undefined || v === null ? '' : String(v)
+      }
+    },
+    onNum(v) {
+      this.numValue = v
+      this.emit()
+    },
+    pickUnit(key) {
+      this.menuOpen = false
+      this.unit = key
+      if (key === 'percent') this.numValue = '100'
+      else if (key === 'auto') this.numValue = 'auto'
+      else this.numValue = ''
+      this.emit()
+      this.$emit('change')
+    },
+    emit() {
+      if (this.unit === 'percent' && this.numValue) this.$emit('input', this.numValue + '%')
+      else this.$emit('input', this.numValue)
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,77 @@
+<!--
+  四向内边距设置器：对应编辑器 style/PaddingStyle。
+
+  DSL 里是一个字符串，默认形态 `{2,2,2,2}`：
+    - itemOption.brackets  包裹符，默认 ['{','}']
+    - itemOption.seperator 分隔符，默认 ','
+    - itemOption.normal    true → 顺序同 CSS：上,右,下,左
+                           false（默认）→ 上,左,下,右
+  顺序错了会让上下/左右内边距互换，所以这里严格照抄编辑器的分支。
+-->
+<template>
+  <div class="st-pad">
+    <SetNumber :value="form.top" :options="opt('上')" :disabled="disabled" @input="set('top', $event)" @change="emitOut" />
+    <SetNumber :value="form.right" :options="opt('右')" :disabled="disabled" @input="set('right', $event)" @change="emitOut" />
+    <SetNumber :value="form.bottom" :options="opt('下')" :disabled="disabled" @input="set('bottom', $event)" @change="emitOut" />
+    <SetNumber :value="form.left" :options="opt('左')" :disabled="disabled" @input="set('left', $event)" @change="emitOut" />
+  </div>
+</template>
+
+<script>
+import { setterProps, setterEmits } from './props.js'
+import SetNumber from './SetNumber.vue'
+
+export default {
+  name: 'SetPadding',
+  components: { SetNumber },
+  props: setterProps,
+  emits: setterEmits,
+  data() {
+    return { form: { top: '', right: '', bottom: '', left: '' } }
+  },
+  computed: {
+    brackets() {
+      return this.options.brackets || ['{', '}']
+    },
+    seperator() {
+      return this.options.seperator || ','
+    },
+  },
+  watch: {
+    value: { immediate: true, handler() { this.parse() } },
+  },
+  methods: {
+    parse() {
+      let s = String(this.value || '')
+      if (this.brackets.length) {
+        s = s.replace(new RegExp(`[${this.brackets.join('')}]`, 'g'), '')
+      }
+      const p = s.split(this.seperator)
+      if (this.options.normal) {
+        this.form = { top: p[0] || '', right: p[1] || '', bottom: p[2] || '', left: p[3] || '' }
+      } else {
+        this.form = { top: p[0] || '', left: p[1] || '', bottom: p[2] || '', right: p[3] || '' }
+      }
+    },
+    opt(symbol) {
+      return { type: 'integer', symbol, placeholder: '0' }
+    },
+    set(k, v) {
+      this.form[k] = v
+      this.emitValue()
+    },
+    emitValue() {
+      const f = this.form
+      const arr = this.options.normal
+        ? [f.top, f.right, f.bottom, f.left]
+        : [f.top, f.left, f.bottom, f.right]
+      const body = arr.map((x) => (x === '' || x === undefined ? '0' : x)).join(this.seperator)
+      const [l, r] = this.brackets.length ? this.brackets : ['', '']
+      this.$emit('input', `${l || ''}${body}${r || ''}`)
+    },
+    emitOut() {
+      this.$emit('change')
+    },
+  },
+}
+</script>