dpzvc3-ui 3.0.0

package/src/components/prompt/prompt.vue

@@ -0,0 +1,125 @@
+<template>
+  <Modal
+    v-model="visible"
+    :width="width"
+    :title="title"
+    :style="styles"
+    :mask-closable="maskClosable"
+  >
+    <template #header>
+      <div
+        class="dpzvc3-modal-header-inner ellipse-fir"
+        v-html="title"
+      />
+    </template>
+
+    <template #body>
+      <div class="dpzvc3-prompt-body-inner">
+        <div class="dpzvc3-prompt-content">
+          <span class="dpzvc3-prompt-spec">{{ spec }}</span>
+          <TextBar
+            v-model="texts"
+            type="text"
+            :placeholder="placeholder"
+          />
+          <div
+            v-if="message"
+            class="dpzvc3-prompt-error"
+            v-html="message"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <VButton
+        :styles="{ background: '#ffffff', color: 'red' }"
+        @click="ok"
+      >
+        <template #button-inner>
+          {{ okText }}
+        </template>
+      </VButton>
+
+      <VButton
+        :styles="{ background: '#ffffff', color: '#ccc' }"
+        @click="cancle"
+      >
+        <template #button-inner>
+          {{ cancleText }}
+        </template>
+      </VButton>
+    </template>
+  </Modal>
+</template>
+
+<script>
+import { defineComponent, ref, watch } from 'vue'
+import Modal from '../modal/modal.vue'
+import TextBar from '../Text/textBar.vue'
+import VButton from '../button/button.vue'
+
+export default defineComponent({
+  name: 'Dpzvc3Prompt',
+  components: { Modal, TextBar, VButton },
+  props: {
+    value: { type: Boolean, default: false },
+    text: { type: String, default: '' },
+    closable: { type: Boolean, default: true },
+    maskClosable: { type: Boolean, default: true },
+    title: String,
+    width: { type: String, default: '220px' },
+    okText: { type: String, default: '确定' },
+    cancleText: { type: String, default: '取消' },
+    loading: { type: Boolean, default: false },
+    styles: Object,
+    spec: { type: String, default: '提示' },
+    validator: { type: [RegExp, Function], default: null },
+    msg: String,
+    placeholderText: String,
+    onOk: { type: Function, default: () => {} },
+    onCancle: { type: Function, default: () => {} }
+  },
+  emits: ['update:value', 'on-ok', 'on-cancle'],
+  setup (props, { emit }) {
+    // 子组件内部状态
+    const visible = ref(props.value)
+    const texts = ref(props.text)
+    const message = ref(props.msg || '')
+    const placeholder = ref(props.placeholderText)
+    const buttonLoading = ref(false)
+
+    // 同步父组件变化
+    watch(() => props.value, val => (visible.value = val))
+
+    watch(() => props.val, val => (texts.value = val))
+    watch(() => props.loading, val => (buttonLoading.value = val))
+
+    // 点击确定
+    function ok () {
+      let valid = true
+      if (props.validator) {
+        if (props.validator instanceof RegExp) valid = props.validator.test(texts.value)
+        else if (typeof props.validator === 'function') valid = props.validator(texts.value)
+      }
+      if (valid !== true) {
+        message.value = typeof valid === 'string' ? valid : ''
+        return
+      }
+
+      emit('update:value', false) // 通知父组件关闭弹窗
+      props.onOk?.(texts.value)
+      emit('on-ok', texts.value)
+    }
+
+    // 点击取消
+    function cancle () {
+      emit('update:value', false)
+      props.onCancle?.()
+      emit('on-cancle')
+    }
+
+    return { visible, texts, message, placeholder, buttonLoading, ok, cancle }
+  }
+})
+</script>

package/src/components/radioBox/index.js

@@ -0,0 +1,8 @@
+/**
+ * Created by admin on 2017/4/19.
+ */
+import RadioBox from './radiobox.vue'
+import RadioBoxGroup from './radiobox-group.vue'
+
+RadioBox.group = RadioBoxGroup
+export default RadioBox

