web-component-gallery 1.3.12 → 2.0.2

package/lib/amap/components/AmapSearch/index.less

@@ -1,16 +0,0 @@
-.AmapDraw__Search {
-    display: flex;
-    align-items: center;
-    width: calc(100% - 16px); 
-
-    .ASelectCustom {
-        width: 346px;
-    } 
-
-    &__Button {
-        flex: 1;
-        gap: 0 8px;
-        display: flex;
-        justify-content: flex-end;
-    }
-} 

package/lib/amap/index.js

@@ -1,13 +0,0 @@
-/* 地图打点 */
-import AmapDraw from './AmapDraw.jsx'
-
-/* 地图搜索 */
-import AmapSearch from './components/AmapSearch/index.jsx'
-
-export {
-    AmapDraw
-}
-
-export default {
-    AmapSearch
-}

package/lib/avatar/index.js

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

package/lib/avatar/index.vue

@@ -1,47 +0,0 @@
-<template>
-  <Dropdown placement="bottomRight">
-    <span class="ant-pro-account-avatar" style="margin-right: 12px; margin-bottom: 6px;">
-      <slot name="avatar" />
-    </span> 
-    <Menu class="ant-pro-drop-down menu" slot="overlay" >
-      <MenuItem key="logout" @click="handleLogout">
-      <Icon type="logout" />
-        退出登录
-      </MenuItem>
-    </Menu> 
-  </Dropdown>
-</template>
-
-<script>
-import { Modal, Dropdown, Menu, Icon } from 'ant-design-vue'
-
-export default {
-  name: 'Avatar',
-  components: { 
-    Dropdown,
-    Menu,
-    MenuItem: Menu.Item,
-    Icon
-  },
-  props: {
-    logoutMessage: {
-      type: String,
-      default: '确定要退出登录吗？'
-    }
-  },
-  methods: {
-    handleLogout (e) {
-      Modal.confirm({
-        content: this.logoutMessage,
-        onOk: () => {
-          return this.$emit('handleLogout')
-        },
-        onCancel () {}
-      }) 
-    } 
-  }
-}
-</script>
-
-<style lang="less" scoped>
-</style>

package/lib/basic/404.vue

@@ -1,24 +0,0 @@
-<template>
-  <Result status="404" title="404" sub-title="对不起，您访问的页面不存在">
-    <template #extra>
-      <Button type="primary" @click="toHomePage">返回首页</Button>
-    </template>
-  </Result>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { Result, Button } from 'ant-design-vue'
-export default {
-  name: 'Exception404',
-  components: { Result, Button },
-  computed: {
-    ...mapGetters(['toHome']) 
-  },
-  methods: {
-    toHomePage() {
-      this.$router.replace(this.toHome ?? '/')
-    }
-  }
-}
-</script>

package/lib/dateTime/index.vue

@@ -1,43 +0,0 @@
- <template>
-    <div class="dateTime">
-      <span class="dateTime__Date">{{ time | formatDate('{y}.{m}.{d}') }}</span>
-      <span class="dateTime__Week">星期{{ time | formatDate('{a}') }}</span>
-      <span class="dateTime__Time">{{ time | formatDate('{h}:{i}:{s}') }}</span>
-    </div> 
-</template>
-
-<script>
-
-import {formatDate} from '../../utils/Filter'
-
-export default {
-  name: 'dateTime',
-  data() { 
-    return {
-        time: new Date(),
-        timer: null
-    }
-  },
-  filters: {
-    formatDate
-  },
-  mounted() {
-    this.timer = setInterval( 
-        () => this.time = new Date(), 1000 )
-  },
-  destroyed() {
-    clearInterval(this.timer)
-    this.timer = null
-  },
-  methods: {
-  }
-}
-</script>
-
-<style scoped lang="less">
-.dateTime {
-    display: flex;
-    gap: 0 14px;
-    font-size: 16px;
-}
-</style>

package/lib/form/Model.js

