dpzvc3-ui 3.0.7 → 3.1.0

package/src/components/loadMore/loadmore.vue

@@ -1,258 +0,0 @@
-<template>
-  <div
-    ref="containerRef"
-    :class="containerClasses"
-    :style="{ height: height }"
-    @scroll="onScroll"
-  >
-    <!-- 上拉刷新 -->
-    <div
-      v-if="refresh"
-      :class="topClasses"
-      :style="{ height: translateY + 'px' }"
-    >
-      <div :class="statusClass">
-        <slot name="top">
-          <span class="spinner">
-            <Spinner
-              v-if="upStatus === 'loading'"
-              size="15"
-              type="snake"
-            />
-          </span>
-          <span class="dpzvc3-loadmore-text">{{ upText }}</span>
-        </slot>
-      </div>
-    </div>
-
-    <!-- 内容 -->
-    <div :class="contentClasses">
-      <slot />
-    </div>
-
-    <!-- 下拉加载更多 -->
-    <div
-      v-if="loadMore"
-      :class="bottomClasses"
-    >
-      <div :class="statusClass">
-        <slot name="bottom">
-          <span class="spinner">
-            <Spinner
-              v-if="downStatus === 'loading'"
-              size="15"
-              type="snake"
-            />
-          </span>
-          <span class="dpzvc3-loadmore-text">{{ downText }}</span>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
-import Spinner from '../spinner'
-
-const prefixCls = 'dpzvc3-loadmore'
-
-export default defineComponent({
-  name: 'Dpzvc3Loadmore',
-  components: { Spinner },
-  props: {
-    height: { type: [Number, String], default: '100%' },
-    refresh: Function,
-    upLoadingText: { type: String, default: '加载中...' },
-    upDistance: { type: Number, default: 70 },
-    upPullText: { type: String, default: '↓ 下拉刷新' },
-    upDropText: { type: String, default: '↑ 释放更新' },
-    maxDistance: { type: Number, default: 0 },
-    speed: { type: Number, default: 3 },
-    downEndText: { type: String, default: '没有更多了' },
-    downDropText: { type: String, default: '↑ 上拉加载数据' },
-    downLoadingText: { type: String, default: '加载中...' },
-    downDistance: { type: Number, default: 50 },
-    loadMore: Function,
-    hasMore: { type: Boolean, default: true },
-    styles: { type: Object, default: () => ({}) },
-    auto: { type: Boolean, default: true },
-    autoFill: { type: Boolean, default: true }
-  },
-  setup (props, { emit }) {
-    const containerRef = ref(null)
-
-    // 状态
-    const translateY = ref(0)
-    const startTranslateY = ref(0)
-    const currentY = ref(0)
-    const startY = ref(0)
-    const upStatus = ref('')
-    const downStatus = ref('')
-    const direction = ref('')
-    const upText = ref('')
-    const downText = ref('')
-    const down = ref(false)
-    const drag = ref(false)
-    const more = ref(props.hasMore)
-
-    // classes
-    const containerClasses = computed(() => [prefixCls])
-    const topClasses = computed(() => [prefixCls + '-top', { [`${prefixCls}-drag`]: !drag.value }])
-    const bottomClasses = computed(() => [prefixCls + '-bottom'])
-    const contentClasses = computed(() => [prefixCls + '-content'])
-    const statusClass = computed(() => [prefixCls + '-status'])
-
-    // watch 状态
-    watch(upStatus, val => {
-      switch (val) {
-      case 'pull': upText.value = props.upPullText; break
-      case 'drop': upText.value = props.upDropText; break
-      case 'loading': upText.value = props.upLoadingText; break
-      }
-      emit('on-change-up-status', val)
-    })
-
-    watch(downStatus, val => {
-      switch (val) {
-      case 'end': downText.value = props.downEndText; break
-      case 'drop': downText.value = props.downDropText; break
-      case 'loading': downText.value = props.downLoadingText; break
-      default: downText.value = ''; break
-      }
-      emit('on-change-down-status', val)
-    })
-
-    watch(() => props.hasMore, val => {
-      more.value = val
-      if (!val) downStatus.value = 'end'
-    })
-
-    // 方法
-    const isBottom = () => {
-      const el = containerRef.value
-      return el.scrollHeight <= el.offsetHeight
-    }
-
-    const onLoadOff = () => {
-      translateY.value = 0
-      upStatus.value = ''
-      downStatus.value = ''
-      if (!more.value) downStatus.value = 'end'
-      setTimeout(() => {
-        if (more.value && isBottom()) {
-          direction.value = 'up'
-          downStatus.value = 'loading'
-          props.loadMore && props.loadMore()
-        }
-      }, 1000)
-    }
-
-    const onScroll = e => {
-      e.preventDefault()
-      if (downStatus.value === 'loading') return
-      const el = containerRef.value
-      const scrollTop = el.scrollTop
-      if (props.loadMore) {
-        const absY = el.scrollHeight - (el.offsetHeight + scrollTop)
-        if (absY > props.downDistance && downStatus.value === 'drop') downStatus.value = ''
-        else if (absY <= props.downDistance && absY > props.downDistance && more.value) downStatus.value = 'drop'
-        else if (absY <= props.downDistance) {
-          downStatus.value = 'loading'
-          if (more.value) props.loadMore()
-          else setTimeout(onLoadOff, 1000)
-        }
-      }
-    }
-
-    const onTouchStart = e => {
-      if (upStatus.value === 'loading') return
-      startY.value = e.touches[0].clientY
-      startTranslateY.value = translateY.value
-      down.value = false
-    }
-
-    const onTouchMove = e => {
-      const el = containerRef.value
-      if (!el) return
-      const pos = el.getBoundingClientRect()
-      if (upStatus.value === 'loading' || (startY.value < pos.top && startY.value > pos.bottom)) return
-      currentY.value = e.touches[0].clientY
-      const distance = (currentY.value - startY.value) / props.speed
-      const scrollTop = el.scrollTop
-      direction.value = distance > 0 ? 'down' : 'up'
-
-      if (currentY.value >= startY.value && props.refresh && scrollTop === 0 && direction.value === 'down') {
-        e.preventDefault()
-        e.stopPropagation()
-        translateY.value = props.maxDistance > 0 ? Math.min(distance - scrollTop, props.maxDistance) : distance - scrollTop
-        if (translateY.value < 0) translateY.value = 0
-        upStatus.value = translateY.value >= props.upDistance ? 'drop' : 'pull'
-        drag.value = true
-        down.value = down.value || isBottom()
-      }
-    }
-
-    const onTouchEnd = e => {
-      if (upStatus.value === 'loading') return
-      const el = containerRef.value
-      if (direction.value === 'down' && el.scrollTop <= 0 && translateY.value >= 0) {
-        if (upStatus.value === 'drop') {
-          translateY.value = 40
-          upStatus.value = 'loading'
-          props.refresh && props.refresh()
-        } else {
-          translateY.value = 0
-        }
-      }
-      direction.value = ''
-      drag.value = false
-    }
-
-    onMounted(() => {
-      if (props.auto && props.refresh) {
-        translateY.value = 40
-        drag.value = false
-        direction.value = 'down'
-        upStatus.value = 'loading'
-        props.refresh()
-      }
-
-      const el = containerRef.value
-      if (el) {
-        el.addEventListener('touchstart', onTouchStart, false)
-        el.addEventListener('touchmove', onTouchMove, false)
-        el.addEventListener('touchend', onTouchEnd, false)
-      }
-    })
-
-    onBeforeUnmount(() => {
-      const el = containerRef.value
-      if (el) {
-        el.removeEventListener('touchstart', onTouchStart, false)
-        el.removeEventListener('touchmove', onTouchMove, false)
-        el.removeEventListener('touchend', onTouchEnd, false)
-      }
-    })
-
-    return {
-      containerRef,
-      translateY,
-      upStatus,
-      downStatus,
-      upText,
-      downText,
-      down,
-      drag,
-      more,
-      containerClasses,
-      topClasses,
-      bottomClasses,
-      contentClasses,
-      statusClass,
-      onScroll,
-      onLoadOff
-    }
-  }
-})
-</script>

