web-component-gallery 1.3.12 → 2.0.2

package/lib/multiTab/MultiTab.jsx

@@ -1,237 +0,0 @@
-import AppEvent from './events'
-import { TAB_BINDING } from './APIEnums'
-import { Menu, Dropdown, Button, Icon, Tabs } from 'ant-design-vue'
-import './index.less'
-
-const eventKey = {
-  'closeThat': TAB_BINDING.TAB_CLOSE,
-  'closeRight': TAB_BINDING.TAB_CLOSE_RIGHT,
-  'closeLeft': TAB_BINDING.TAB_CLOSE_LEFT,
-  'closeAll': TAB_BINDING.TAB_CLOSE_ALL
-}
-
-const i18nRender = (context) => context
-
-const renderTabMenu = (h, path) => {
-  const props = {
-    on: {
-      click: ({ key, item, domEvent }) => {
-        console.log('key', path)
-        console.log(key, item, domEvent) 
-        AppEvent.$emit(eventKey[key], path)
-      }
-    }
-  }
-  return (
-    <Menu {...props}>
-      <Menu.Item key="closeThat">关闭当前标签</Menu.Item>
-      <Menu.Item key="closeRight">关闭右侧</Menu.Item> 
-      <Menu.Item key="closeLeft">关闭左侧</Menu.Item>
-      <Menu.Item key="closeAll">关闭全部</Menu.Item>
-    </Menu>
-  )
-}
-
-const renderTabDropDown = (h, title, keyPath, handles) => {
-  const handleReload = () => {
-    handles['reload'](keyPath)
-  }
-
-  const menus = renderTabMenu(h, keyPath)
-  return (
-    <Dropdown overlay={menus} trigger={['contextmenu']}>
-      <span>
-        <span class='ant-pro-multi-tab-title'>{ title }</span>
-        {/* <Icon title='reload page' class='ant-pro-multi-tab-icon' type={'reload'} onClick={handleReload} /> */}
-      </span>
-    </Dropdown>
-  )
-}
-
-const MultiTab = {
-  name: 'MultiTab',
-  props: {
-    contentWidth: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      activeKey: '',
-      pages: [],
-      fullPathList: []
-    }
-  },
-  render (h) {
-    const { $data: { pages }, contentWidth } = this
-    const handles = {
-      cls: (keyPath) => {
-        // console.log('close', keyPath) 
-        // this.closeThat(keyPath)
-        this.$tab.close(keyPath, false)
-      },
-      reload: (keyPath) => {
-        this.$tab.refresh(keyPath)
-      }
-    }
-    const tabPanels = pages.map(page => {
-      const title = page.meta.customTitle || page.meta.title
-      return (
-        <Tabs.TabPane
-          style={{ height: 0 }}
-          key={page.fullPath}
-          tab={renderTabDropDown(h, i18nRender(title), page.fullPath, handles)}
-          closable={pages.length > 1}
-        ></Tabs.TabPane>
-      )
-    })
-
-    const edit = (targetKey, action) => {
-      console.log('editTab:', targetKey, 'action:', action) 
-      this[action](targetKey)
-    }
-
-    const handleMenuClick = ({key}) => {
-      this[key](this.activeKey)
-    }
-
-    const controlMenu = (<Dropdown slot="tabBarExtraContent" style={{ marginRight: '8px' }}>
-      <Menu slot="overlay" onClick={handleMenuClick}>
-        {/* <Menu.Item key="closeAll">全部关闭</Menu.Item> */}
-        <Menu.Item key="closeThat">关闭当前</Menu.Item>
-        <Menu.Item key="closeAll">关闭其他</Menu.Item>
-      </Menu>
-      <Button icon={'align-left'} type={'link'}><Icon type="down" /></Button>
-    </Dropdown>)
-
-    return (
-      <div class={['ant-pro-multi-tab', contentWidth ? 'wide' : null]}>
-        <div class={'ant-pro-multi-tab-wrapper'}>
-          <Tabs
-            hideAdd
-            type={'editable-card'}
-            vModel={this.activeKey}
-            onEdit={edit}
-          >
-            {tabPanels}
-            {controlMenu}
-          </Tabs>
-        </div>
-      </div>
-    )
-  },
-  created () {
-    const { pages, fullPathList } = this
-    AppEvent.$on(TAB_BINDING.TAB_CLOSE, val => {
-      this.closeThat(val)
-      console.log('hook:tab:ck', val)
-    }).$on(TAB_BINDING.TAB_CLOSE_RIGHT, val => {
-      this.closeRight(val)
-      console.log('hook:tab:closeRight', val)
-    }).$on(TAB_BINDING.TAB_CLOSE_LEFT, val => {
-      this.closeLeft(val)
-      console.log('hook:tab:closeLeft', val)
-    }).$on(TAB_BINDING.TAB_CLOSE_ALL, val => {
-      this.closeAll(val)
-      console.log('hook:tab:closeAll', val)
-    }).$on('hook:tab:rename', val => {
-      // console.log('hook:tab:rename', val)
-    }) 
-
-    pages.push(this.$route)
-    fullPathList.push(this.$route.fullPath)
-
-    this.activeLastTab()
-
-    this.$watch('$route', newVal => {
-      const { fullPath, params } = newVal
-      if (this.activeKey !== fullPath) {
-        this.activeKey = fullPath
-      } 
-      if (this.fullPathList.indexOf(fullPath) < 0) {
-        this.fullPathList.push(fullPath)
-        /** 向外抛出打开方法 */
-        this.$tab.open(newVal)
-        if (params && params._tabName) {
-          const newPage = Object.assign({}, newVal, {
-            meta: {
-              customTitle: params._tabName
-            }
-          })
-          this.pages.push(newPage) 
-        } else {
-          this.pages.push(newVal)
-        }
-      }
-    })
-    this.$watch('activeKey', pathKey => {
-      this.$router.push({ path: pathKey })
-      /** 激活路由时记录信息 */
-      this.$tab.activeTab(this.$route)
-    })
-  },
-  mounted () {
-    /** 延迟执行，记录第一次路由 */
-    // let timer=setTimeout(()=>{
-    //   this.$tab.open(this.$route)
-    //   clearTimeout(timer)
-    // }, 60)
-  },
-  methods: {
-    activeLastTab () { 
-      this.activeKey = this.fullPathList[this.fullPathList.length - 1]
-    },
-    remove (targetKey) {
-      this.closeThat(targetKey)
-    },
-    closeThat (targetKey) {
-      if (this.fullPathList.length > 1) {
-        this.pages = this.pages.filter(page => page.fullPath !== targetKey)
-        this.fullPathList = this.fullPathList.filter(path => path !== targetKey) 
-        this.activeLastTab() 
-        /** 向外抛出关闭方法 */
-        let cache = true
-        try {
-          const majorPath = targetKey.split('?')[0]
-          cache = this.fullPathList.some( path =>
-              path.includes('?') &&
-              path.split('?')[0] === majorPath
-          )
-          this.$tab.close(majorPath, cache)
-        } catch{ this.$tab.close(targetKey, cache) }
-        console.log( cache, '是否缓存' )
-      }
-    },
-    closeLeft(e) {
-      const currentIndex = this.fullPathList.indexOf(e)
-      if (currentIndex > 0) {
-        this.fullPathList.forEach((item, index) => {
-          if (index < currentIndex) {
-            this.remove(item)
-          }
-        })
-      }
-    },
-    closeRight(e) {
-      const currentIndex = this.fullPathList.indexOf(e)
-      if (currentIndex < this.fullPathList.length - 1) {
-        this.fullPathList.forEach((item, index) => {
-          if (index > currentIndex) {
-            this.remove(item)
-          }
-        })
-      }
-    },
-    closeAll(e) {
-      const currentIndex = this.fullPathList.indexOf(e)
-      this.fullPathList.forEach((item, index) => {
-        if (index !== currentIndex) {
-          this.remove(item)
-        }
-      })
-    },
-  }
-}
-
-export default MultiTab