package/src/components/radioBox/radiobox-group.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed, watch, provide, ref } from 'vue'
+
+const prefixCls = 'dpzvc3-radioBoxGroup'
+
+export default defineComponent({
+  name: 'RadioBoxGroup',
+  props: {
+    modelValue: {
+      type: [String, Boolean, Number],
+      default: ''
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'on-change', 'on-form-change'],
+  setup (props, { emit }) {
+    const currentValue = ref(props.modelValue)
+
+    // 提供给子组件
+    provide('radioBoxGroup', {
+      currentValue,
+      change: (val) => {
+        currentValue.value = val
+        emit('update:modelValue', val)
+        emit('on-change', val)
+        emit('on-form-change', val)
+      }
+    })
+
+    // 监听外部 v-model 改变
+    watch(
+      () => props.modelValue,
+      (val) => {
+        currentValue.value = val
+      }
+    )
+
+    const classes = computed(() => [
+      prefixCls,
+      { [`${prefixCls}-vertical`]: props.vertical }
+    ])
+
+    return {
+      classes,
+      currentValue
+    }
+  }
+})
+</script>
+
+<style scoped>
+.dpzvc3-radioBoxGroup-vertical {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+</style>

package/src/components/radioBox/radiobox.vue

@@ -0,0 +1,88 @@
+<template>
+  <label :class="classes">
+    <span :class="wrapperClasses">
+      <span :class="innerClasses">
+        <input
+          type="radio"
+          :disabled="disable"
+          :checked="isChecked"
+          :class="inputClass"
+          @change="handleChange"
+        >
+      </span>
+    </span>
+    <slot v-if="show"><span ref="slotEl">{{ label }}</span></slot>
+  </label>
+</template>
+
+<script>
+import { defineComponent, inject, computed, ref, onMounted } from 'vue'
+
+const prefixCls = 'dpzvc3-radiobox'
+
+export default defineComponent({
+  name: 'RadioBox',
+  props: {
+    label: { type: [String, Number], required: true },
+    modalValue: { type: Boolean, default: false },
+    disable: { type: Boolean, default: false }
+  },
+  emits: ['update:value', 'on-change'],
+  setup (props, { emit }) {
+    const slotEl = ref(null)
+    const show = ref(true)
+    const group = inject('radioBoxGroup', null) // 如果有group则为对象，没有则为null
+
+    const isChecked = computed(() => {
+      if (group) {
+        return group.currentValue.value === props.label
+      } else {
+        return props.modalValue
+      }
+    })
+
+    const classes = computed(() => [prefixCls])
+    const wrapperClasses = computed(() => [
+      `${prefixCls}-wrapper`,
+      {
+        [`${prefixCls}-checked`]: isChecked.value,
+        [`${prefixCls}-disable`]: props.disable
+      }
+    ])
+    const innerClasses = computed(() => [`${prefixCls}-inner`])
+    const inputClass = computed(() => [`${prefixCls}-input`])
+
+    function handleChange (e) {
+      if (props.disable) return
+      const checked = e.target.checked
+
+      if (group) {
+        group.change(props.label)
+      } else {
+        emit('update:modalValue', checked)
+        emit('on-change', checked)
+      }
+    }
+
+    onMounted(() => {
+      if (!group) {
+        // 判断是否有 slot 内容
+        if (slotEl.value && !slotEl.value.innerHTML) {
+          show.value = false
+        }
+      }
+    })
+
+    return {
+      classes,
+      wrapperClasses,
+      innerClasses,
+      inputClass,
+      isChecked,
+      handleChange,
+      show,
+      slotEl
+    }
+  }
+})
+</script>

package/src/components/rater/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/31.
+ */
+import Rater from './rater'
+export default Rater

package/src/components/rater/rater.vue

@@ -0,0 +1,118 @@
+<template>
+  <div :class="classes">
+    <span
+      v-for="(item, key) in max"
+      :key="key"
+      :class="starClass"
+      :style="parentStyles(key)"
+    >
+      {{ star }}
+      <span
+        :style="childStyles(key)"
+        @click="changeValue(key)"
+      >{{ star }}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, watch, computed } from 'vue'
+
+const prefixCls = 'dpzvc3-rater'
+
+export default defineComponent({
+  name: 'Dpzvc3Rater',
+  props: {
+    modelValue: { type: Number, default: -1 }, // 支持 v-model
+    distance: { type: Number, default: 10 },
+    max: { type: Number, default: 5 },
+    size: { type: Number, default: 18 },
+    star: { type: String, default: '★' },
+    defaultColor: { type: String, default: '#ccc' },
+    activeColor: { type: String, default: '#f5a623' },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    const currentValue = ref(props.modelValue)
+
+    // 监听外部 v-model 变化
+    watch(
+      () => props.modelValue,
+      val => {
+        currentValue.value = val
+      }
+    )
+
+    // 选中星星
+    function changeValue (index) {
+      if (props.disabled) return
+      currentValue.value = index + 1
+      emit('update:modelValue', currentValue.value)
+    }
+
+    const classes = computed(() => [prefixCls])
+    const starClass = computed(() => [`${prefixCls}-star`])
+
+    function parentStyles (index) {
+      const obj = { fontSize: `${props.size}px` }
+      if (index + 1 < props.max) {
+        obj.marginRight = `${props.distance}px`
+      } else {
+        obj.marginRight = '0px'
+      }
+      obj.color = props.defaultColor
+      return obj
+    }
+
+    function childStyles (index) {
+      const obj = { fontSize: `${props.size}px` }
+      if (index + 1 < props.max) {
+        obj.marginRight = `${props.distance}px`
+      } else {
+        obj.marginRight = '0px'
+      }
+
+      const valueArr = String(currentValue.value).split('.')
+      if (index + 1 <= Number(valueArr[0])) {
+        obj.color = props.activeColor
+      }
+
+      if (valueArr.length > 1 && Number(valueArr[1]) >= 5 && index + 1 === Number(valueArr[0]) + 1) {
+        obj.width = '50%'
+        obj.color = props.activeColor
+      }
+
+      return obj
+    }
+
+    return {
+      currentValue,
+      changeValue,
+      classes,
+      starClass,
+      parentStyles,
+      childStyles
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.dpzvc3-rater {
+  &-star {
+    color: #e9e9e9;
+    position: relative;
+    display: inline-block;
+    > span {
+      position: absolute;
+      height: 100%;
+      content: '★';
+      left: 0;
+      top: 0;
+      color: #e9e9e9;
+      overflow: hidden;
+    }
+  }
+}
+</style>

package/src/components/slideBar/index.js

@@ -0,0 +1,6 @@
+/**
+ * Created by admin on 2017/4/21.
+ */
+import SlideBar from './slideBar'
+
+export default SlideBar

package/src/components/slideBar/slideBar.vue

@@ -0,0 +1,207 @@
+<template>
+  <div
+    :class="classes"
+    :style="getStyles"
+  >
+    <!-- header -->
+    <div
+      ref="header"
+      :class="headerClasses"
+    >
+      <div
+        ref="wrapper"
+        :class="wrapperClasses"
+        :style="{ width: isFlex ? 'auto' : items.length * getItemWidth + 'px' }"
+      >
+        <div
+          v-for="(item, key) in items"
+          :key="key"
+          :class="['dpzvc3-slideBar-child', startIndex === key ? 'active' : '', !isFlex ? 'normalChild' : '']"
+          :style="{ textAlign, width: getItemWidth + 'px', height: scrollHeight, lineHeight: scrollHeight }"
+          @click="changeBar(key)"
+        >
+          <slot :name="'slide-bar-header-' + key">
+            <a class="content ellipse-fir">{{ item.name }}</a>
+          </slot>
+        </div>
+      </div>
+
+      <div
+        :class="absoluteClass"
+        :style="getScrollStyle"
+      />
+    </div>
+
+    <!-- content -->
+    <div
+      :class="containerClass"
+      :style="{ height }"
+    >
+      <div
+        ref="content"
+        :class="contentClasses"
+        :style="getContainerStyle"
+      >
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          :class="['dpzvc3-slideBar-content-item', startIndex === index ? 'active' : '']"
+          :style="{ width: clientWidth + 'px' }"
+        >
+          <slot :name="'slot-item-' + index" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+
+const prefixCls = 'dpzvc3-slideBar'
+
+export default defineComponent({
+  name: 'SlideBar',
+  props: {
+    scrollHeight: { type: [String, Number], default: '30px' },
+    height: { type: [String, Number], default: '100%' },
+    styles: { type: Object, default: () => ({}) },
+    childWidth: { type: Number, default: 70 },
+    scrollColor: { type: String, default: '#036eb8' },
+    textAlign: { type: String, default: 'center' },
+    flex: { type: Boolean, default: true },
+    type: { type: String, default: 'normal' },
+    list: { type: Array, default: () => [{ name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }] },
+    index: { type: Number, default: 0 },
+    distanceIndex: { type: Number, default: 1.5 },
+    canDrag: { type: Boolean, default: true }
+  },
+  emits: ['on-change'],
+  setup (props, { emit }) {
+    const header = ref(null)
+    const content = ref(null)
+
+    const startIndex = ref(props.index)
+    const clientWidth = ref(0)
+    const dragging = ref(false)
+    const distance = ref(0)
+    const startTranslateX = ref(0)
+    const startX = ref(0)
+
+    const items = ref(props.list)
+    const isFlex = ref(props.flex)
+    const fixed = ref(false)
+
+    const getItemWidth = computed(() => (isFlex.value ? clientWidth.value / items.value.length : props.childWidth))
+    const translateX = computed(() => -startIndex.value * clientWidth.value)
+
+    const classes = computed(() => [prefixCls])
+    const headerClasses = computed(() => [prefixCls + '-header', { fixed: fixed.value }])
+    const wrapperClasses = computed(() => [
+      prefixCls + '-wrapper',
+      isFlex.value ? prefixCls + '-flex' : prefixCls + '-slide',
+      { normal: props.type === 'normal' && isFlex.value, vertical: props.type === 'vertical' && isFlex.value }
+    ])
+    const contentClasses = computed(() => [prefixCls + '-content', { [prefixCls + '-dragging']: dragging.value }])
+    const absoluteClass = computed(() => [prefixCls + '-wrapper-absolute'])
+    const containerClass = computed(() => [prefixCls + '-container'])
+    const getStyles = computed(() => ({ ...props.styles }))
+    const getContainerStyle = computed(() => ({
+      width: clientWidth.value * items.value.length + 'px',
+      transform: `translate3d(${translateX.value}px,0,0)`
+    }))
+    const getScrollStyle = computed(() => ({
+      width: getItemWidth.value + 'px',
+      transform: `translate3d(${startIndex.value * getItemWidth.value}px,0,0)`,
+      backgroundColor: props.scrollColor
+    }))
+    const maxIndex = computed(() => items.value.length - 1)
+
+    // tab 切换
+    function changeBar (index) {
+      if (startIndex.value === index) return
+      startIndex.value = index
+      emit('on-change', index)
+    }
+
+    // 拖拽事件
+    function onTouchStart (e) {
+      startTranslateX.value = translateX.value
+      distance.value = 0
+      startX.value = e.touches[0].clientX
+      dragging.value = true
+    }
+    function onTouchMove (e) {
+      const currentX = e.touches[0].clientX
+      distance.value = props.distanceIndex ? (currentX - startX.value) / props.distanceIndex : currentX - startX.value
+    }
+    function onTouchEnd () {
+      if (distance.value < 0 && Math.abs(distance.value) > clientWidth.value / 2) {
+        slideLeft()
+      } else if (distance.value > 0 && Math.abs(distance.value) > clientWidth.value / 2) {
+        slideRight()
+      }
+      dragging.value = false
+    }
+    function slideLeft () {
+      if (startIndex.value < maxIndex.value) startIndex.value++
+      emit('on-change', startIndex.value)
+    }
+    function slideRight () {
+      if (startIndex.value > 0) startIndex.value--
+      emit('on-change', startIndex.value)
+    }
+
+    // 固定 header
+    function onScroll () {
+      fixed.value = header.value.getBoundingClientRect().top <= 0
+    }
+    function onResize () {
+      clientWidth.value = header.value.clientWidth
+    }
+
+    onMounted(() => {
+      clientWidth.value = header.value.clientWidth
+      window.addEventListener('resize', onResize)
+      if (props.canDrag && content.value) {
+        content.value.addEventListener('touchstart', onTouchStart)
+        content.value.addEventListener('touchmove', onTouchMove)
+        content.value.addEventListener('touchend', onTouchEnd)
+      }
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', onResize)
+      if (props.canDrag && content.value) {
+        content.value.removeEventListener('touchstart', onTouchStart)
+        content.value.removeEventListener('touchmove', onTouchMove)
+        content.value.removeEventListener('touchend', onTouchEnd)
+      }
+    })
+
+    return {
+      header,
+      content,
+      startIndex,
+      clientWidth,
+      dragging,
+      distance,
+      items,
+      isFlex,
+      fixed,
+      getItemWidth,
+      translateX,
+      classes,
+      headerClasses,
+      wrapperClasses,
+      contentClasses,
+      absoluteClass,
+      containerClass,
+      getStyles,
+      getContainerStyle,
+      getScrollStyle,
+      changeBar
+    }
+  }
+})
+</script>

package/src/components/spinner/behavior/blade.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="dpzvc3-spinner-blade"
+    :style="spinnerStyle"
+  >
+    <div
+      v-for="i in 12"
+      :key="i"
+      class="blade"
+      :class="'blade-' + i"
+      :style="bladeStyle"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+import spinnerProps from '../props' // 复用 spinnerProps
+// 如果原来 mixins props 是这样
+// {
+//   color: String,
+//   size: [Number, String]
+// }
+
+export default defineComponent({
+  name: 'Dpzvc3Blade',
+  props: spinnerProps.props,
+  setup (props) {
+    // 计算每个 blade 的样式
+    const bladeStyle = computed(() => {
+      return props.color ? { backgroundColor: props.color } : {}
+    })
+    const { spinnerStyle } = spinnerProps.setup(props)
+    // console.log(spinnerStyle, 'ddds')
+    // 如果需要设置整个 spinner 容器的大小
+    return {
+      bladeStyle,
+      spinnerStyle
+    }
+  }
+})
+</script>