package/src/components/message/confirm.js

@@ -1,60 +0,0 @@
-/**
- * confirm.js - Vue 3 版本
- * 负责创建 MessageGroup 实例
- */
-
-import { createVNode, render } from 'vue'
-import MessageGroup from './messageGroup.vue'
-
-MessageGroup.newInstance = function (props = {}) {
-  const container = document.createElement('div')
-  document.body.appendChild(container)
-
-  let vnode = null
-  let instance = null // 组件实例 proxy
-
-  const mount = () => {
-    vnode = createVNode(MessageGroup, {
-      ...props
-      // 这里使用 ref 拿到组件实例 proxy
-    })
-    render(vnode, container)
-    instance = vnode.component.proxy
-  }
-
-  mount()
-
-  return {
-    add (options) {
-      if (instance && instance.add) {
-        instance.add(options)
-      }
-    },
-    remove (name) {
-      if (instance && instance.remove) {
-        instance.remove(name)
-      }
-    },
-    closeAll () {
-      if (instance && instance.closeAll) {
-        instance.closeAll()
-      }
-    },
-    component: instance,
-    destroy () {
-      if (instance && instance.closeAll) {
-        instance.closeAll()
-      }
-
-      setTimeout(() => {
-        render(null, container)
-        if (container.parentNode) {
-          container.parentNode.removeChild(container)
-        }
-        instance = null
-      }, 500)
-    }
-  }
-}
-
-export default MessageGroup

package/src/components/message/message.vue