package/lib/multiTab/RouteAPI.js

@@ -1,71 +0,0 @@
-import { ROUTE_BINDING } from './APIEnums'
-import AppEvent from './events'
-
-const RouteAPI = {
-  /**
-   * Open a new tab(route)
-   * 打开一个新标签(路由)
-   *
-   * @param config: {
-   *   routeName,
-   *   title,
-   *   path
-   * }
-   */
-  open (config) {
-    AppEvent.$emit(ROUTE_BINDING.R_OPEN, config) 
-  }, 
-  /**
-   * Close a tab
-   * 关闭一个打开的标签
-   * 如果标签没打开或找不到标签则不做任何事情
-   *
-   * @param config
-   * @param cache: bool  true 则关闭后会缓存页面，false 反之
-   * { config, isCache: cache }
-   */
-  close (config, cache) {
-    AppEvent.$emit(ROUTE_BINDING.R_CLOSE, { config, isCache: cache })
-  },
-  /**
-   * Active a opened tab
-   * 激活一个已经打开的 tab
-   * @param config
-   */
-  activeTab (config) {
-    AppEvent.$emit(ROUTE_BINDING.R_ACTIVE, config)
-  },
-  /**
-   * Replace current page to new Route
-   * 替换当前 tab 页面为一个新的页面
-   * 注意：这个替换会更新路由地址，但是 tab 的位置不会发生变化
-   * 被替换的路由还会被缓存住，下次打开还是缓存时的状态
-   *
-   * @param {*} config
-   */
-  replace (config) {
-    AppEvent.$emit('hook:replace', config)
-  },
-  /**
-   * Refresh current tab (clear page cache)
-   */
-  refresh (keyPath) {
-    AppEvent.$emit(ROUTE_BINDING.R_REFRESH, keyPath)
-  },
-  closeAll () {
-    AppEvent.$emit('hook:closeAll')
-  },
-  closeOthers () {
-    AppEvent.$emit('hook:closeOthers')
-  },
-  /**
-   * Get all cached page
-   *
-   * @param callback
-   */
-  caches (callback) {
-    AppEvent.$emit(ROUTE_BINDING.R_GET_CACHES, callback)
-  }
-}
-
-export default RouteAPI

