web-component-gallery 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "vue-library-ui组件库",
   "main": "dist/index.umd.js",
   "files": [

package/plugins/{lib/Button/index.js → Button/Button.js}

@@ -7,7 +7,7 @@ import { Button, Upload, Popconfirm } from 'ant-design-vue'
 let UploadUrl = `${global.WEBSWG}${global.BASEURL}`
 
 export default {
-  name: "Button",
+  name: "Button", 
   data() {
     return {
         PopconfirmProps: {

package/plugins/Button/index.js

@@ -0,0 +1,7 @@
+import Button from './Button'
+ 
+Button.install = function (Vue) { 
+  Vue.component(Button.name, Button)
+}
+
+export default Button

package/plugins/Form/Model.js

@@ -0,0 +1,185 @@
+import { h } from 'vue'
+import { FormModel } from 'ant-design-vue'
+
+import RenderComp from './RenderComp.vue'
+
+const FormModelItem = FormModel.Item
+
+export default {
+  name: 'Model',
+  data() {
+    return {
+      formRules: {},
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 }
+    }
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    /* Form布局方式 */
+    layout: {
+      type: String,
+      default: 'vertical'
+    },
+    /* 一行显示几个 PS:最多4个 */
+    layoutSize: {
+      type: Number,
+      default: 4,
+      validator: value => {
+        return value <= 4
+      }
+    },
+    /* 表单项配置 */
+    formSetting: Array
+  },
+  computed: {
+    form: {
+      get() {
+        for (const k in this.value) {
+          Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel.validateField(k)
+        }
+        return this.value
+      },
+      set(value) {
+        this.$emit('change', value)
+      }
+    },
+    formAttrs() {
+      let attr = {}
+      this.layout === 'vertical'
+        ? (attr = {
+            ...this.$attrs
+          })
+        : (attr = {
+            labelCol: this.labelCol,
+            wrapperCol: this.wrapperCol,
+            ...this.$attrs
+          })
+      return attr
+    }
+  },
+  watch: {
+    formSetting() {
+      this.setFormRules()
+    }
+  },
+  mounted() {
+    this.setFormRules()
+    this.$emit('update:refForm', this.$refs.FormModel)
+  },
+  methods: {
+    getFormWidth(child, layoutSize) {
+      if (!layoutSize) return `margin-right:24px;`
+      if (this.layout === 'vertical')
+        return `flex: 0 1 calc((${(100 / layoutSize) * (child.size ?? 1)}% - 24px));margin-right:24px;`
+      return `flex: 0 1 ${(100 / layoutSize) * (child.size ?? 1)}%;`
+    },
+    setFormModelItem(child) {
+      const { getFormWidth, layout, layoutSize } = this
+      return (
+        <FormModelItem
+          prop={child.model}
+          label={child.label}
+          colon={!(layout == 'inline')}
+          style={getFormWidth(child, layoutSize)}
+          class={[
+            { FormLineVertical: child.size === layoutSize && layout === 'vertical' },
+            { FormLine: child.size === layoutSize }
+          ]}
+        >
+          {this.$scopedSlots[child.model] ? (
+            this.$scopedSlots[child.model](child)
+          ) : (
+            <RenderComp
+              v-model={this.form[child.model]}
+              component={child.is}
+              {...{ on: child.event, attrs: child.attrs }}
+            />
+          )}
+
+          {this.$scopedSlots[`${child.model}Handle`] && this.$scopedSlots[`${child.model}Handle`](child)}
+
+          {/* { h(
+              defaultComponents[child.is] ?? Input,
+              { 
+                attrs: {
+                  // placeholder: getPlaceholder(child),
+                  ...child.attrs
+                }, 
+                props: {
+                  value: this.form[child.model],
+                  ...child.attrs
+                },
+                on: {
+                  ...child.event, 
+                  'input': (node) => {
+                    this.$set( this.form, child.model, node.target?.value ?? node )
+                  } 
+                }
+              }
+            ) }   */}
+        </FormModelItem>
+      )
+    },
+    setFormRules() {
+      const rules = {}
+      this.formSetting.forEach(node => {
+        node.filed
+          ? node.filed.forEach(child => this.$set(rules, child.model, this.setAttrs({ ...node, ...child })))
+          : this.$set(rules, node.model, this.setAttrs(node))
+      })
+      this.formRules = rules
+    },
+    setAttrs(node) {
+      const required = node.hasOwnProperty('required')
+        ? node.required
+        : node.hasOwnProperty('hidden')
+        ? !node.hidden
+        : true
+      const message =
+        node.placeholder ||
+        (/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入') +
+          (node.label || '')
+
+      const rules = [
+        {
+          required,
+          message,
+          trigger: ['change', 'blur']
+        }
+      ].concat((node.rules || []).filter(i => i.pattern && (i.pattern = new RegExp(i.pattern))))
+
+      return rules
+    },
+    formSubmit() {
+      return this.$refs.FormModel.validate()
+    }
+  },
+  render() {
+    const { setFormModelItem, layout, formSetting, formRules, formAttrs, form } = this
+
+    return (
+      <FormModel
+        ref="FormModel"
+        props={{
+          model: form,
+          rules: formRules,
+          layout,
+          ...formAttrs
+        }}
+      >
+        {formSetting.map((props, i) => {
+          return (
+            <div>
+              {!props.hidden && setFormModelItem(props)}
+              {this.$scopedSlots[`operate${i}`] && this.$scopedSlots[`operate${i}`](props)}
+            </div>
+          )
+        })}
+      </FormModel>
+    )
+  }
+}

package/plugins/Form/RenderComp.vue

@@ -0,0 +1,52 @@
+<template>
+  <component :is="component" v-model="nodeValue" v-bind="$attrs" v-on="$listeners" :placeholder='getPlaceholder()' />
+</template>
+<script>
+
+import { Input,InputNumber,Checkbox,DatePicker,TimePicker } from 'ant-design-vue' 
+
+export default {
+  name: 'RenderComp',
+  model: {
+    prop: "value",
+    event: "Update:FormModel"
+  },
+  components: {
+    Input,
+    InputNumber,
+    Checkbox,
+    DatePicker,
+    TimePicker, 
+    ARadio: () => import('./components/ARadio.vue'),
+    AUpload: () => import( './components/AUpload.vue' ), 
+    ATagsInput: () => import('./components/ATagsInput.vue'),
+    ASelectCustom: () => import('./components/ASelectCustom.vue')
+  },
+  props: {
+    value: [Number, String, Object, Array, Boolean],
+    component: {
+        type: String,
+        default: 'Input'
+    }
+  },
+  computed: {
+    nodeValue: {
+      get () {
+        return this.value
+      },  
+      set ( value ) {
+        this.$emit('Update:FormModel',  value)  
+      }
+    } 
+  },
+  mounted() {
+  },
+  methods: {
+    getPlaceholder() {
+      const RegExp = this.component.toLowerCase()
+      if( /range/.test( RegExp ) ) return [ '开始时间', '结束时间' ]
+      return this.$attrs.placeholder ?? /(select|picker|radio|upload)/.test( RegExp ) ? "请选择" : "请输入"
+    }
+  }
+}
+</script>

package/plugins/Form/Search.vue

@@ -0,0 +1,169 @@
+<template>
+  <FormModel :model="form" ref="searchForm" layout="inline" @submit="handleSearch" class="WebComponentFormSearch">
+
+    <template v-for="(node, i) in copyFormSetting.slice(0, count)">
+      <FormModelItem
+        :key="i"
+        :prop="node.model"
+        :label="node.label"
+        :style="getFormWidth(node, matchMediaSize)"
+        v-if="!node.hidden"
+      >
+        <component
+          :is="node.is || 'Input'"
+          :placeholder="node.is | defaultPlaceholder"
+          :getPopupContainer="
+            triggerNode => {
+              return triggerNode.parentNode || document.body
+            }
+          "
+          v-on="node.event"
+          v-bind="node.attrs"
+          v-model="form[node.model]"
+        />
+      </FormModelItem> 
+    </template> 
+
+    <div class="WebComponentFormSearch__Actions">
+      <Button type="primary" html-type="submit">{{ actionsText.primary }}</Button>
+      <Button :style="{ marginLeft: '8px' }" @click="handleReset">{{ actionsText.cancel }}</Button>
+      <a @click="advanced = !advanced" style="margin-left: 8px" v-if="copyFormSetting.length > this.matchMediaSize - 1">
+        {{ advanced ? '收起' : '展开' }}
+        <Icon :type="advanced ? 'up' : 'down'" />
+      </a>
+    </div>
+  </FormModel>
+</template>
+<script>
+
+import { FormModel, Button, Radio, Input, InputNumber, Checkbox, DatePicker, TimePicker, Icon } from 'ant-design-vue'
+
+export default {
+  components: {
+    FormModel,
+    FormModelItem: FormModel.Item,
+    Button,
+    Radio,
+    Input,
+    InputNumber,
+    Checkbox,
+    DatePicker,
+    TimePicker,
+    ASelectCustom: () => import('./components/ASelectCustom.vue'),
+    Icon
+  },
+  data() {
+    return {
+      // 是否收起
+      advanced: false,
+      matchMediaSize: 0
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    /* 双向数据绑定Form */
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    /* 配置表单项 */
+    formSetting: {
+      type: Array,
+      default: () => []
+    },
+    /* 一行显示多少项 */
+    layoutSize: {
+      type: Number,
+      default: 4,
+      validator: value => {
+        return value <= 4
+      }
+    },
+    // 紧凑型和宽松型
+    // default 宽松型
+    // middle 紧凑型
+    searchStyle: {
+      type: String,
+      default: 'default'
+    },
+    /* 操作显示文字 */
+    actionsText: {
+      type: Object,
+      default: () => ({
+        primary: '搜索',
+        cancel: '重置'
+      })
+    }
+  },
+  computed: {
+    form: {
+      get() {
+        return this.value
+      },
+      set(newValue) {
+        this.$emit('change', newValue)
+      }
+    },
+    matchMedia() {
+      return {
+        '(max-width: 576px)': 1,
+        '(min-width: 576px) and (max-width: 992px)': this.layoutSize - 2,
+        '(min-width: 992px)': this.layoutSize
+      }
+    },
+    copyFormSetting() {
+      return this.formSetting.filter(node => !node.hidden)
+    },
+    count() {
+      return this.advanced ? this.copyFormSetting.length : this.matchMediaSize - 1
+    }
+  },
+  filters: {
+    defaultPlaceholder(is) {
+      if (is && is.includes('range')) return ['开始时间', '结束时间']
+      return /(select|picker|radio|upload)/.test(is) ? '请选择' : '请输入'
+    }
+  },
+  mounted() {
+    this.handleSearch()
+    this.matchMediaSize = this.layoutSize
+    Object.keys(this.matchMedia).forEach(media =>
+      window.matchMedia(media).addEventListener('change', this.handleResize)
+    )
+  },
+  methods: {
+    handleResize(x) {
+      x.matches && (this.matchMediaSize = this.matchMedia[x.media])
+    },
+    getFormWidth(e) {
+      const gap = {
+        middle: '16px',
+        default: '24px'
+      }
+      return `flex: 0 1 calc((${(100 / this.matchMediaSize) * (e.size ?? 1)}% - ${
+        gap[this.searchStyle]
+      })); margin-right: ${gap[this.searchStyle]};`
+    },
+    handleSearch(e) {
+      e && e.preventDefault()
+      const searchForm = {}
+      // 排除掉form当中hidden的隐藏项
+      this.copyFormSetting.forEach(node => 
+        this.$set( searchForm, node.model, this.form[node.model] ))
+      this.form = { ...searchForm }
+      this.$emit('handleSearch', searchForm) 
+    },
+    handleReset() {
+      // 初步猜测是因这里的清空导致数据双向绑定得不到最新
+      this.$refs.searchForm.resetFields()
+      this.$emit('handleReset')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import url('../../less/Search.less');
+</style>