@@ -1,137 +0,0 @@
-<template>
-  <transition name="dpzvc3-ani-scale">
-    <div :class="classes">
-      <div
-        v-if="showLeft"
-        :class="leftClasses"
-      >
-        <slot name="message-left">
-          <Spinner
-            size="65"
-            type="blade"
-            color="#ffffff"
-          />
-        </slot>
-      </div>
-
-      <p :class="wrapperClasses">
-        {{ text }}
-      </p>
-
-      <div
-        v-if="!rightHide"
-        :class="rightClasses"
-      >
-        <slot name="message-right" />
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { defineComponent, computed, onMounted, onBeforeUnmount, inject } from 'vue'
-import Spinner from '../spinner'
-
-const prefixCls = 'dpzvc3-message'
-
-export default defineComponent({
-  name: 'DpzMessage',
-  components: { Spinner },
-
-  props: {
-    name: {
-      type: [String, Number],
-      required: true
-    },
-    text: {
-      type: [String, Number],
-      default: ''
-    },
-    duration: {
-      type: Number,
-      default: 1.5
-    },
-    showLeft: {
-      type: Boolean,
-      default: false
-    },
-    rightHide: {
-      type: Boolean,
-      default: true
-    },
-    type: {
-      type: String,
-      default: 'normal',
-      validator: val =>
-        ['success', 'loading', 'error', 'normal', 'warning', 'danger'].includes(val)
-    },
-    onClose: {
-      type: Function,
-      default: () => {}
-    },
-    position: {
-      type: String,
-      default: 'top'
-    }
-  },
-
-  setup (props) {
-    /** 🔑 从 messageGroup 注入 remove 方法 */
-    const remove = inject('removeMessage')
-
-    let timer = null
-
-    const classes = computed(() => [
-      prefixCls,
-      `${prefixCls}-position-${props.position}`
-    ])
-
-    const wrapperClasses = computed(() => [
-      `${prefixCls}-text`
-    ])
-
-    const leftClasses = computed(() => [
-      `${prefixCls}-left`
-    ])
-
-    const rightClasses = computed(() => [
-      `${prefixCls}-right`
-    ])
-
-    const closeTimer = () => {
-      if (timer) {
-        clearTimeout(timer)
-        timer = null
-      }
-    }
-
-    const close = () => {
-      closeTimer()
-      remove && remove(props.name)
-      props.onClose()
-    }
-
-    onMounted(() => {
-      closeTimer()
-
-      if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          close()
-        }, props.duration * 1000)
-      }
-    })
-
-    onBeforeUnmount(() => {
-      closeTimer()
-    })
-
-    return {
-      classes,
-      wrapperClasses,
-      leftClasses,
-      rightClasses,
-      close
-    }
-  }
-})
-</script>

package/src/components/message/messageGroup.vue

@@ -1,82 +0,0 @@
-<template>
-  <div
-    class="dpzvc3-message-group"
-    :style="styles"
-  >
-    <Message
-      v-for="message in messages"
-      :key="message.name"
-      :name="message.name"
-      :text="message.text"
-      :duration="message.duration"
-      :show-left="message.showLeft"
-      :right-hide="message.rightHide"
-      :type="message.type"
-      :position="message.position"
-      :on-close="message.onClose"
-    />
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, provide } from 'vue'
-import Message from './message.vue'
-
-export default defineComponent({
-  name: 'MessageGroup',
-  components: {
-    Message
-  },
-  props: {
-    styles: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-
-  setup () {
-    const messages = ref([])
-
-    /** 添加 message */
-    const add = (props = {}) => {
-      const message = Object.assign(
-        {
-          name: '',
-          text: '',
-          duration: 1.5,
-          showLeft: false,
-          rightHide: true,
-          type: 'normal',
-          position: 'top',
-          onClose: () => {}
-        },
-        props
-      )
-
-      messages.value.push(message)
-    }
-
-    /** 移除 message（供 message.vue 注入使用） */
-    const remove = (name) => {
-      messages.value = messages.value.filter(
-        item => item.name !== name
-      )
-    }
-
-    /** 关闭所有 */
-    const closeAll = () => {
-      messages.value = []
-    }
-
-    /** 🔑 向子组件注入 remove 方法 */
-    provide('removeMessage', remove)
-
-    return {
-      messages,
-      add,
-      remove,
-      closeAll
-    }
-  }
-})
-</script>

package/src/components/modal/index.js

@@ -1,52 +0,0 @@
-/**
- * index.js - Vue 3 版本
- */
-import Modal from './confirm'
-
-let modalInstance = null
-
-function getModalInstance () {
-  if (!modalInstance) {
-    modalInstance = Modal.newInstance({
-      showHead: true,
-      closable: true,
-      maskClosable: false,
-      footerHide: false
-    })
-  }
-  return modalInstance
-}
-
-function confirm (options = {}) {
-  const instance = getModalInstance()
-
-  options.onRemove = () => {
-    modalInstance = null
-  }
-
-  instance.show(options)
-  return instance
-}
-
-// info 模态框，显示取消按钮
-Modal.info = function (props = {}) {
-  props.showCancle = true
-  props.showHead = false
-  return confirm(props)
-}
-
-// confirm 模态框，不显示取消按钮
-Modal.confirm = function (props = {}) {
-  props.showCancle = false
-  props.showHead = false
-  return confirm(props)
-}
-
-// 移除当前 modal
-Modal.remove = function () {
-  if (!modalInstance) return false
-  const instance = getModalInstance()
-  instance.remove()
-}
-
-export default Modal