package/lib/multiTab/RouteContent.jsx

@@ -1,90 +0,0 @@
-/* eslint-disable */
-import { ROUTE_BINDING, TAB_BINDING } from './APIEnums'
-import AppEvent from './events'
-import RouteAPI from './RouteAPI'
-import MultiTab from './MultiTab.jsx'
-import RouteKeepAlive from './RouteKeepAlive' 
-
-const addAndGet = val => {
-  return val >= Number.MAX_SAFE_INTEGER ? 0 : ++val
-}
-
-const RouteContent = {
-  name: 'RouteContent',
-  data () {
-    return {
-      includes: [],
-      excludes: [],
-      /*
-       * Cache: { fullPath : String, snapshot : Number }
-       * cached: Map
-       */
-      cached: {}
-    }
-  },
-  render () {
-    const {
-      $route: { meta, fullPath },
-      includes,
-      excludes,
-      cached
-    } = this
-
-    const handleRef = (ref) => {
-      this.keepRef = ref
-    }
-    console.log('meta', this.$route);
-    if (meta.keepAlive) {
-      if (includes.findIndex(item => item === fullPath) === -1) {
-        includes.push(fullPath)
-        cached[fullPath] = {
-          fullPath,
-          snapshot: 0
-        }
-      }
-    }
-    const genKey = cached[fullPath].fullPath + cached[fullPath].snapshot
-    const props = {
-      on: {
-        ref: handleRef
-      }
-    }
-    return (
-      <route-keep-alive {...props} include={includes} exclude={excludes}>
-        <router-view key={genKey} />
-      </route-keep-alive>
-    ) 
-  },
-  created () {
-    AppEvent.$on(ROUTE_BINDING.R_OPEN, ({ routeName, title, ...rest }) => {
-      this.$router.push({ name: routeName, params: { '_tabName': title, ...rest } })
-    }).$on(ROUTE_BINDING.R_REFRESH, keyPath => {
-      const { $route: { fullPath } } = this
-      let key = keyPath || fullPath
-      const cache = this.cached[key]
-      this.keepRef.clearCache(key)
-      cache.snapshot = addAndGet(cache.snapshot)
-      // how with
-      this.$forceUpdate()
-    }).$on(ROUTE_BINDING.R_GET_CACHES, (callback) => {
-      callback(this.keepRef.allCache())
-    }).$on(ROUTE_BINDING.R_CLOSE, val => {
-      const { config: keyPath, isCache } = val
-      AppEvent.$emit(TAB_BINDING.TAB_CLOSE, keyPath)
-      // this.keepRef.clearCache(keyPath)
-    })
-  }
-}
-
-RouteContent.install = function (Vue) { 
-  if (Vue.prototype.$tab) {
-    return
-  }
-  Vue.prototype.$tab = RouteAPI
-  Vue.prototype.$tabBus = AppEvent
-  Vue.component(RouteContent.name, RouteContent)
-  Vue.component(RouteKeepAlive.name, RouteKeepAlive)
-  Vue.component(MultiTab.name, MultiTab)
-}
-
-export default RouteContent

