feat(plugin): form radio

ly525
1 parent 270b4a22
Showing 6 changed files with 400 additions and 0 deletions
front-end/h5/src/components/plugins/common/editor-config-for-configurable-props.js
front-end/h5/src/components/plugins/common/props.js
front-end/h5/src/components/plugins/lbp-form-radio-group.js
front-end/h5/src/components/plugins/lbp-form-radio.js
front-end/h5/src/components/plugins/styles/radio.scss
front-end/h5/src/mixins/load-plugins.js
+export default {
+  text: {
+    type: 'a-input',
+    label: '按钮文字',
+    require: true,
+    defaultPropValue: '按钮'
+  },
+  fontSize: {
+    type: 'a-input-number',
+    label: '字号(px)',
+    require: true,
+    prop: {
+      step: 1,
+      min: 12,
+      max: 144
+    },
+    defaultPropValue: 14
+  },
+  color: {
+    type: 'a-input',
+    label: '文字颜色',
+    // !#zh 为编辑组件指定 prop
+    prop: {
+      type: 'color'
+    },
+    require: true,
+    defaultPropValue: 'black'
+  },
+  backgroundColor: {
+    type: 'a-input', // lbs-color-picker
+    label: '背景颜色',
+    prop: {
+      type: 'color'
+    },
+    require: true,
+    defaultPropValue: '#ffffff' // TODO why logogram for color does't work?
+  },
+  borderColor: {
+    type: 'a-input', // lbs-color-picker
+    label: '边框颜色',
+    prop: {
+      type: 'color'
+    },
+    require: true,
+    defaultPropValue: '#eeeeee'
+  },
+  borderWidth: {
+    type: 'a-input-number',
+    label: '边框宽度(px)',
+    require: true,
+    prop: {
+      step: 1,
+      min: 1,
+      max: 10
+    },
+    defaultPropValue: 1
+  },
+  borderRadius: {
+    type: 'a-input-number',
+    label: '圆角(px)',
+    require: true,
+    prop: {
+      step: 0.1,
+      min: 0,
+      max: 10
+    },
+    defaultPropValue: 0
+  },
+  lineHeight: {
+    type: 'a-input-number',
+    label: '行高',
+    require: true,
+    prop: {
+      step: 0.1,
+      min: 0.1,
+      max: 10
+    },
+    defaultPropValue: 1
+  }
+}
+export default {
+  text: {
+    type: String,
+    default: '按钮'
+  },
+  type: {
+    type: String,
+    default: 'radio'
+  },
+  placeholder: {
+    type: String,
+    default: '请填写提示文字'
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  backgroundColor: {
+    type: String,
+    default: 'transparent'
+  },
+  color: {
+    type: String,
+    default: 'black'
+  },
+  fontSize: {
+    type: Number,
+    default: 14
+  },
+  lineHeight: {
+    type: Number,
+    default: 1
+  },
+  borderWidth: {
+    type: Number,
+    default: 1
+  },
+  borderRadius: {
+    type: Number,
+    default: 0
+  },
+  borderColor: {
+    type: String,
+    default: '#ced4da'
+  },
+  textAlign: {
+    type: String,
+    default: 'center'
+  }
+}
+import LbpFormRadio from './lbp-form-radio.js'
+
+const defaultItems = [
+  {
+    value: '选项A-value'
+  },
+  {
+    value: '选项B-value'
+  },
+  {
+    value: '选项C-value'
+  }
+]
+
+export default {
+  name: 'lbp-form-radio-group',
+  components: {
+    LbpFormRadio
+  },
+  props: {
+    aliasName: {
+      type: String,
+      default: '标题演示'
+    },
+    items: {
+      type: Array,
+      default: () => defaultItems
+    }
+  },
+  data: () => ({
+    value: undefined,
+    uuid: undefined
+  }),
+  editorConfig: {
+    propsConfig: {
+      items: {
+        type: 'lbs-form-radio-items-editor',
+        label: '选项列表',
+        require: true,
+        defaultPropValue: defaultItems
+      },
+      aliasName: {
+        type: 'a-input',
+        label: '填写标题',
+        require: true,
+        defaultPropValue: '标题演示'
+      }
+    },
+    components: {
+      'lbs-form-radio-items-editor': {
+        render () {
+          return <div>
+            {
+              this.value_.map((item, index) => (
+                <div>
+                  <a-input value={item.value} onChange={e => { item.value = e.target.value }}></a-input>
+                  <a-button type="dashed" shape="circle" icon="plus" onClick={this.add} />
+                  <a-button type="dashed" shape="circle" icon="minus" onClick={(item, index) => this.minus(item, index)} />
+                </div>
+              ))
+            }
+          </div>
+        },
+        props: {
+          value: {
+            type: Array,
+            default: () => defaultItems
+          }
+        },
+        computed: {
+          value_: {
+            get () {
+              return this.value
+            },
+            set (val) {
+              this.$emit('input', val)
+            }
+          }
+        },
+        methods: {
+          add () {
+            console.log(this.value_.length)
+            this.$emit('change', [
+              ...this.value_,
+              {
+                value: `选项${this.value_.length + 1}-value`,
+                label: `选项${this.value_.length + 1}-label`
+              }
+            ])
+          },
+          minus (item, index) {
+            const items = this.value_.slice(0)
+            items.splice(index, 1)
+            this.$emit('change', items)
+          }
+        }
+      }
+    }
+  },
+  mounted () {
+    this.uuid = this.$el.dataset.uuid
+  },
+  render () {
+    return (
+      <div>
+        <h3>{this.aliasName}</h3>
+        <input type="text" hidden value={this.value} data-type="lbp-form-input" data-uuid={this.uuid} />
+        {
+          this.items.map(item => (
+            <lbp-form-radio
+              vertical
+              value={item.value}
+              checked={this.value === item.value}
+              aliasName={this.aliasName}
+              onChange={e => {
+                this.value = e
+              }}
+            >{item.value}</lbp-form-radio>
+          ))
+        }
+      </div>
+    )
+  }
+}
+import './styles/radio.scss'
+import commonProps from './common/props.js'
+import editorConfigForProps from './common/editor-config-for-configurable-props.js'
+
+export default {
+  name: 'lbp-form-radio',
+  props: {
+    ...commonProps,
+    value: {
+      type: [String, Number],
+      default: '标题演示'
+    },
+    aliasName: {
+      type: String,
+      default: '标题演示'
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    onFocus: {
+      type: Function,
+      default: () => {}
+    },
+    onClick: {
+      type: Function,
+      default: () => {}
+    },
+    onBlur: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  editorConfig: {
+    propsConfig: {
+      ...editorConfigForProps
+    }
+  },
+  methods: {
+    handleChange (e) {
+      if (this.disabled) return
+      this.$emit('change', e.target.value)
+    }
+  },
+  render () {
+    const {
+      color,
+      textAlign,
+      backgroundColor,
+      fontSize,
+      lineHeight,
+      borderColor,
+      borderRadius,
+      borderWidth,
+      aliasName,
+      id,
+      type,
+      // readOnly, // ?
+      disabled,
+      // tabIndex, // ?
+      checked,
+      // autoFocus,
+      value,
+      vertical
+    } = this
+
+    const style = {
+      color,
+      textAlign,
+      backgroundColor,
+      fontSize: fontSize,
+      lineHeight: lineHeight + 'em',
+      borderColor,
+      borderRadius: borderRadius + 'px',
+      borderWidth: borderWidth + 'px',
+      textDecoration: 'none',
+      display: vertical ? 'block' : 'inline-block'
+    }
+    return (
+      <label role="radio" tabindex="0" class="lbp-radio" style={style} aria-checked="true">
+        <input
+          name={aliasName}
+          id={id}
+          type={type}
+          ref="input"
+          value={value}
+          disabled={disabled}
+          checked={!!checked}
+          onChange={this.handleChange}
+        // readOnly={readOnly}
+        // tabIndex={tabIndex}
+        // className={`${prefixCls}-input`}
+        // onClick={this.onClick}
+        // onFocus={this.onFocus}
+        // onBlur={this.onBlur}
+        // onInput={this.onInput}
+        // autoFocus={autoFocus}
+        // data-type="lbp-form-input"
+        // {...globalProps}
+        />
+        <span><slot>{value}</slot></span>
+      </label>
+    )
+  }
+}
+.lbp-radio {
+  input[type=checkbox],
+  input[type=radio] {
+
+    width: 16px;
+    height: 16px;
+
+    vertical-align: middle;
+    margin: 5px;
+    box-sizing: border-box;
+
+    resize: none;
+    overflow: hidden;
+    line-height: 120%;
+    display: inline-block!important;
+
+    box-shadow: inherit;
+    border: 1px solid #ccd5db;
+    padding: 6px;
+    outline: none!important;
+  }
+}
 \ No newline at end of file
@@ -4,6 +4,7 @@ import LbpPicture from &#39;../components/plugins/lbp-picture&#39;
 import LbpText from '../components/plugins/lbp-text'
 import LbpFormInput from '../components/plugins/lbp-form-input'
 import LbpFormButton from '../components/plugins/lbp-form-button'
+import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group'
  
 export const pluginsList = [
   {
@@ -47,6 +48,20 @@ export const pluginsList = [
     component: LbpFormButton,
     visible: true,
     name: LbpFormButton.name
+  },
+  // {
+  //   title: '表单单选',
+  //   icon: 'hand-pointer-o',
+  //   component: LbpFormRadio,
+  //   visible: true,
+  //   name: LbpFormRadio.name
+  // },
+  {
+    title: '表单单选',
+    icon: 'hand-pointer-o',
+    component: LbpFormRadioGroup,
+    visible: true,
+    name: LbpFormRadioGroup.name
   }
 ]