feat(PropTypes): upgrade PropTypes from object to function; #!zh: 升级 PropTypes: 更新为函数, 便于后期扩展

ly525
1 parent c6612749
Showing 16 changed files with 142 additions and 217 deletions
front-end/h5/package.json
front-end/h5/src/components/core/editor/edit-panel/props.js
front-end/h5/src/components/plugins/lbp-background.js
front-end/h5/src/components/plugins/lbp-bg-music.js
front-end/h5/src/components/plugins/lbp-button.js
front-end/h5/src/components/plugins/lbp-form-button.js
front-end/h5/src/components/plugins/lbp-form-checkbox-group.js
front-end/h5/src/components/plugins/lbp-form-input.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/lbp-notice-bar.js
front-end/h5/src/components/plugins/lbp-picture.js
front-end/h5/src/components/plugins/lbp-slide.js
front-end/h5/src/components/plugins/lbp-text.js
front-end/h5/src/components/plugins/lbp-video.js
front-end/h5/yarn.lock
@@ -17,7 +17,7 @@
     "@luban-h5/lbc-button": "^0.0.3",
     "@luban-h5/lbp-slide": "^0.0.7",
     "@luban-h5/lbs-text-align": "^0.0.3",
-    "@luban-h5/plugin-common-props": "^0.0.2",
+    "@luban-h5/plugin-common-props": "^0.1.3",
     "animate.css": "^3.7.2",
     "ant-design-vue": "^1.3.14",
     "core-js": "^2.6.5",