package/lib/multiTab/RouteKeepAlive.js

@@ -1,183 +0,0 @@
-const _toString = Object.prototype.toString
-
-const isRegExp = (v) => {
-  return _toString.call(v) === '[object RegExp]'
-}
-
-const isDef = (v) => {
-  return v !== undefined && v !== null
-}
-
-const isAsyncPlaceholder = (node) => {
-  return node.isComment && node.asyncFactory
-}
-
-const remove = (arr, item) => {
-  if (arr.length) {
-    const index = arr.indexOf(item)
-    if (index > -1) {
-      return arr.splice(index, 1)
-    }
-  }
-}
-
-export const getFirstComponentChild = (children) => {
-  if (Array.isArray(children)) {
-    for (let i = 0; i < children.length; i++) {
-      const c = children[i]
-      if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {
-        return c
-      }
-    }
-  }
-}
-
-export const getComponentName = (opts) => {
-  return opts && (opts.Ctor.options.name || opts.tag)
-}
-
-export const getComponentKey = (opts) => {
-  return opts && (opts.Ctor.cid + (opts.tag ? `::${opts.tag}` : ''))
-}
-
-export const getCurrentRouteKey = ($route) => {
-  return $route.fullPath
-}
-
-const matches = (pattern, name) => {
-  if (Array.isArray(pattern)) {
-    return pattern.indexOf(name) > -1
-  } else if (typeof pattern === 'string') {
-    return pattern.split(',').indexOf(name) > -1
-  } else if (isRegExp(pattern)) {
-    return pattern.test(name)
-  }
-  /* istanbul ignore next */
-  return false
-}
-
-const pruneCache = (keepAliveInstance, cacheKey) => {
-  const { cache, keys, _vnode } = keepAliveInstance
-  for (const key in cache) {
-    const cachedNode = cache[key]
-    if (cachedNode) {
-      if (cacheKey === key) {
-        pruneCacheEntry(cache, key, keys, _vnode)
-      }
-    }
-  }
-}
-
-const pruneCacheEntry = (
-  cache,
-  key,
-  keys,
-  current
-) => {
-  const cached = cache[key]
-  if (cached && (!current || cached.tag !== current.tag)) {
-    cached.componentInstance.$destroy()
-  }
-  cache[key] = null
-  remove(keys, key)
-}
-
-/* const findCached = (cached, vnode) => {
-
-} */
-
-const RouteKeepAlive = {
-  name: 'RouteKeepAlive',
-  abstract: true,
-  props: {
-    include: {
-      type: [String, Array],
-      default: ''
-    },
-    exclude: {
-      type: [String, Array],
-      default: ''
-    },
-    max: {
-      type: [String, Number],
-      default: null
-    }
-  },
-
-  created () {
-    this.cache = Object.create(null)
-    this.keys = []
-  },
-
-  destroyed () {
-    for (const key in this.cache) {
-      pruneCacheEntry(this.cache, key, this.keys)
-    }
-  },
-
-  mounted () {
-    this.$watch('include', val => {
-      pruneCache(this, val)
-    })
-    this.$watch('exclude', val => {
-      pruneCache(this, val)
-    })
-  },
-
-  methods: {
-    allCache () {
-      return this.cache
-    },
-    clearCache (key) {
-      pruneCache(this, key)
-      this.$router.replace(this.$router.currentRoute)
-    }
-  },
-
-  render () {
-    this.$emit('ref', this)
-    const slot = this.$slots.default
-    const vnode = getFirstComponentChild(slot)
-    // const vnode = cloneVNode(defVNode, true)
-    const componentOptions = vnode && vnode.componentOptions
-
-    const key = getCurrentRouteKey(this.$route)
-    if (componentOptions) {
-      // check pattern
-      const { include, exclude } = this
-      if (
-        // not included
-        (include && (!key || !matches(include, key))) ||
-        // excluded
-        (exclude && key && matches(exclude, key))
-      ) {
-        return vnode
-      }
-
-      const { cache, keys } = this
-      if (cache[key]) {
-        vnode.componentInstance = cache[key].componentInstance
-        // make current key freshest
-        remove(keys, key)
-        keys.push(key)
-      } else {
-        // vnode = cloneVNode(vnode, true)
-
-        cache[key] = vnode
-        keys.push(key)
-        // prune oldest entry
-        if (this.max && keys.length > parseInt(this.max)) {
-          pruneCacheEntry(cache, keys[0], keys, this._vnode)
-        }
-      }
-      vnode.data.keepAlive = true
-    }
-    return vnode || (slot && slot[0])
-  }
-}
-
-RouteKeepAlive.install = function (Vue) {
-  Vue.component(RouteKeepAlive.name, RouteKeepAlive)
-}
-
-export default RouteKeepAlive

