web-component-gallery 1.3.12 → 2.0.2

package/lib/form/components/ARadio.vue

@@ -1,74 +0,0 @@
-
-<template>
-    <RadioGroup v-bind="attrs" v-on="$listeners" class="TAntdRadio" v-model="selectChecked">
-        <component 
-            :is="radioType" 
-            v-for="child in $attrs.options" 
-            :key="child[valueKey]" 
-            :value="child[valueKey]"
-        >
-            {{ child[labelKey] }} 
-        </component>  
-    </RadioGroup>
-</template> 
-
-<script>
-
-import { Radio } from 'ant-design-vue'
-
-export default {
-  name: 'TAntdRadio',
-  components: {
-    Radio,
-    RadioGroup: Radio.Group,
-    RadioButton: Radio.Button
-  },
-  props: {
-    value: [String, Number, Boolean],
-    // radio类型为普通或按钮
-    radioType: {
-        type: String,
-        default: 'Radio'
-    },
-    // 传入的option数组中，要作为最终选择项的键值key
-    valueKey: {
-      type: String,
-      default: 'value'
-    },
-    // 传入的option数组中，要作为显示项的键值名称
-    labelKey: {
-      type: String,
-      default: 'label'
-    }
-  },
-  computed: {
-    selectChecked: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    attrs() {
-      const attrs = {
-        ...this.$attrs
-      }
-      delete attrs.options
-      return attrs
-    } 
-  },
-  data() {
-    return {
-    }
-  },
-  mounted() {
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang="less" scoped>
-</style>
-

package/lib/form/components/ATagsInput.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="ant-input TAntdTags" v-on="$listeners">
-    <Tooltip 
-      :key="i"
-      :title="child[labelKey]"
-      v-for="(child, i) in selectChecked"
-    >
-      <Tag
-        closable
-        @close="() => tagsClose(child[valueKey])" 
-      >
-        <span>{{ child[labelKey] }}</span>
-      </Tag>
-    </Tooltip>
-    <span v-if="!selectChecked.length">请点击进行选择</span>
-  </div>
-</template>
-
-<script>
-
-import { Tag, Tooltip } from 'ant-design-vue'
-
-export default {
-  name: 'TAntdTags',
-  components: { Tag, Tooltip },
-  model: {
-    prop: 'value',
-    event: 'update:tagsInput'
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    selectChecked: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('update:tagsInput', val)
-      } 
-    }
-  },
-
-  props: {
-    value: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    /* 传入的option数组中，要作为最终选择项的键值key */
-    valueKey: {
-      type: String,
-      default: 'value'
-    },
-    /* 传入的option数组中，要作为显示项的键值名称 */
-    labelKey: {
-      type: String,
-      default: 'label'
-    }
-  },
-
-  methods: {
-    tagsClose(checked) {
-      const selectChecked = 
-        this.selectChecked.filter(node => node[this.valueKey] !== checked)
-      this.$emit('update:tagsInput', selectChecked)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import url('../../style/mixins.less');
-.TAntdTags {
-  width: 100%;
-  height: auto;
-  cursor: pointer;
-
-  :deep(.ant-tag) {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-
-    span {
-      display: inline-block;
-      max-width: 100px;
-      overflow-x: hidden;
-      .ellipsis();
-    }
-  }
-}
-</style>

package/lib/form/components/ATimePicker.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="ATimePicker">
-    <TimePicker
-      :format="format"
-      v-model="time[0]"
-      placeholder="开始时间"
-      :valueFormat="valueFormat"
-      @change="e => time.splice(0, 1, e)"
-    />
-    <span>~</span>
-    <TimePicker :format="format" v-model="time[1]" placeholder="结束时间" :valueFormat="valueFormat" />
-  </div> 
-</template>
-
-<script> 
-
-import { TimePicker } from 'ant-design-vue'
-
-export default {
-  components: {
-    TimePicker
-  },
-  model: {
-    prop: 'value',
-    event: 'update:timePicker'
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    format: {
-      type: String,
-      default: 'HH:mm:ss'
-    },
-    valueFormat: {
-      type: String,
-      default: 'HH:mm:ss'
-    }
-  },
-  watch: {
-    value(e, o) {
-      if (e.toString() == o.toString()) return
-      this.time = e
-    },
-    'time.length': {
-      handler(e) {
-        this.$emit('update:timePicker', e == 2 ? this.time : [])
-      },
-      deep: true
-    }
-  },
-  data() {
-    return {
-      time: []
-    }
-  },
-  created() {},
-  methods: {}
-}
-</script>
-<style lang="less" scoped>
-@import "~ant-design-vue/es/style/themes/default";
-.ATimePicker {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  &>span { margin: 0 @padding-xs; }
-  :deep(.ant-time-picker) { flex: 1; }
-}
-</style>

package/lib/form/index.js

@@ -1,55 +0,0 @@
-/* Model新增修改表单 */
-import Model from './Model.js'
-/* Search搜索表单 */
-import Search from './Search.vue'
-
-Model.install = function (Vue) { 
-  Vue.component(Model.name, Model)
-}
-
-Search.install = function (Vue) { 
-  Vue.component(Search.name, Search)
-} 
-
-export { 
-  Model,
-  Search,
-}  
-
-/* 下拉多选框（可支持树结构 */
-import ACascaderMultiple from './components/ACascaderMultiple.vue'
-/* 下拉单选及分页框 */
-import ASelectCustom from './components/ASelectCustom.vue'
-/* 单选框（可支持配置button形式 */
-import ARadio from './components/ARadio.vue'
-/* (已下需优化修改) */
-/* tag多项展示框（需修改 */
-import ATagsInput from './components/ATagsInput.vue'
-/* 日期选择框 */
-import ARangePicker from './components/ARangePicker.vue'
-/* 时间区间框（只单进行一天中的时间段选择 */
-import ATimePicker from './components/ATimePicker.vue'
-/* 文件上传选择器 */
-import AUpload from './components/AUpload.vue' 
- 
-const components = {
-    ACascaderMultiple,
-    ASelectCustom,
-    ARadio,
-    ATagsInput,
-    ARangePicker,
-    ATimePicker,
-    AUpload
-}   
-
-const install = function (Vue) { 
-  if (install.installed) return
-  Object.keys(components).forEach(component => { 
-    Vue.component(components[component].name, components[component])
-  })
-}
-
-export default {
-  install,
-  ...components
-}

package/lib/form/style/Search.less

@@ -1,34 +0,0 @@
-/* 混入样式 */
-@import url('../../style/mixins.less');
-
-.WebComponentFormSearch {
-    gap: 16px 0;
-    .flex-mixins(@justify: flex-start); 
-
-    .ant-form-item {
-      display: inline-flex;
-      margin-right: unset;
-  
-      :deep(.ant-form-item-label) {
-        min-width: 70px;
-        max-width: 100px;
-        text-align: right;
-      }
-  
-      :deep(.ant-form-item-control-wrapper) {
-        flex: 1;
-      }
-  
-      :deep(.ant-select),
-      :deep(.ant-input-number),
-      :deep(.ant-calendar-picker) {
-        width: 100% !important;
-      }
-    }
-  
-    &__Actions {
-      flex: 1;
-      text-align: right;
-      margin-right: 16px;
-    }
-}

package/lib/form/utils/render.js

@@ -1,85 +0,0 @@
-import { FormModel } from 'ant-design-vue'
-import RenderComp from '../components/RenderComp.vue'
-
-const FormModelItem = FormModel.Item
-
-/** 根据layoutSize来进行距离及大小切分 */
-export function getFormWidth(child, layoutSize) {
-  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)}%;`
-}
-
-/** 动态设置单个表单项规则 (同时解决处理动态增减表单项操作 */
-export function setFormItemRule(node, nodeParent = {}) {
-  const required = (node.required ?? nodeParent.required ?? this.formAttrs.required) ?? true
- 
-  /** node.placeholder与组件内的提示文字位置不对等 */
-  const message =
-    node.attrs?.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 i
-    }))
-
-  return rules
-}
-
-/** 动态渲染表单项 */
-export function setFormItem(h, vModel, child, childAttrs) {
-      
-  const {layout, layoutSize, $scopedSlots} = this
-
-  let formItemAttrs = 
-    childAttrs ??
-    {
-      key: child.model,
-      prop: child.model,
-      colon: !(layout == 'inline') 
-    }
-
-  const slotsName = 
-        (childAttrs?.parentModel ?? '') + child.model
-
-  const {label, customLabel} = child
-
-  return (
-    <FormModelItem
-      class={[
-        { FormLineVertical: child.size === layoutSize && layout === 'vertical' },
-        { FormLine: child.size === layoutSize }
-      ]}
-      {...{ attrs: formItemAttrs }}
-    >
-      <template slot="label">
-        {
-          customLabel ? 
-          customLabel(vModel) : 
-          <span>{label}</span>
-        }
-      </template>
-      {/* 当前表单项可slot进行单独开发配置 (目前仅支持非动态增减情况) */}
-      {$scopedSlots[child.model] ? (
-        $scopedSlots[child.model](child)
-      ) : (
-        <RenderComp
-          v-model={vModel[child.model]} 
-          component={child.is}
-          {...{ on: child.event, attrs: child.attrs }}
-        />
-      )} 
-      {/* 如若再某个model后需添加按钮等场景（例如地图的选址按钮 */}
-      {$scopedSlots[`${slotsName}Handle`] && $scopedSlots[`${slotsName}Handle`](formItemAttrs)}
-    </FormModelItem>
-  )
-}

package/lib/iframe/events.js

@@ -1,2 +0,0 @@
-import Vue from 'vue'
-export default new Vue()

package/lib/iframe/index.jsx

@@ -1,234 +0,0 @@
-import PropTypes from 'ant-design-vue/es/_util/vue-types'
-
-import Modal from '../modal/index.jsx'
-
-import { Spin, Icon } from 'ant-design-vue'
-
-// const IconFont = Icon.createFromIconfontCN({
-//   scriptUrl: '//at.alicdn.com/t/c/font_4641025_trbtf28ob8g.js'
-// })
-
-// Spin.setDefaultIndicator({
-//   indicator: {
-//     render() {
-//       return <IconFont type="icon-loading" />
-//     }
-//   }
-// })
-
-Spin.setDefaultIndicator({
-  indicator: {
-    render() {
-      return <Icon type="loading" />
-    }
-  }
-})
-
-import IframeEvent from './events.js'
-
-import './index.less'
-
-const IframeContainerProps = {
-  activeKey: PropTypes.string,
-  checkedKey: PropTypes.string.def('name'), 
-  linkurlKey: PropTypes.string.def('linkUrl'),
-  operatesArr: PropTypes.array,
-  componentsArr: PropTypes.array,
-  postMessage: PropTypes.object
-}
-
-const IframeContainer = {
-  name: 'IframeComp',
-  props: IframeContainerProps,
-  data () {
-    return {
-      /** 页面加载状态 */
-      compSpinning: true,
-      componentAdd: true,
-      /** 弹窗加载状态 */
-      modalSpinning: true,
-      modalComponents: {}
-    }
-  },
-  render(h, content) {
-    const { $props, modalComponents } = this
-
-    const { activeKey, checkedKey, componentsArr } = $props
-
-    const IframeComponents = componentsArr.map(componentItem => {
-      const isActive = activeKey === componentItem[checkedKey]
-      return this.getIframeComponent( componentItem, isActive )
-    })
-
-    const modalKeys = Object.keys(modalComponents)
-
-    const ModalOperates = modalKeys.map(modalKey => { 
-      return (
-        <Modal
-          {...{ 
-            props: { 
-              ...modalComponents[modalKey],
-              cancelHandle: () => this.closeModalHandle(modalKey)
-            }
-          }}>
-            <Spin spinning={this.modalSpinning} tip="加载中...">
-              { this.getIframeComponent(modalComponents[modalKey], true) }
-            </Spin>
-        </Modal>
-      )
-    })
-
-    return (
-      <div class="ant-pro-grid-content-page">
-        <Spin spinning={this.compSpinning} tip="加载中...">
-          {IframeComponents}
-        </Spin>
-        {ModalOperates}
-      </div>
-    )
-
-  },
-  watch: {
-    activeKey(newVal) {
-      this.modalComponents = {}
-    },
-    componentsArr: {
-      handler(newVal, oldVal) {
-        this.componentAdd = newVal.length > oldVal.length
-        this.postCompMessage()
-      },
-      deep: true
-    }
-  },
-  computed: {
-    activeKeyAndParams() {
-      const {activeKey, postMessage, componentsArr} = this
-      return {
-        activeKey,
-        postMessage,
-        componentsArr
-      }
-    }
-  },
-  created() {
-    IframeEvent.$on('modalOpen', ({ name, params }) => {
-      const activeModal = this.switchModalHandle(name, params)
-      activeModal && (
-        this.componentAdd = true,
-        this.$set(
-          this.modalComponents, name, {
-          mode: params.mode,
-          visible: true,
-          ...activeModal
-        }) 
-      )
-    }) 
-    IframeEvent.$on('modalClose', ({ name, params }) => {
-      this.closeModalHandle(name)
-      params && (
-        this.componentAdd = false,
-        this.postCompMessage(params)
-      )
-    })
-    IframeEvent.$on('modalGoBack', ({ name, params }, closeModal) => {
-      this.componentAdd = false
-      this.closeModalHandle(closeModal)
-      this.switchModalHandle(name, params)
-    }) 
-  },
-  mounted() {
-    // this.postCompMessage()
-  },
-  methods: {
-    postCompMessage(data = {}) {
-      const { componentsArr, activeKey, postMessage } = this
-      componentsArr.length && 
-      this.postIframeMessage(componentsArr, {
-        type: 'refreshPage',
-        activeKey,
-        data
-      })
-    },
-    closeModalHandle(name) {
-      this.modalComponents[name].visible = false
-      delete this.modalComponents[name]
-    },
-    switchModalHandle(name, data) {
-      const { operatesArr, checkedKey } = this
-      const activeModal = operatesArr.find( operatesItem => operatesItem[checkedKey] === name )
-      activeModal && this.postIframeMessage(operatesArr, {
-        type: 'refreshModal',
-        activeKey: name,
-        data
-      })
-      return {...activeModal, ...(data.attrs ?? {})}
-    },
-    postIframeMessage(components, iframeConfig) {
-      const { type, activeKey, data = {} } = iframeConfig
-
-      this.$nextTick(() => {
-
-        const { checkedKey, linkurlKey, postMessage } = this
-        const activeComp = components.find(componentsItem => activeKey === componentsItem[checkedKey])
-        const refKey = activeComp[linkurlKey]
-        const isModal = refKey.includes('?type=modal')
-        const spinningKey = isModal ? 'modalSpinning' : 'compSpinning'
-
-        const iframeRef = () => {
-          const _self = this
-          const iframe = this.$refs[refKey]
-          const iframeWin = this.$refs[refKey]?.contentWindow
-          const iframeOptions = {
-            type, 
-            params: {
-              data,
-              name: activeKey,
-              title: isModal ? activeComp.title : activeComp.meta?.title,
-              routeQuery: postMessage
-            }
-          }
-
-          this.componentAdd ? (
-          this[spinningKey] = true,
-          iframe.onload = function() {
-            _self[spinningKey] = false
-            iframeWin.postMessage(iframeOptions, '*')
-          } ) :
-          iframeWin.postMessage(iframeOptions, '*')
-        }
-
-        if(isModal) {
-          const timer = setTimeout( () => {
-            iframeRef()
-            clearTimeout(timer)
-          }, 0 )
-          return
-        }
-        iframeRef()
-      }) 
-    },
-    getIframeComponent(componentItem, isActive) {
-      const { linkurlKey, checkedKey } = this
-      return (
-        <iframe
-          width="100%"
-          height="100%"
-          ref={componentItem[linkurlKey]}
-          src={componentItem[linkurlKey]}
-          key={componentItem[checkedKey]}
-          style={{
-            border: 'none',
-            display: isActive ? 'block' : 'none'
-          }}
-        />
-      )
-    }
-  }
-}
-
-IframeContainer.install = function (Vue) {
-  Vue.prototype.$IframeBus = IframeEvent
-  Vue.component('IframePage', IframeContainer)
-}
-
-export default IframeContainer

package/lib/iframe/index.less

@@ -1,19 +0,0 @@
-@import '~ant-design-vue/lib/style/themes/default.less';
-
-.ant-pro-grid-content-page,
-.ant-spin-nested-loading,
-.ant-spin-container {
-    width: 100%;
-    height: 100%;
-}
-
-.ant-spin-nested-loading > div > .ant-spin {
-    .ant-spin-dot {
-        font-size: 48px;
-    }
-    .ant-spin-text.ant-spin-text {
-        top: 60%;
-        padding-left: 36px;
-        font-size: @font-size-lg;
-    }
-}

package/lib/multiTab/APIEnums.js

@@ -1,17 +0,0 @@
-export const TAB_BINDING = {
-  TAB_CLOSE: 'hook:tab:ck',
-  TAB_CLOSE_ALL: 'hook:tab:ca',
-  TAB_CLOSE_LEFT: 'hook:tab:cl',
-  TAB_CLOSE_RIGHT: 'hook:tab:cr',
-  TAB_CLOSE_OTHER: 'hook:tab:co',
-  TAB_NAME: 'hook:tab:rename',
-  TAB_ACTIVE: 'hook:tab:active'
-}
-
-export const ROUTE_BINDING = {
-  R_OPEN: 'hook:open',
-  R_CLOSE: 'hook:close',
-  R_ACTIVE: 'hook:active',
-  R_REFRESH: 'hook:refresh',
-  R_GET_CACHES: 'hook:caches'
-}