@@ -74,7 +74,7 @@ export default {
       const data = {
         // style: { width: '100%' },
         props: {
-          ...item.prop || {},
+          ...item.props || {},
           // https://vuejs.org/v2/guide/render-function.html#v-model
           // #!zh:不设置默认值的原因（下一行的代码，注释的代码）：
@@ -2,12 +2,14 @@
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
  * @LastEditors: ly525
- * @LastEditTime: 2020-04-23 23:17:55
+ * @LastEditTime: 2020-05-17 21:02:47
  * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-background.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: luban-h5 background image/color component/plugin
  * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  */
+import PropTypes from '@luban-h5/plugin-common-props'
+
 export default {
   name: 'lbp-background',
   render () {
@@ -39,34 +41,7 @@ export default {
     )
   },
   props: {
-    imgSrc: {
-      type: String,
-      default: '',
-      editor: {
-        type: 'lbs-image-gallery',
-        label: '图片',
-        prop: {
-          type: 'textarea'
-        }
-      }
-    },
-    backgroundColor: {
-      type: String,
-      // Q: 为什么 transparent 无效？
-      // A: 注意，根据 MDN 文档，颜色选择器的 value 只能是：# + 6个16进制字符串
-      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Value
-      // The value of an <input> element of type color is always a DOMString which contains a 7-character string specifying an RGB color in hexadecimal format.
-
-      default: 'rgba(255, 255, 255, 0.2)',
-      editor: {
-        type: 'el-color-picker',
-        label: '背景颜色',
-        prop: {
-          size: 'mini',
-          showAlpha: true
-        },
-        require: true
-      }
-    }
+    imgSrc: PropTypes.image(),
+    backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' })
   }
 }
 /*
  * @Author: ly525
  * @Date: 2020-01-03 23:43:34
- * @LastEditors  : ly525
- * @LastEditTime : 2020-01-04 13:27:58
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-05-17 20:58:32
  * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-bg-music.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
  * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  */
+import PropTypes from '@luban-h5/plugin-common-props'
 import './styles/bg-music.scss'
 export default {
   name: 'lbp-bg-music',
   props: {
-    disabled: {
-      type: Boolean,
-      default: true
-    },
-    autoplay: {
-      type: Boolean,
-      default: true,
-      editor: {
-        type: 'a-switch',
-        label: '自动播放'
+    disabled: PropTypes.boolean({
+      defaultValue: true,
+      label: 'disabled'
+    }),
+    autoplay: PropTypes.boolean({
+      defaultValue: true,
+      label: '自动播放'
+    }),
+    src: PropTypes.string({
+      label: '音乐URL',
+      defaultValue: 'http://go.163.com/2018/0209/mengniu/audio/bgm.mp3',
+      props: {
+        type: 'textarea'
       }
-    },
-    src: {
-      type: String,
-      default: 'http://go.163.com/2018/0209/mengniu/audio/bgm.mp3',
-      editor: {
-        type: 'a-input',
-        label: '音乐URL',
-        prop: {
-          type: 'textarea'
-        }
-      }
-    }
+    })
   },
   data: () => ({
     isPlaying: true
 // https://github.com/luban-h5-components/plugin-common-props
-import commonProps from '@luban-h5/plugin-common-props'
+import PropTypes from '@luban-h5/plugin-common-props'
 export default {
   render () {
@@ -33,16 +33,15 @@ export default {
   },
   name: 'lbp-button',
   props: {
-    text: commonProps.text(),
-    vertical: commonProps.vertical,
-    backgroundColor: commonProps.backgroundColor,
-    color: commonProps.color,
-    fontSize: commonProps.fontSize,
-    lineHeight: commonProps.lineHeight,
-    borderWidth: commonProps.borderWidth,
-    borderRadius: commonProps.borderRadius,
-    borderColor: commonProps.borderColor,
-    textAlign: commonProps.textAlign()
-
+    text: PropTypes.string(),
+    vertical: PropTypes.boolean(),
+    backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' }),
+    color: PropTypes.color(),
+    fontSize: PropTypes.number({ label: '字号(px)' }),
+    lineHeight: PropTypes.number({ label: '行高(px)', defaultValue: 1 }),
+    borderWidth: PropTypes.number({ label: '边框宽度(px)', defaultValue: 1 }),
+    borderRadius: PropTypes.number({ label: '圆角(px)', defaultValue: 4 }),
+    borderColor: PropTypes.color({ label: '边框颜色', defaultValue: '#ced4da' }),
+    textAlign: PropTypes.textAlign()
   }
 }
 // https://github.com/luban-h5-components/plugin-common-props
-import commonProps from '@luban-h5/plugin-common-props'
+import PropTypes from '@luban-h5/plugin-common-props'
 export default {
   render () {
@@ -36,16 +36,16 @@ export default {
   },
   name: 'lbp-form-button',
   props: {
-    text: commonProps.text(),
-    vertical: commonProps.vertical,
-    backgroundColor: commonProps.backgroundColor,
-    color: commonProps.color,
-    fontSize: commonProps.fontSize,
-    lineHeight: commonProps.lineHeight,
-    borderWidth: commonProps.borderWidth,
-    borderRadius: commonProps.borderRadius,
-    borderColor: commonProps.borderColor,
-    textAlign: commonProps.textAlign(),
+    text: PropTypes.string({ defaultValue: '提交' }),
+    vertical: PropTypes.boolean(),
+    backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' }),
+    color: PropTypes.color(),
+    fontSize: PropTypes.number({ label: '字号(px)' }),
+    lineHeight: PropTypes.number({ label: '行高(px)', defaultValue: 1 }),
+    borderWidth: PropTypes.number({ label: '边框宽度(px)', defaultValue: 1 }),
+    borderRadius: PropTypes.number({ label: '圆角(px)', defaultValue: 4 }),
+    borderColor: PropTypes.color({ label: '边框颜色', defaultValue: '#ced4da' }),
+    textAlign: PropTypes.textAlign(),
     disabled: {
       type: Boolean,
       default: false
+import PropTypes from '@luban-h5/plugin-common-props'
 import LbpFormRadio from './lbp-form-radio.js'
 function getDefaultItems () {
@@ -26,24 +27,15 @@ export default {
     LbpFormRadio
   },
   props: {
-    aliasName: {
-      type: String,
-      default: `标题演示`,
-      editor: {
-        type: 'a-input',
-        label: '填写标题',
-        require: true
-      }
-    },
-    items: {
-      type: Array,
-      default: () => getDefaultItems(),
-      editor: {
-        type: 'lbs-prop-text-enum-editor',
-        label: '选项列表',
-        require: true
-      }
-    },
+    aliasName: PropTypes.string({
+      defaultValue: '标题演示',
+      label: '填写标题'
+    }),
+    items: PropTypes.textOptions({
+      label: '选项列表',
+      defaultValue: () => getDefaultItems()
+    }),
+    // TODO 抽离 radio-group 至 common-props
     type: {
       type: String,
       default: 'checkbox',
@@ -51,7 +43,7 @@ export default {
         type: 'a-radio-group',
         label: '选择模式',
         require: true,
-        prop: {
+        props: {
           options: [
             { label: '单选', value: 'radio' },
             { label: '多选', value: 'checkbox' }
 // https://github.com/luban-h5-components/plugin-common-props
-import commonProps from '@luban-h5/plugin-common-props'
+import PropTypes from '@luban-h5/plugin-common-props'
 export default {
   name: 'lbp-form-input',
@@ -26,12 +26,6 @@ export default {
     />
   },
   props: {
-    name: {
-      type: String,
-      default () {
-        return 'name'
-      }
-    },
     type: {
       type: String,
       default: 'text',
@@ -40,20 +34,18 @@ export default {
         label: '类型'
       }
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    // type: commonProps.type,
-    placeholder: commonProps.placeholder('姓名'),
-    fontSize: commonProps.fontSize,
-    color: commonProps.color,
-    backgroundColor: commonProps.backgroundColor,
-    borderColor: commonProps.borderColor,
-    borderWidth: commonProps.borderWidth,
-    borderRadius: commonProps.borderRadius,
-    lineHeight: commonProps.lineHeight,
-    textAlign: commonProps.textAlign({ defaultValue: 'left' })
+    name: PropTypes.string({ defaultValue: 'name', label: 'name' }),
+    disabled: PropTypes.boolean({ label: 'disabled' }),
+    fontSize: PropTypes.number({ label: '字号(px)' }),
+    placeholder: PropTypes.string({ defaultValue: '提示信息', label: '提示信息' }),
+    color: PropTypes.color(),
+    backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' }),
+    borderWidth: PropTypes.number({ label: '边框宽度(px)', defaultValue: 1 }),
+    borderRadius: PropTypes.number({ label: '圆角(px)', defaultValue: 0 }),
+    borderColor: PropTypes.color({ label: '边框颜色', defaultValue: '#ced4da' }),
+    textAlign: PropTypes.textAlign({ defaultValue: 'left' }),
+    vertical: PropTypes.boolean(),
+    lineHeight: PropTypes.number({ label: '行高(px)', defaultValue: 1 })
   },
   componentsForPropsEditor: {
     'lbs-select-input-type': {
@@ -2,13 +2,14 @@
  * @Author: ly525
  * @Date: 2019-11-23 12:35:43
  * @LastEditors: ly525
- * @LastEditTime: 2019-11-23 19:50:57
- * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-form-radio-group.js
+ * @LastEditTime: 2020-05-17 23:17:23
+ * @FilePath: /h5/src/components/plugins/lbp-form-radio-group.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: 表单单选组组件 #!en: radio group component
  * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  */
+import PropTypes from '@luban-h5/plugin-common-props'
 import LbpFormRadio from './lbp-form-radio.js'
 function getDefaultItems () {
@@ -34,24 +35,14 @@ function getDefaultItems () {
 export default {
   name: 'lbp-form-radio-group',
   props: {
-    aliasName: {
-      type: String,
-      default: `标题演示`,
-      editor: {
-        type: 'a-input',
-        label: '填写标题',
-        require: true
-      }
-    },
-    items: {
-      type: Array,
-      default: () => getDefaultItems(),
-      editor: {
-        type: 'lbs-prop-text-enum-editor',
-        label: '选项列表',
-        require: true
-      }
-    },
+    aliasName: PropTypes.string({
+      defaultValue: `标题演示`,
+      label: '填写标题'
+    }),
+    items: PropTypes.textOptions({
+      label: '选项列表',
+      defaultValue: () => getDefaultItems()
+    }),
     type: {
       type: String,
       default: 'radio',
@@ -59,7 +50,7 @@ export default {
         type: 'a-radio-group',
         label: '选择模式',
         require: true,
-        prop: {
+        props: {
           options: [
             { label: '单选', value: 'radio' },
             { label: '多选', value: 'checkbox' }
+/*
+ * @Author: ly525
+ * @Date: 2020-05-17 19:54:20
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-05-17 19:55:02
+ * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-form-radio.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: Do not edit
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ */
 import './styles/radio.scss'
 // https://github.com/luban-h5-components/plugin-common-props
-import commonProps from '@luban-h5/plugin-common-props'
 import { genUUID } from '../../utils/element.js'
 export default {
   name: 'lbp-form-radio',
   props: {
-    ...commonProps,
     value: {
       type: [String, Number],
       default: '选项值'
@@ -2,34 +2,36 @@
  * @Author: ly525
  * @Date: 2020-05-14 08:09:44
  * @LastEditors: ly525
- * @LastEditTime: 2020-05-14 08:36:35
+ * @LastEditTime: 2020-05-17 21:18:32
  * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-notice-bar.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
  * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  */
-import commonProps from '@luban-h5/plugin-common-props'
+import PropTypes from '@luban-h5/plugin-common-props'
 import { NoticeBar } from 'vant'
 import 'vant/lib/notice-bar/style'
 export default {
   name: 'lbp-notice-bar',
   props: {
-    text: commonProps.text({
+    text: PropTypes.string({
       defaultValue: '请填写内容，如果过长，将会在手机上滚动显示',
-      label: '公告'
+      label: '公告',
+      props: {
+        type: 'textarea'
+      }
     }),
-    vertical: commonProps.vertical,
-    backgroundColor: commonProps.backgroundColor,
-    color: commonProps.color,
+    vertical: PropTypes.boolean(),
+    backgroundColor: PropTypes.color({ defaultValue: '#fffbe8' }), /** 淡黄色 */
     mode: {
       type: String,
       default: '',
       editor: {
         type: 'a-select',
         label: '模式',
-        prop: {
+        props: {
           options: [
             {
               label: '默认',
+import PropTypes from '@luban-h5/plugin-common-props'
+
 import placeholderImg from './lbp-picture-placeholder.png' // issue #34
 export default {
   name: 'lbp-picture',
@@ -5,17 +7,7 @@ export default {
     return <img src={this.imgSrc || placeholderImg} alt="" srcset="" width="100%" />
   },
   props: {
-    imgSrc: {
-      type: String,
-      default: placeholderImg,
-      editor: {
-        type: 'lbs-image-gallery',
-        label: '图片',
-        prop: {
-          type: 'textarea'
-        }
-      }
-    }
+    imgSrc: PropTypes.image()
   },
   data: () => ({
     placeholderImg
@@ -2,12 +2,13 @@
  * @Author: ly525
  * @Date: 2019-11-23 12:35:21
  * @LastEditors: ly525
- * @LastEditTime: 2019-11-23 19:53:14
+ * @LastEditTime: 2020-05-17 21:22:01
  * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-slide.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: #!zh: 轮播图组件 #!en slide component
  * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  */
+import PropTypes from '@luban-h5/plugin-common-props'
 import { Swipe, SwipeItem } from 'vant'
 import 'vant/lib/swipe/style'
@@ -29,19 +30,14 @@ function getDefaultItems () {
 export default {
   name: 'lbp-slide',
   props: {
-    interval: {
-      type: Number,
-      default: 4000,
-      editor: {
-        type: 'a-input-number',
-        label: '间隔时间',
-        require: true
-      }
-    },
-    editorMode: {
-      type: String,
-      default: 'preview'
-    },
+    interval: PropTypes.number({
+      defaultValue: 4000,
+      label: '间隔时间'
+    }),
+    editorMode: PropTypes.string({
+      defaultValue: 'preview',
+      label: '模式'
+    }),
     activeIndex: {
       type: Number,
       default: 0,
@@ -2,19 +2,19 @@
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
  * @LastEditors: ly525
- * @LastEditTime: 2020-04-25 11:14:38
+ * @LastEditTime: 2020-05-17 21:11:10
  * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-text.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: luban-h5 text component/plugin
  * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  */
+import PropTypes from '@luban-h5/plugin-common-props'
 import { quillEditor } from 'vue-quill-editor'
 // require styles
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import './styles/text-overwrite-quil-snow-theme.scss'
 // https://github.com/luban-h5-components/plugin-common-props
-import commonProps from '@luban-h5/plugin-common-props'
 export default {
   render (h) {
@@ -87,14 +87,11 @@ export default {
     }
   },
   props: {
-    backgroundColor: commonProps.backgroundColor,
-    borderWidth: commonProps.borderWidth,
-    borderRadius: commonProps.borderRadius,
-    borderColor: commonProps.borderColor,
-    text: {
-      type: String,
-      default: '双击修改文字'
-    }
+    backgroundColor: PropTypes.color({ label: '背景色' }),
+    borderWidth: PropTypes.number({ label: '边框宽度(px)' }),
+    borderRadius: PropTypes.number({ label: '圆角(px)' }),
+    borderColor: PropTypes.color({ label: '边框颜色' }),
+    text: PropTypes.string({ label: '双击修改文字' })
   },
   editorConfig: {
   }
 /*
  * @Author: ly525
  * @Date: 2019-12-01 18:11:50
- * @LastEditors  : ly525
- * @LastEditTime : 2020-01-15 00:53:48
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-05-17 21:12:55
  * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-video.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
  * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  */
+import PropTypes from '@luban-h5/plugin-common-props'
+
 import playIcon from './play.svg'
 import './styles/video.scss'
 // 这里有个动画演示，可以用来学习 CSS：《CSS制作播放、暂停按钮》https://codepen.io/chriscoyier/full/lotjh
@@ -21,38 +23,24 @@ export default {
       editor: {
         type: 'lbs-video-gallery',
         label: '视频',
-        prop: {
+        props: {
           type: 'textarea'
         }
       }
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    useIframe: {
-      type: Boolean,
-      default: false,
-      editor: {
-        type: 'a-switch',
-        label: '使用iframe'
-      }
-    },
-    iframeSrc: {
-      type: String,
+    disabled: PropTypes.boolean({ label: 'disabled' }),
+    useIframe: PropTypes.boolean({ label: '使用iframe' }),
+    iframeSrc: PropTypes.string({
       default: '',
-      editor: {
-        type: 'a-input',
-        label: 'iframe 地址',
-        prop: {
-          type: 'textarea',
-          placeholder: '只有使用iframe打开的时候，这个才有效'
-        },
-        extra: (h) => {
-          return '「使用iframe」打开的时候，这个才有效；上传视频请忽略该配置'
-        }
+      label: 'iframe 地址',
+      props: {
+        type: 'textarea',
+        placeholder: '只有使用iframe打开的时候，这个才有效'
+      },
+      extra: (h) => {
+        return '「使用iframe」打开的时候，这个才有效；上传视频请忽略该配置'
       }
-    }
+    })
   },
   watch: {
     src () {
@@ -792,10 +792,10 @@
   resolved "https://registry.yarnpkg.com/@luban-h5/plugin-common-props/-/plugin-common-props-0.0.1.tgz#10fe5d5b2dda1db64912b3b99779aec60b5ea956"
   integrity sha512-D8UEBht2BCJt8YDHqcYj0hQmn3WM3QdX3Rw8eaZP02o0NeNe2oDPKE4mCM3eN9U1ygcrDf9bR48RB9YgHJRHGA==
-"@luban-h5/plugin-common-props@^0.0.2":
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/@luban-h5/plugin-common-props/-/plugin-common-props-0.0.2.tgz#17ac100c241fa16b4de7c259837a0af0862693ef"
-  integrity sha512-6lsjSq6nPYD1EdbIBugf3dDFAr55ijzyOH4gd6oor/rQ8o8qDlh4UH2L4zaXCUJnMgi8osF8mXnfLx4oBd0JMQ==
+"@luban-h5/plugin-common-props@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@luban-h5/plugin-common-props/-/plugin-common-props-0.1.3.tgz#90cf658d4805f345a93b552cae92124d0e9362b6"
+  integrity sha512-Ubihet2AIK1lW4USp8NtyrO5o0Vza8OtPBK4nlzF4jgdmW6qNrp6+hZbH2m3LAdF395Q/h1ZTtZZ2kS8IC5/cg==
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"