package/lib/multiTab/events.js

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

package/lib/multiTab/index.js

@@ -1,15 +0,0 @@
-import AppEvent from './events'
-import RouteAPI from './RouteAPI'
-import MultiTab from './MultiTab.jsx'
-import * as APIEnums from './APIEnums'
-import RouteKeepAlive from './RouteKeepAlive'
-import RouteContent from './RouteContent.jsx'
-
-export {
-  AppEvent,
-  RouteAPI,
-  MultiTab,
-  RouteKeepAlive,
-  APIEnums
-}
-export default RouteContent

package/lib/multiTab/index.less

@@ -1,73 +0,0 @@
-@import "~ant-design-vue/es/style/themes/default"; 
-
-@multi-tab-prefix-cls: ~"ant-pro-multi-tab";
-@multi-tab-wrapper-prefix-cls: ~"ant-pro-multi-tab-wrapper"; 
-
-.@{multi-tab-prefix-cls} {
-  .ant-tabs-bar {
-    margin: 0;
-    border-bottom: none;
-    padding-left: @padding-md + 4px;
-    box-sizing: border-box;
-    background: @layout-header-background;
-  } 
-
-  .ant-tabs-extra-content .ant-btn {
-    border: none;
-    background: transparent;
-  } 
-
-  .ant-tabs.ant-tabs-card .ant-tabs-card-bar {
-    .ant-tabs-tab {
-      height: 26px;
-      line-height: 26px;
-      color: @input-placeholder-color;
-      border-radius: @border-radius-sm; 
-      padding: 0 @padding-xs;
-      border: none; 
-      background: transparent;
-
-      .ant-tabs-close-x {
-        margin-left: 14px;
-        color: @input-placeholder-color;
-      }
-    } 
-    .ant-tabs-tab-active {
-      color: @primary-color;
-      background-color: @item-active-bg; 
-      
-      .ant-tabs-close-x {
-        color: @primary-color;
-      }
-    }
-    .ant-tabs-nav-container {
-      display: flex;
-      align-items: center; 
-    }
-  }
-
-  .ant-tabs-nav .ant-tabs-tab .anticon {
-    margin-right: 4px;
-    &:last-child {
-      margin-right: 0;
-    }
-  } 
-
-  .ant-pro-multi-tab-title {
-    user-select: none;
-    font-weight: 300;
-    font-size: @font-size-base;
-  }
-  
-  .ant-pro-multi-tab-icon {
-    height: @font-size-base;
-    overflow: hidden;
-    color: @text-color-secondary;
-    font-size: @font-size-sm;
-    vertical-align: middle;
-    transition: all 0.3s;
-    &:hover {
-      color: @heading-color;
-    }
-  }
-}

package/lib/style/index.less

@@ -1,2 +0,0 @@
-/* 混入样式 */
-@import './mixins.less';