@@ -1,153 +0,0 @@
-import { FormModel } from 'ant-design-vue'
-import { getFormWidth, setFormItemRule, setFormItem } from './utils/render'
-
-import './style/Model.less'
-
-export default {
-  name: 'Model',
-  model: {
-    prop: 'value',
-    event: 'Change:Model'
-  },
-  data() {
-    return {
-      formRules: {}
-    }
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => ({})
-    },
-    /* Form布局方式 */
-    layout: { 
-      type: String,
-      default: 'vertical'
-    },
-    /* 一行显示几个 PS:最多5个 */
-    layoutSize: {
-      type: Number,
-      default: 4,
-      validator: value => {
-        return value <= 5
-      }
-    },
-    /* 表单项配置 */
-    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:Model', value) 
-      }
-    },
-    formAttrs() {
-      let attr = {
-        labelCol: { span: 4 },
-        wrapperCol: { span: 20 },
-        ...this.$attrs
-      }
-      this.layout === 'vertical' && (
-        delete attr.labelCol,
-        delete attr.wrapperCol
-      )
-      return attr
-    },
-    filterSetting() {
-      return this.formSetting.filter(settingItem => !settingItem.hidden)
-    }
-  },
-  watch: {
-    filterSetting: {
-      handler(newVal, oldVal) {
-        newVal.forEach(node => 
-          this.$set(this.formRules, node.model, setFormItemRule.call(this, node))
-        )
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    this.$emit('update:refForm', this.$refs.FormModel)
-  },
-  methods: {
-    /** 包含单表单项，多表单项，动态增减表单项合并处理 */
-    setModelRender(props) {
-      const dynamicModel = this.form[props.model]
-      return (
-        /** 
-         * multiple为动态多项
-         * multipleConfig为配置的动态项数据 */
-        <div class={props.multiple && ['MultipleForm']} {...{ attrs: { style: getFormWidth.call(this, props, this.layoutSize) } }}>
-          {/* 使用场景：添加分层提示信息及其他隔层操作 */}
-          {this.$scopedSlots[`${props.model}Tips`] && this.$scopedSlots[`${props.model}Tips`](props)}
-          {
-            /** 处理动态增减表单 */
-            dynamicModel instanceof Array && props.multiple ? 
-            dynamicModel.map( (modelItem, index) => 
-              props.multipleConfig.map( (configItem, key) => {
-                /** 为动态项时重新定义绑定key、prop等来进行检验 */
-                /** 目前还有一个动态项layoutSize排版问题 */
-                const childAttrs = {
-                  key: index,
-                  prop: `${props.model}.${index}.${configItem.model}`,
-                  style: getFormWidth.call(this, configItem, this.layoutSize ?? props.layoutSize),
-                  rules: setFormItemRule.call(this, configItem, props),
-                  parentModel: props.model
-                }
-                return setFormItem.call(this, h, modelItem, configItem, childAttrs)
-              } )
-            ) : 
-            setFormItem.call(this, h, this.form, props)
-          }
-          {/* 使用场景：如另起一行添加其他额外信息及操作 */}
-          {this.$scopedSlots[`${props.model}Operate`] && this.$scopedSlots[`${props.model}Operate`](props)}
-        </div>
-      )
-    },
-    /** 提交测验 */
-    formSubmit() {
-      return new Promise((resolve, reject) => {
-        this.$refs.FormModel.validate()
-                  .then(resolve)
-                  .catch(err => 
-                    this.$nextTick(() => {
-                      const errorDiv = document.getElementsByClassName('has-error')
-                      errorDiv[0].scrollIntoView({ 
-                        behavior: "smooth",
-                        block: "center"
-                      })
-                    })
-                  )
-      })
-    }
-  },
-  render() {
-    const {layout, formAttrs, setModelRender} = this
-
-    return (
-      <FormModel
-        ref="FormModel"
-        class="FormModel" 
-        props={{
-          model: this.form,
-          rules: this.formRules,
-          layout,
-          ...formAttrs
-        }}
-      >
-        {
-          this.$slots.default ??
-          this.filterSetting.map(props => setModelRender(props))
-        } 
-      </FormModel>
-    )
-  }
-}

package/lib/form/Search.vue

@@ -1,159 +0,0 @@
-<template>
-  <FormModel :model="form" ref="searchForm" layout="inline" @submit="handleSearch" class="WebComponentFormSearch">
-
-    <template v-for="(node, i) in copyFormSetting.slice(0, count)" v-if="!node.hidden">
-      <FormModelItem
-        :key="i"
-        :prop="node.model"
-        :label="node.label"
-        :style="getFormWidth(node, matchMediaSize)"
-      >
-        <RenderComp
-          v-on="node.event"
-          v-bind="node.attrs"
-          v-model="form[node.model]"
-          :component="node.is || 'Input'"
-        />
-      </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 resetFields from './utils/resetFields'
-import RenderComp from './components/RenderComp.vue'
-import { Icon, Button, FormModel } from 'ant-design-vue'
-
-export default {
-  name: 'Search',
-  components: {
-    Icon,
-    Button,
-    FormModel, 
-    FormModelItem: FormModel.Item,
-    RenderComp
-  },
-  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 <= 5
-      }
-    },
-    // 紧凑型和宽松型
-    // default 宽松型
-    // middle 紧凑型
-    searchStyle: {
-      type: String,
-      default: 'default'
-    },
-    /* 操作显示文字 */
-    actionsText: {
-      type: Object,
-      default: () => ({
-        primary: '搜索',
-        cancel: '重置'
-      })
-    },
-    /* 是否自动查询(默认为true) */
-    autoCall: {
-      type: Boolean,
-      default: true
-    }
-  },
-  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
-    }
-  },
-  mounted() { 
-    this.autoCall && 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.form = resetFields(this.form)
-      this.$refs.searchForm.clearValidate()
-      this.$emit('handleReset')
-    } 
-  }
-}
-</script>
-<style lang="less" scoped>
-@import url('./style/Search.less');
-</style>