eoss 0.1.0-alpha.20 → 0.1.0-alpha.21

package/packages/lowcode/src/attribute/property.vue

@@ -0,0 +1,331 @@
+<template>
+  <es-scrollbar class="es-lowcode__property">
+    <es-form label-width="auto" size="small" :model="models">
+      <es-collapse v-model="active">
+        <es-collapse-item name="hook">
+          <template slot="title">
+            <span>生命周期</span>
+          </template>
+          <es-form-item
+            v-for="item in hooks"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('hooks')"></es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="props">
+          <template slot="title">
+            <span>props</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('props')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in props"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('props')">
+
+                <i
+                  v-if="item.custom"
+                  slot="append"
+                  class="es-icon-shanchu"
+                  @click.stop="handleDelete('props', item.name)"
+                ></i>
+            </es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="data">
+          <template slot="title">
+            <span>data</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('datas')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in datas"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('data')">
+
+                <i
+                  v-if="item.custom"
+                  slot="append"
+                  class="es-icon-shanchu"
+                  @click.stop="handleDelete('datas', item.name)"
+                ></i>
+            </es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="computed">
+          <template slot="title">
+            <span>computed</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('computeds')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in computeds"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('computed')">
+                <i
+                  v-if="item.custom"
+                  slot="append"
+                  class="es-icon-shanchu"
+                  @click.stop="handleDelete('computeds', item.name)"
+                ></i>
+            </es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="watch">
+          <template slot="title">
+            <span>watch</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('watchs')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in watchs"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('watch')">
+
+                <i
+                  v-if="item.custom"
+                  slot="append"
+                  class="es-icon-shanchu"
+                  @click.stop="handleDelete('watchs', item.name)"
+                ></i>
+            </es-input>
+          </es-form-item>
+        </es-collapse-item>
+      </es-collapse>
+    </es-form>
+    <es-dialog
+      title="添加自定义属性"
+      :visible.sync="visible"
+      :showScale="false"
+      width="400px"
+      height="200px"
+      @close="handleClose"
+    >
+      <es-form :model="value" label-width="80px" size="small" ref="keyRef" :rules="rules">
+        <es-form-item label="属性名" prop="key">
+          <es-input v-model="value.key"></es-input>
+        </es-form-item>
+        <es-form-item label="属性值" prop="value">
+          <es-input v-model="value.value"></es-input>
+        </es-form-item>
+        <div class="es-lowcode__property--dialog-footer">
+          <es-button size="small" @click="visible = false">取消</es-button>
+          <es-button size="small" @click="handleSubmit" type="primary"
+            >确定</es-button
+          >
+        </div>
+      </es-form>
+    </es-dialog>
+  </es-scrollbar>
+</template>
+<script>
+export default {
+  name: 'Bind',
+
+  components: {},
+
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  data() {
+    return {
+      hooks: [
+        {
+          name: 'beforeCreate',
+          label: 'beforeCreate',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'created',
+          label: 'created',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'beforeMount',
+          label: 'beforeMount',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'mounted',
+          label: 'mounted',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'beforeUpdate',
+          label: 'beforeUpdate',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'updated',
+          label: 'updated',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'beforeDestroy',
+          label: 'beforeDestroy',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'destroyed',
+          label: 'destroyed',
+          type: 'text',
+          clearable: true
+        }
+      ],
+      props: [],
+      datas: [],
+      computeds: [],
+      watchs: [],
+      hookValues: {},
+      propValues: {},
+      dataValues: {},
+      computedValues: {},
+      watchValues: {},
+      /**
+       * 活动项
+       */
+      active: ['hook', 'props', 'data', 'computed', 'watch'],
+      visible: false,
+      /**
+       * 新增属性值
+       */
+      value: {},
+      /**
+       * 新增属性值规则
+       */
+      rules: {
+        key: [{ required: true, message: '请输入属性名', trigger: 'blur' }]
+      },
+      /**
+       * 新增属性值类型
+       */
+      type: '',
+      contrast: {
+        props:'propsValues',
+        datas:'dataValues',
+        computeds:'computedValues',
+        watchs:'watchValues'
+      }
+    };
+  },
+
+  computed: {
+    models() {
+      return {
+        ...this.hookValues,
+        ...this.propValues,
+        ...this.dataValues,
+        ...this.computedValues,
+        ...this.watchValues,
+      };
+    }
+  },
+
+  watch: {
+    /**
+     * 监听 model prop 变化（仅用于切换组件时的初始化同步）
+     */
+    model: {
+      handler(val) {
+        this.hookValues = val.hooks || {};
+        this.propValues = val.props || {};
+        this.dataValues = val.data || {};
+        this.computedValues = val.computed || {};
+        this.watchValues = val.watch || {};
+      },
+      immediate: true
+    }
+  },
+
+  created() {},
+
+  mounted() {},
+
+  methods: {
+    /**
+     * 处理输入框内容变更，根据分类通过 change 事件通知父组件
+     * @param {String} category - 变更字段所属分类（hooks/props/data/computed/watch）
+     */
+    handleChange(category) {
+      const emitMap = {
+        hooks: 'hookValues',
+        props: 'propValues',
+        data: 'dataValues',
+        computed: 'computedValues',
+        watch: 'watchValues'
+      };
+      const key = emitMap[category];
+      if (key) {
+        this.$emit('change', { [category]: { ...this[key] } });
+      }
+    },
+    /**
+     * 处理添加事件
+     */
+    handleAdd(type) {
+      this.type = type;
+      this.visible = true;
+    },
+    handleClose() {
+      this.$refs.keyRef.resetFields();
+      this.value.key = '';
+    },
+    /**
+     * 处理提交事件
+     */
+    handleSubmit() {
+      this.$refs.keyRef.validate((valid) => {
+        if (valid) {
+          this[this.type].push({
+            name: this.value.key,
+            label: this.value.key,
+            type: 'text'
+          });
+          this.$set(this[this.contrast[this.type]], this.value.key, '');
+          this.visible = false;
+        }
+      });
+    }
+  },
+  updated() {
+    this.$refs.keyRef.resetFields();
+  }
+};
+</script>

