@kengic/uni 0.3.2-beta.3 → 0.3.2-beta.5

package/dist/uni-ui/uni-forms-item/uni-forms-item.vue

@@ -0,0 +1,601 @@
+<template>
+    <view
+        class="uni-forms-item"
+        :class="['is-direction-' + localLabelPos, border ? 'uni-forms-item--border' : '', border && isFirstBorder ? 'is-first-border' : '']"
+    >
+        <slot name="label">
+            <view
+                class="uni-forms-item__label"
+                :class="{ 'no-label': !label && !required }"
+                :style="{ width: localLabelWidth, justifyContent: localLabelAlign }"
+            >
+                <text v-if="required" class="is-required">*</text>
+                <text>{{ label }}</text>
+            </view>
+        </slot>
+        <!-- #ifndef APP-NVUE -->
+        <view class="uni-forms-item__content">
+            <slot></slot>
+            <view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
+                <text>{{ msg }}</text>
+            </view>
+        </view>
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <view class="uni-forms-item__nuve-content">
+            <view class="uni-forms-item__content">
+                <slot></slot>
+            </view>
+            <view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
+                <text class="error-text">{{ msg }}</text>
+            </view>
+        </view>
+        <!-- #endif -->
+    </view>
+</template>
+
+<script>
+/**
+ * uni-fomrs-item 表单子组件
+ * @description uni-fomrs-item 表单子组件，提供了基础布局已经校验能力
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
+ * @property {Boolean} required 是否必填，左边显示红色"*"号
+ * @property {String }    label                输入框左边的文字提示
+ * @property {Number }    labelWidth            label的宽度，单位px（默认65）
+ * @property {String }    labelAlign = [left|center|right] label的文字对齐方式（默认left）
+ *    @value left        label 左侧显示
+ *    @value center    label 居中
+ *    @value right    label 右侧对齐
+ * @property {String }    errorMessage        显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+ * @property {String }    name                表单域的属性名，在使用校验规则时必填
+ * @property {String }    leftIcon            【1.4.0废弃】label左边的图标，限 uni-ui 的图标名称
+ * @property {String }    iconColor        【1.4.0废弃】左边通过icon配置的图标的颜色（默认#606266）
+ * @property {String} validateTrigger = [bind|submit|blur]    【1.4.0废弃】校验触发器方式 默认 submit
+ *    @value bind    发生变化时触发
+ *    @value submit 提交时触发
+ *    @value blur    失去焦点触发
+ * @property {String }    labelPosition = [top|left] 【1.4.0废弃】label的文字的位置（默认left）
+ *    @value top    顶部显示 label
+ *    @value left    左侧显示 label
+ */
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'UniFormsItem',
+    options: {
+        virtualHost: true,
+    },
+    provide() {
+        return {
+            uniFormItem: this,
+        };
+    },
+    inject: {
+        form: {
+            from: 'uniForm',
+            default: null,
+        },
+    },
+    props: {
+        // 表单校验规则
+        rules: {
+            type: Array,
+            default() {
+                return null;
+            },
+        },
+        // 表单域的属性名，在使用校验规则时必填
+        name: {
+            type: [String, Array],
+            default: '',
+        },
+        required: {
+            type: Boolean,
+            default: false,
+        },
+        label: {
+            type: String,
+            default: '',
+        },
+        // label的宽度 ，默认 80
+        labelWidth: {
+            type: [String, Number],
+            default: '',
+        },
+        // label 居中方式，默认 left 取值 left/center/right
+        labelAlign: {
+            type: String,
+            default: '',
+        },
+        // 强制显示错误信息
+        errorMessage: {
+            type: [String, Boolean],
+            default: '',
+        },
+        // 1.4.0 弃用，统一使用 form 的校验时机
+        // validateTrigger: {
+        // 	type: String,
+        // 	default: ''
+        // },
+        // 1.4.0 弃用，统一使用 form 的label 位置
+        // labelPosition: {
+        // 	type: String,
+        // 	default: ''
+        // },
+        // 1.4.0 以下属性已经废弃，请使用  #label 插槽代替
+        leftIcon: String,
+        iconColor: {
+            type: String,
+            default: '#606266',
+        },
+    },
+    data() {
+        return {
+            errMsg: '',
+            userRules: null,
+            localLabelAlign: 'left',
+            localLabelWidth: '65px',
+            localLabelPos: 'left',
+            border: false,
+            isFirstBorder: false,
+        };
+    },
+    computed: {
+        // 处理错误信息
+        msg() {
+            return this.errorMessage || this.errMsg;
+        },
+    },
+    watch: {
+        // 规则发生变化通知子组件更新
+        'form.formRules'(val) {
+            // TODO 处理头条vue3 watch不生效的问题
+            // #ifndef MP-TOUTIAO
+            this.init();
+            // #endif
+        },
+        'form.labelWidth'(val) {
+            // 宽度
+            this.localLabelWidth = this._labelWidthUnit(val);
+        },
+        'form.labelPosition'(val) {
+            // 标签位置
+            this.localLabelPos = this._labelPosition();
+        },
+        'form.labelAlign'(val) {},
+    },
+    created() {
+        this.init(true);
+        if (this.name && this.form) {
+            // TODO 处理头条vue3 watch不生效的问题
+            // #ifdef MP-TOUTIAO
+            this.$watch('form.formRules', () => {
+                this.init();
+            });
+            // #endif
+
+            // 监听变化
+            this.$watch(
+                () => {
+                    const val = this.form._getDataValue(this.name, this.form.localData);
+                    return val;
+                },
+                (value, oldVal) => {
+                    const isEqual = this.form._isEqual(value, oldVal);
+                    // 简单判断前后值的变化，只有发生变化才会发生校验
+                    // TODO  如果 oldVal = undefined ，那么大概率是源数据里没有值导致 ，这个情况不哦校验 ,可能不严谨 ，需要在做观察
+                    // fix by mehaotian 暂时取消 && oldVal !== undefined ，如果formData 中不存在，可能会不校验
+                    if (!isEqual) {
+                        const val = this.itemSetValue(value);
+                        this.onFieldChange(val, false);
+                    }
+                },
+                {
+                    immediate: false,
+                },
+            );
+        }
+    },
+    // #ifndef VUE3
+    destroyed() {
+        if (this.__isUnmounted) return;
+        this.unInit();
+    },
+    // #endif
+    // #ifdef VUE3
+    unmounted() {
+        this.__isUnmounted = true;
+        this.unInit();
+    },
+    // #endif
+    methods: {
+        /**
+         * 外部调用方法
+         * 设置规则 ，主要用于小程序自定义检验规则
+         * @param {Array} rules 规则源数据
+         */
+        setRules(rules = null) {
+            this.userRules = rules;
+            this.init(false);
+        },
+        // 兼容老版本表单组件
+        setValue() {
+            // console.log('setValue 方法已经弃用，请使用最新版本的 uni-forms 表单组件以及其他关联组件。');
+        },
+        /**
+         * 外部调用方法
+         * 校验数据
+         * @param {any} value 需要校验的数据
+         * @param {boolean} 是否立即校验
+         * @return {Array|null} 校验内容
+         */
+        async onFieldChange(value, formtrigger = true) {
+            const { formData, localData, errShowType, validateCheck, validateTrigger, _isRequiredField, _realName } = this.form;
+            const name = _realName(this.name);
+            if (!value) {
+                value = this.form.formData[name];
+            }
+            // fixd by mehaotian 不在校验前清空信息，解决闪屏的问题
+            // this.errMsg = '';
+
+            // fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
+            const ruleLen = this.itemRules.rules && this.itemRules.rules.length;
+            if (!this.validator || !ruleLen || ruleLen === 0) return;
+
+            // 检验时机
+            // let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger);
+            const isRequiredField = _isRequiredField(this.itemRules.rules || []);
+            let result = null;
+            // 只有等于 bind 时 ，才能开启时实校验
+            if (validateTrigger === 'bind' || formtrigger) {
+                // 校验当前表单项
+                result = await this.validator.validateUpdate(
+                    {
+                        [name]: value,
+                    },
+                    formData,
+                );
+
+                // 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined  和空的情况
+                if (!isRequiredField && (value === undefined || value === '')) {
+                    result = null;
+                }
+
+                // 判断错误信息显示类型
+                if (result && result.errorMessage) {
+                    if (errShowType === 'undertext') {
+                        // 获取错误信息
+                        this.errMsg = !result ? '' : result.errorMessage;
+                    }
+                    if (errShowType === 'toast') {
+                        uni.showToast({
+                            title: result.errorMessage || '校验错误',
+                            icon: 'none',
+                        });
+                    }
+                    if (errShowType === 'modal') {
+                        uni.showModal({
+                            title: '提示',
+                            content: result.errorMessage || '校验错误',
+                        });
+                    }
+                } else {
+                    this.errMsg = '';
+                }
+                // 通知 form 组件更新事件
+                validateCheck(result ? result : null);
+            } else {
+                this.errMsg = '';
+            }
+            return result ? result : null;
+        },
+        /**
+         * 初始组件数据
+         */
+        init(type = false) {
+            const { validator, formRules, childrens, formData, localData, _realName, labelWidth, _getDataValue, _setDataValue } = this.form || {};
+            // 对齐方式
+            this.localLabelAlign = this._justifyContent();
+            // 宽度
+            this.localLabelWidth = this._labelWidthUnit(labelWidth);
+            // 标签位置
+            this.localLabelPos = this._labelPosition();
+            // 将需要校验的子组件加入form 队列
+            this.form && type && childrens.push(this);
+
+            if (!validator || !formRules) return;
+            // 判断第一个 item
+            if (!this.form.isFirstBorder) {
+                this.form.isFirstBorder = true;
+                this.isFirstBorder = true;
+            }
+
+            // 判断 group 里的第一个 item
+            if (this.group) {
+                if (!this.group.isFirstBorder) {
+                    this.group.isFirstBorder = true;
+                    this.isFirstBorder = true;
+                }
+            }
+            this.border = this.form.border;
+            // 获取子域的真实名称
+            const name = _realName(this.name);
+            const itemRule = this.userRules || this.rules;
+            if (typeof formRules === 'object' && itemRule) {
+                // 子规则替换父规则
+                formRules[name] = {
+                    rules: itemRule,
+                };
+                validator.updateSchema(formRules);
+            }
+            // 注册校验规则
+            const itemRules = formRules[name] || {};
+            this.itemRules = itemRules;
+            // 注册校验函数
+            this.validator = validator;
+            // 默认值赋予
+            this.itemSetValue(_getDataValue(this.name, localData));
+        },
+        unInit() {
+            if (this.form) {
+                const { childrens, formData, _realName } = this.form;
+                childrens.forEach((item, index) => {
+                    if (item === this) {
+                        this.form.childrens.splice(index, 1);
+                        delete formData[_realName(item.name)];
+                    }
+                });
+            }
+        },
+        // 设置item 的值
+        itemSetValue(value) {
+            const name = this.form._realName(this.name);
+            const rules = this.itemRules.rules || [];
+            const val = this.form._getValue(name, value, rules);
+            this.form._setDataValue(name, this.form.formData, val);
+            return val;
+        },
+
+        /**
+         * 移除该表单项的校验结果
+         */
+        clearValidate() {
+            this.errMsg = '';
+        },
+
+        // 是否显示星号
+        _isRequired() {
+            // TODO 不根据规则显示 星号，考虑后续兼容
+            // if (this.form) {
+            // 	if (this.form._isRequiredField(this.itemRules.rules || []) && this.required) {
+            // 		return true
+            // 	}
+            // 	return false
+            // }
+            return this.required;
+        },
+
+        // 处理对齐方式
+        _justifyContent() {
+            if (this.form) {
+                const { labelAlign } = this.form;
+                let labelAli = this.labelAlign ? this.labelAlign : labelAlign;
+                if (labelAli === 'left') return 'flex-start';
+                if (labelAli === 'center') return 'center';
+                if (labelAli === 'right') return 'flex-end';
+            }
+            return 'flex-start';
+        },
+        // 处理 label宽度单位 ,继承父元素的值
+        _labelWidthUnit(labelWidth) {
+            // if (this.form) {
+            // 	const {
+            // 		labelWidth
+            // 	} = this.form
+            return this.num2px(this.labelWidth ? this.labelWidth : labelWidth || (this.label ? 65 : 'auto'));
+            // }
+            // return '65px'
+        },
+        // 处理 label 位置
+        _labelPosition() {
+            if (this.form) return this.form.labelPosition || 'left';
+            return 'left';
+        },
+
+        /**
+         * 触发时机
+         * @param {Object} rule 当前规则内时机
+         * @param {Object} itemRlue 当前组件时机
+         * @param {Object} parentRule 父组件时机
+         */
+        isTrigger(rule, itemRlue, parentRule) {
+            //  bind  submit
+            if (rule === 'submit' || !rule) {
+                if (rule === undefined) {
+                    if (itemRlue !== 'bind') {
+                        if (!itemRlue) {
+                            return parentRule === '' ? 'bind' : 'submit';
+                        }
+                        return 'submit';
+                    }
+                    return 'bind';
+                }
+                return 'submit';
+            }
+            return 'bind';
+        },
+        num2px(num) {
+            if (typeof num === 'number') {
+                return `${num}px`;
+            }
+            return num;
+        },
+    },
+});
+</script>
+
+<style lang="scss">
+.uni-forms-item {
+    position: relative;
+    display: flex;
+    /* #ifdef APP-NVUE */
+    // 在 nvue 中，使用 margin-bottom error 信息会被隐藏
+    padding-bottom: 22px;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    margin-bottom: 22px;
+    /* #endif */
+    flex-direction: row;
+
+    &__label {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        text-align: left;
+        font-size: 14px;
+        color: #606266;
+        height: 36px;
+        padding: 0 12px 0 0;
+        /* #ifndef APP-NVUE */
+        vertical-align: middle;
+        flex-shrink: 0;
+        /* #endif */
+
+        /* #ifndef APP-NVUE */
+        box-sizing: border-box;
+
+        /* #endif */
+        &.no-label {
+            padding: 0;
+        }
+    }
+
+    &__content {
+        /* #ifndef MP-TOUTIAO */
+        // display: flex;
+        // align-items: center;
+        /* #endif */
+        position: relative;
+        font-size: 14px;
+        flex: 1;
+        /* #ifndef APP-NVUE */
+        box-sizing: border-box;
+        /* #endif */
+        flex-direction: row;
+
+        /* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
+        // TODO 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式
+        & > uni-easyinput,
+        & > uni-data-picker {
+            width: 100%;
+        }
+
+        /* #endif */
+    }
+
+    & .uni-forms-item__nuve-content {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+    }
+
+    &__error {
+        color: #f56c6c;
+        font-size: 12px;
+        line-height: 1;
+        padding-top: 4px;
+        position: absolute;
+        /* #ifndef APP-NVUE */
+        top: 100%;
+        left: 0;
+        transform: translateY(-100%);
+        /* #endif */
+        /* #ifdef APP-NVUE */
+        bottom: 5px;
+        /* #endif */
+
+        opacity: 0;
+
+        .error-text {
+            // 只有 nvue 下这个样式才生效
+            color: #f56c6c;
+            font-size: 12px;
+        }
+
+        &.msg--active {
+            opacity: 1;
+            transform: translateY(0%);
+        }
+    }
+
+    // 位置修饰样式
+    &.is-direction-left {
+        flex-direction: row;
+    }
+
+    &.is-direction-top {
+        flex-direction: column;
+
+        .uni-forms-item__label {
+            padding: 0 0 8px;
+            line-height: 1.5715;
+            text-align: left;
+            /* #ifndef APP-NVUE */
+            white-space: initial;
+            /* #endif */
+        }
+    }
+
+    .is-required {
+        // color: $uni-color-error;
+        color: #dd524d;
+        font-weight: bold;
+    }
+}
+
+.uni-forms-item--border {
+    margin-bottom: 0;
+    padding: 10px 0;
+    // padding-bottom: 0;
+    border-top: 1px #eee solid;
+
+    /* #ifndef APP-NVUE */
+    .uni-forms-item__content {
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .uni-forms-item__error {
+            position: relative;
+            top: 5px;
+            left: 0;
+            padding-top: 0;
+        }
+    }
+
+    /* #endif */
+
+    /* #ifdef APP-NVUE */
+    display: flex;
+    flex-direction: column;
+
+    .uni-forms-item__error {
+        position: relative;
+        top: 0px;
+        left: 0;
+        padding-top: 0;
+        margin-top: 5px;
+    }
+
+    /* #endif */
+}
+
+.is-first-border {
+    /* #ifndef APP-NVUE */
+    border: none;
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    border-width: 0;
+    /* #endif */
+}
+</style>

package/dist/uni-ui/uni-goods-nav/i18n/en.json

@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "shop",
+	"uni-goods-nav.options.cart": "cart",
+	"uni-goods-nav.buttonGroup.addToCart": "add to cart",
+	"uni-goods-nav.buttonGroup.buyNow": "buy now"
+}

package/dist/uni-ui/uni-goods-nav/i18n/index.js

@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}

package/dist/uni-ui/uni-goods-nav/i18n/zh-Hans.json

@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "店铺",
+	"uni-goods-nav.options.cart": "购物车",
+	"uni-goods-nav.buttonGroup.addToCart": "加入购物车",
+	"uni-goods-nav.buttonGroup.buyNow": "立即购买"
+}

package/dist/uni-ui/uni-goods-nav/i18n/zh-Hant.json

@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "店鋪",
+	"uni-goods-nav.options.cart": "購物車",
+	"uni-goods-nav.buttonGroup.addToCart": "加入購物車",
+	"uni-goods-nav.buttonGroup.buyNow": "立即購買"
+}