@10yun/cv-mobile-ui 0.5.43 → 0.5.45

package/uview-ui/components/u-slider/nvue - /345/211/257/346/234/254.js"

@@ -1,175 +0,0 @@
-/**
- * 使用bindingx方案实现slider
- * 只能使用于nvue下
- */
-// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
-const BindingX = uni.requireNativePlugin('bindingx')
-// nvue操作dom的库，用于获取dom的尺寸信息
-const dom = uni.requireNativePlugin('dom')
-// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
-const animation = uni.requireNativePlugin('animation')
-export default {
-	data() {
-		return {
-			// bindingx的回调值，用于取消绑定
-			panEvent: null,
-			// 标记是否移动状态
-			moving: false,
-			// 位移的偏移量
-			x: 0,
-			// 是否正在触摸过程中，用于标记动画类是否添加或移除
-			touching: false,
-			changeFromInside: false
-		}
-	},
-	watch: {
-		// 监听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部
-		// 从服务端获取一个值后，赋值给slider的v-model而导致的
-		value(n) {
-			if (!this.changeFromInside) {
-				this.initX()
-			} else {
-				this.changeFromInside = false
-			}
-		}
-	},
-	mounted() {
-		this.init()
-	},
-	methods: {
-		init() {
-			this.getSliderRect()
-		},
-		// 获取节点信息
-		// 获取slider尺寸
-		getSliderRect() {
-			// 获取滑块条的尺寸信息
-			// 通过nvue的dom模块，查询节点信息
-			setTimeout(() => {
-				dom.getComponentRect(this.$refs['slider'], res => {
-					this.sliderRect = res.size
-					this.initX()
-				})
-			}, 10)
-		},
-		// 初始化按钮位置
-		initButtonStyle({
-			barStyle,
-			buttonWrapperStyle
-		}) {
-			this.barStyle = barStyle
-			this.buttonWrapperStyle = buttonWrapperStyle
-		},
-		emitEvent(event, value) {
-			this.$emit(event, value ? value : this.value)
-		},
-		formatStep(value) {
-			// 移动点占总长度的百分比
-			return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
-		},
-		// 滑动开始
-		onTouchStart(e) {
-			// 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
-			e.stopPropagation && e.stopPropagation()
-			e.preventDefault && e.preventDefault()
-			if (this.moving || this.disabled) {
-				// 释放上一次的资源
-				if (this.panEvent?.token != 0) {
-					BindingX.unbind({
-						token: this.panEvent.token,
-						// pan为手势事件
-						eventType: 'pan'
-					})
-					this.gesToken = 0
-				}
-				return
-			}
-			this.moving = true
-			this.touching = true
-			// 获取元素ref
-			const button = this.$refs['nvue-button'].ref
-			const gap = this.$refs['nvue-gap'].ref
-			const {
-				min,
-				max,
-				step
-			} = this
-			const {
-				left,
-				width
-			} = this.sliderRect
-			// 初始值为本次偏移量x，加上次停止滑动时的结束值
-			let exporession = `(${this.x} + x)`
-			// 将偏移的x值，转为总位移的百分比值，为了和min和max进行判断
-			exporession = `(${exporession} / ${width}) * 100`
-			if (step > 1) {
-				// 如果step步进大于1，需要跳步，所以需要使用Math.round进行取整
-				exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}`
-			} else {
-				// 当step=1时，无需跳步，充分利用bindingx性能，滑块实时跟随手势，达到丝滑的效果
-				exporession = `max(${min}, min(${exporession}, ${max}))`
-			}
-			// 将百分比最后转化为对应的px值
-			exporession = `${exporession} / 100 * ${width}`
-			// 最大值不允许超过轨迹的宽度
-			const {
-				sliderWidth
-			} = this.sliderRect
-			exporession = `min(${sliderWidth}, ${exporession})`
-			// 滑块点总是需要一个左偏移的值，为自身宽度的一半
-			const buttonExpression = `${exporession} - ${this.blockHeight / 2}`
-			// 阿里为了KPI而开源的BindingX
-			this.panEvent = BindingX.bind({
-				anchor: button,
-				eventType: 'pan',
-				props: [{
-					element: gap,
-					// 绑定width属性，设置其宽度值
-					property: 'width',
-					expression
-				}, {
-					element: button,
-					// 绑定width属性，设置其宽度值
-					property: 'transform.translateX',
-					expression: buttonExpression
-				}]
-			}, (e) => {
-				if (e.state === 'end' || e.state === 'exit') {
-					// 
-					this.x = uni.$u.range(0, left + width, e.deltaX + this.x)
-					// 根据偏移值，得出移动的百分比，进而修改双向绑定的v-model的值
-					const value = (this.x / width) * 100
-					const percent = this.formatStep(value)
-					// 修改value值
-					this.$emit('input', percent)
-					// 标记下一次触发value的watch时，这个值的变化，是由内部改变的
-					this.changeFromInside = true
-					this.moving = false
-					this.touching = false
-				}
-			})
-		},
-		// 从value的变化，倒推得出x的值该为多少
-		initX() {
-			const {
-				left,
-				width
-			} = this.sliderRect
-			// 得出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值
-			// 而无法的值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了
-			this.x = this.value / 100 * width
-			// 设置移动的值
-			const barStyle = {
-				width: this.x + 'px'
-			}
-			// 按钮的初始值
-			const buttonWrapperStyle = {
-				transform: `translateX(${this.x - this.blockHeight / 2}px)`
-			}
-			this.initButtonStyle({
-				barStyle,
-				buttonWrapperStyle
-			})
-		}
-	}
-}

package/uview-ui/components/u-slider/nvue.js

@@ -1,190 +0,0 @@
-/**
- * 使用bindingx方案实现slider
- * 只能使用于nvue下
- */
-// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
-const BindingX = uni.requireNativePlugin('bindingx')
-// nvue操作dom的库，用于获取dom的尺寸信息
-const dom = uni.requireNativePlugin('dom')
-// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
-const animation = uni.requireNativePlugin('animation')
-export default {
-    data() {
-        return {
-            // 位移的偏移量
-            x: 0,
-            // 是否正在触摸过程中，用于标记动画类是否添加或移除
-            touching: false,
-            changeFromInside: false
-        }
-    },
-    watch: {
-        // 监听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部
-        // 从服务端获取一个值后，赋值给slider的v-model而导致的
-        value(n) {
-            if (!this.changeFromInside) {
-                this.initX()
-            } else {
-                this.changeFromInside = false
-            }
-        }
-    },
-    mounted() {
-        this.init()
-    },
-    methods: {
-        init() {
-            // 更新滑块尺寸信息
-            this.getSliderRect().then((size) => {
-                this.sliderRect = size
-                this.initX()
-            })
-        },
-        // 获取节点信息
-        // 获取slider尺寸
-        getSliderRect() {
-            // 获取滑块条的尺寸信息
-            // 通过nvue的dom模块，查询节点信息
-            return new Promise((resolve) => {
-                this.$nextTick(() => {
-                    dom.getComponentRect(this.$refs.slider, (res) => {
-                        resolve(res.size)
-                    })
-                })
-            })
-        },
-        // 初始化按钮位置
-        initButtonStyle({
-            barStyle,
-            buttonWrapperStyle
-        }) {
-            this.barStyle = barStyle
-            this.buttonWrapperStyle = buttonWrapperStyle
-        },
-        emitEvent(event, value) {
-            this.$emit(event, value || this.value)
-        },
-        // 滑动开始
-        async onTouchStart(e) {
-            // if (this.disabled) return
-            // // 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
-            // e.stopPropagation && e.stopPropagation()
-            // e.preventDefault && e.preventDefault()
-            // // 更新滑块的尺寸信息
-            // this.sliderRect = await this.getSliderRect()
-            // // 标记滑动过程中触摸点的信息
-            // this.touchStart(e)
-            // this.startValue = this.format(this.value)
-            // this.dragStatus = 'start'
-            // 标记滑动过程中触摸点的信息
-            // this.touchStart(e)
-        },
-        // 开始滑动
-        onTouchMove(e) {
-            // if (this.disabled) return;
-            // if (this.dragStatus === 'start') {
-            // 	this.$emit('drag-start')
-            // }
-            // // 标记当前滑动过程中的触点信息，此方法在touch mixin中
-            // this.touchMove(e)
-            // this.dragStatus = 'draging'
-            // const {
-            // 	width: sliderWidth
-            // } = this.sliderRect
-            // const diff = (this.deltaX / sliderWidth) * this.getRange()
-            // this.newValue = this.startValue + diff
-            // this.updateValue(this.newValue, false, true)
-            // 获取元素ref
-            // const button = this.$refs['nvue-button'].ref
-            // const gap = this.$refs['nvue-gap'].ref
-            //          animation.transition(gap, {
-            // 	styles: {
-            //                  width: `${this.startX + this.deltaX}px`
-            // 	}
-            // })
-            // // console.log(this.startX + this.deltaX);
-            // animation.transition(button, {
-            // 	styles: {
-            //         transform: `translateX(${this.startX + this.deltaX}px)`
-            // 	}
-            // })
-            // this.barStyle = {
-            // 	width: `${this.startX + this.deltaX}px`
-            // }
-            const {
-                x
-            } = this.getTouchPoint(e)
-            this.buttonWrapperStyle = {
-                transform: `translateX(${x}px)`
-            }
-            // this.buttonWrapperStyle = {
-            // 	transform: `translateX(${this.format(this.startX + this.deltaX)}px)`
-            // }
-        },
-        // onTouchEnd() {
-        // 	if (this.disabled) return;
-        // 	if (this.dragStatus === 'draging') {
-        // 		this.updateValue(this.newValue, true)
-        // 		this.$emit('drag-end');
-        // 	}
-        // },
-        updateValue(value, end, drag) {
-            value = this.format(value)
-            const {
-                width: sliderWidth
-            } = this.sliderRect
-            const width = `${((value - this.min) * sliderWidth) / this.getRange()}`
-            this.value = value
-            this.barStyle = {
-                width: `${width}px`
-            }
-            // console.log('width', width);
-            if (drag) {
-                this.$emit('drag', {
-                    value
-                })
-            }
-            if (end) {
-                this.$emit('change', value)
-            }
-            if ((drag || end)) {
-                this.changeFromInside = true
-                this.$emit('update', value)
-            }
-        },
-        // 从value的变化，倒推得出x的值该为多少
-        initX() {
-            const {
-                left,
-                width
-            } = this.sliderRect
-            // 得出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值
-            // 而无法的值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了
-            this.x = this.value / 100 * width
-            // 设置移动的值
-            const barStyle = {
-                width: `${this.x}px`
-            }
-            // 按钮的初始值
-            const buttonWrapperStyle = {
-                transform: `translateX(${this.x - this.blockHeight / 2}px)`
-            }
-            this.initButtonStyle({
-                barStyle,
-                buttonWrapperStyle
-            })
-        },
-        // 移动点占总长度的百分比，此处需要先除以step，是为了保证step大于1时，比如10，那么在滑动11,12px这样的
-        // 距离时，实际上滑块是不会滑动的，到了16,17px，经过四舍五入后，就变成了20px，进行了下一个跳变
-        format(value) {
-            return Math.round(uni.$u.range(this.min, this.max, value) / this.step) * this.step
-        },
-        getRange() {
-            const {
-                max,
-                min
-            } = this
-            return max - min
-        }
-    }
-}

package/uview-ui/components/u-slider/props.js

@@ -1,55 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 最小可选值
-    min: {
-      type: [Number, String],
-      default: defprops.slider.min
-    },
-    // 最大可选值
-    max: {
-      type: [Number, String],
-      default: defprops.slider.max
-    },
-    // 步长，取值必须大于 0，并且可被(max - min)整除
-    step: {
-      type: [Number, String],
-      default: defprops.slider.step
-    },
-    // 当前取值
-    value: {
-      type: [Number, String],
-      default: defprops.slider.value
-    },
-    // 滑块右侧已选择部分的背景色
-    activeColor: {
-      type: String,
-      default: defprops.slider.activeColor
-    },
-    // 滑块左侧未选择部分的背景色
-    inactiveColor: {
-      type: String,
-      default: defprops.slider.inactiveColor
-    },
-    // 滑块的大小，取值范围为 12 - 28
-    blockSize: {
-      type: [Number, String],
-      default: defprops.slider.blockSize
-    },
-    // 滑块的颜色
-    blockColor: {
-      type: String,
-      default: defprops.slider.blockColor
-    },
-    // 禁用状态
-    disabled: {
-      type: Boolean,
-      default: defprops.slider.disabled
-    },
-    // 是否显示当前的选择值
-    showValue: {
-      type: Boolean,
-      default: defprops.slider.showValue
-    }
-  }
-};

package/uview-ui/components/u-slider/style.css

@@ -1,11 +0,0 @@
-/* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */

package/uview-ui/components/u-slider/style.scss

@@ -1 +0,0 @@
-@import '../../libs/css/components.scss';

package/uview-ui/components/u-slider/u-slider.vue

@@ -1 +0,0 @@
-<template>
  <view class="u-slider" :style="[$u.addStyle(customStyle)]">
    <slider
      :min="min"
      :max="max"
      :step="step"
      :value="value"
      :activeColor="activeColor"
      :inactiveColor="inactiveColor"
      :blockSize="$u.getPx(blockSize)"
      :blockColor="blockColor"
      :showValue="showValue"
      :disabled="disabled"
      @changing="changingHandler"
      @change="changeHandler"
    ></slider>
  </view>
  name: 'u--slider',
  mixins: [mpMixin, mixin, props],
  methods: {
    // 拖动过程中触发
    changingHandler(e) {
      const { value } = e.detail;
      // 更新v-model的值
      this.$emit('input', value);
      // 触发事件
      this.$emit('changing', value);
    },
    // 滑动结束时触发
    changeHandler(e) {
      const { value } = e.detail;
      // 更新v-model的值
      this.$emit('input', value);
      // 触发事件
      this.$emit('change', value);
    }
  }

package/uview-ui/components/u-status-bar/props.js

@@ -1,9 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    bgColor: {
-      type: String,
-      default: defprops.statusBar.bgColor
-    }
-  }
-};

package/uview-ui/components/u-status-bar/style.css

@@ -1,5 +0,0 @@
-.u-status-bar {
-  /* #ifndef APP-NVUE */
-  width: 100%;
-  /* #endif */
-}

package/uview-ui/components/u-status-bar/style.scss

@@ -1,6 +0,0 @@
-.u-status-bar {
-  // nvue会默认100%，如果nvue下，显式写100%的话，会导致宽度不为100%而异常
-  /* #ifndef APP-NVUE */
-  width: 100%;
-  /* #endif */
-}

package/uview-ui/components/u-status-bar/u-status-bar.vue

@@ -1,37 +0,0 @@
-<template>
-  <view :style="[style]" class="u-status-bar">
-    <slot />
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * StatbusBar 状态栏占位
- * @description 本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。
- * @tutorial https://uviewui.com/components/statusBar.html
- * @property {String}			bgColor			背景色 (默认 'transparent' )
- * @property {String | Object}	customStyle		自定义样式
- * @example <u-status-bar></u-status-bar>
- */
-export default {
-  name: 'u-status-bar',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {};
-  },
-  computed: {
-    style() {
-      const style = {};
-      // 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
-      style.height = uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px');
-      style.backgroundColor = this.bgColor;
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
-    }
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

package/uview-ui/components/u-steps/props.js

@@ -1,40 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 排列方向
-    direction: {
-      type: String,
-      default: defprops.steps.direction
-    },
-    // 设置第几个步骤
-    current: {
-      type: [String, Number],
-      default: defprops.steps.current
-    },
-    // 激活状态颜色
-    activeColor: {
-      type: String,
-      default: defprops.steps.activeColor
-    },
-    // 未激活状态颜色
-    inactiveColor: {
-      type: String,
-      default: defprops.steps.inactiveColor
-    },
-    // 激活状态的图标
-    activeIcon: {
-      type: String,
-      default: defprops.steps.activeIcon
-    },
-    // 未激活状态图标
-    inactiveIcon: {
-      type: String,
-      default: defprops.steps.inactiveIcon
-    },
-    // 是否显示点类型
-    dot: {
-      type: Boolean,
-      default: defprops.steps.dot
-    }
-  }
-};

package/uview-ui/components/u-steps/style.css

@@ -1,24 +0,0 @@
-/* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
-.u-steps {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-}
-.u-steps--column {
-  flex-direction: column;
-}
-.u-steps--row {
-  flex-direction: row;
-  flex: 1;
-}

package/uview-ui/components/u-steps/style.scss

@@ -1,14 +0,0 @@
-@import '../../libs/css/components.scss';
-
-.u-steps {
-  @include flex;
-
-  &--column {
-    flex-direction: column;
-  }
-
-  &--row {
-    flex-direction: row;
-    flex: 1;
-  }
-}

package/uview-ui/components/u-steps/u-steps.vue

@@ -1,63 +0,0 @@
-<template>
-  <view class="u-steps" :class="[`u-steps--${direction}`]">
-    <slot></slot>
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * Steps 步骤条
- * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
- * @tutorial https://uviewui.com/components/steps.html
- * @property {String}			direction		row-横向，column-竖向 (默认 'row' )
- * @property {String | Number}	current			设置当前处于第几步 (默认 0 )
- * @property {String}			activeColor		激活状态颜色 (默认 '#3c9cff' )
- * @property {String}			inactiveColor	未激活状态颜色 (默认 '#969799' )
- * @property {String}			activeIcon		激活状态的图标
- * @property {String}			inactiveIcon	未激活状态图标
- * @property {Boolean}			dot				是否显示点类型 (默认 false )
- * @example <u-steps current="0"><u-steps-item title="已出库" desc="10:35" ></u-steps-item></u-steps>
- */
-export default {
-  name: 'u-steps',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {};
-  },
-  watch: {
-    children() {
-      this.updateChildData();
-    },
-    parentData() {
-      this.updateChildData();
-    }
-  },
-  computed: {
-    // 监听参数的变化，通过watch中，手动去更新子组件的数据，否则子组件不会自动变化
-    parentData() {
-      return [this.current, this.direction, this.activeColor, this.inactiveColor, this.activeIcon, this.inactiveIcon, this.dot];
-    }
-  },
-  methods: {
-    // 更新子组件的数据
-    updateChildData() {
-      this.children.map((child) => {
-        // 先判断子组件是否存在对应的方法
-        uni.$u.test.func((child || {}).updateFromParent()) && child.updateFromParent();
-      });
-    },
-    // 接受子组件的通知，去修改其他子组件的数据
-    updateFromChild() {
-      this.updateChildData();
-    }
-  },
-  created() {
-    this.children = [];
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>