package/packages/lowcode/src/attribute/styles.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="es-lowcode__styles">
+    <es-form
+      ref="formRef"
+      label-width="auto"
+      size="small"
+      :model="models"
+      :contents="contents"
+      :show-buttons="false"
+      @change="handleChange"
+    >
+    </es-form>
+  </div>
+</template>
+
+<script>
+import EsForm from 'eoss/packages/form';
+export default {
+  name: 'Styles',
+  inject: ['lowcode'],
+
+  components: { EsForm },
+
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  data() {
+    return {
+      contents: [
+        {
+          name: 'display',
+          label: '布局',
+          type: 'select',
+          allowCreate: true,
+          filterable: true,
+          clearable: true,
+          data: [
+            {
+              name: '瀑布流',
+              value: 'masonry'
+            },
+            {
+              name: 'grid',
+              value: 'grid'
+            },
+            {
+              name: 'flex',
+              value: 'flex'
+            }
+          ],
+          events: {
+            change: this.handleChangeDisplayType
+          }
+        },
+        {
+          name: 'columns',
+          label: '总列数',
+          min: 1,
+          max: 12,
+          default: false,
+          type: 'number'
+        },
+        {
+          name: 'span',
+          label: '列数',
+          min: 1,
+          max: 12,
+          default: false,
+          type: 'number'
+        },
+        {
+          name: 'gap',
+          label: '列间隙',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'flex-direction',
+          label: '排列方向',
+          type: 'select',
+          clearable: true,
+          allowCreate: true,
+          filterable: true,
+          data: [
+            {
+              label: 'row',
+              value: 'row'
+            },
+            {
+              label: 'column',
+              value: 'row-reverse'
+            },
+            {
+              label: 'column',
+              value: 'column'
+            },
+            {
+              label: 'column',
+              value: 'column-reverse'
+            }
+          ]
+        },
+        {
+          name: 'flex-wrap',
+          label: 'flex容器换行',
+          type: 'select',
+          clearable: true,
+          allowCreate: true,
+          filterable: true,
+          data: [
+            {
+              label: 'nowrap',
+              value: 'nowrap'
+            },
+            {
+              label: 'wrap',
+              value: 'wrap'
+            }
+          ]
+        },
+        {
+          name: 'align-items',
+          label: '纵轴对齐方式',
+          type: 'select',
+          clearable: true,
+          allowCreate: true,
+          filterable: true,
+          data: [
+            {
+              label: 'flex-start',
+              value: 'flex-start'
+            },
+            {
+              label: 'flex-end',
+              value: 'flex-end'
+            },
+            {
+              label: 'center',
+              value: 'center'
+            }
+          ]
+        },
+        {
+          name: 'justify-content',
+          label: '横轴对齐方式',
+          type: 'select',
+          clearable: true,
+          allowCreate: true,
+          filterable: true,
+          data: [
+            {
+              label: 'flex-start',
+              value: 'flex-start'
+            },
+            {
+              label: 'flex-end',
+              value: 'flex-end'
+            },
+            {
+              label: 'center',
+              value: 'center'
+            },
+            {
+              label: 'space-between',
+              value: 'space-between'
+            },
+            {
+              label: 'space-around',
+              value: 'space-around'
+            }
+          ]
+        },
+        {
+          name: 'background',
+          label: '背景',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'border',
+          label: '边框',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'padding',
+          label: '内边距',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'margin',
+          label: '外边距',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'font-size',
+          label: '字体大小',
+          type: 'select',
+          clearable: true,
+          allowCreate: true,
+          filterable: true,
+          data: [
+            {
+              label: '12',
+              value: '12px'
+            },
+            {
+              label: '14',
+              value: '14px'
+            },
+            {
+              label: '16',
+              value: '16px'
+            },
+            {
+              label: '20',
+              value: '20px'
+            },
+            {
+              label: '24',
+              value: '24px'
+            },
+            {
+              label: '32',
+              value: '32px'
+            },
+            {
+              label: '40',
+              value: '40px'
+            }
+          ]
+        },
+        {
+          name: 'color',
+          label: '颜色',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'text-align',
+          label: '文本对齐',
+          type: 'select',
+          clearable: true,
+          allowCreate: true,
+          filterable: true,
+          data: [
+            {
+              label: 'left',
+              value: 'left'
+            },
+            {
+              label: 'center',
+              value: 'center'
+            },
+            {
+              label: 'right',
+              value: 'right'
+            }
+          ]
+        },
+        {
+          name: 'line-height',
+          label: '行高',
+          type: 'text',
+          clearable: true
+        }
+      ],
+      models: {}
+    };
+  },
+
+  computed: {},
+
+  watch: {
+    /**
+     * 监听 model prop 变化（仅用于切换组件时的初始化同步）
+     * 不使用 deep，因为编辑操作通过 @change 事件驱动，不需要深度监听
+     */
+    model: {
+      handler(val) {
+        let style = val.style || {};
+        if (!style.display && (this.lowcode.page && this.lowcode.page.type === 'page')) {
+          style = { ...style, display: 'masonry' };
+          this.$nextTick(() => {
+            this.handleChange();
+          });
+        }
+        this.models = style;
+      },
+      immediate: true
+    }
+  },
+
+  created() {},
+
+  mounted() {},
+
+  methods: {
+    handleChangeDisplayType(val) {
+      if (val === 'flex') {
+        this.$set(this.contents[1], 'hide', true);
+      } else {
+        this.$set(this.contents[1], 'hide', false);
+      }
+    },
+    handleChange() {
+      this.$emit('change', { style: this.models });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped></style>