@didaoktv/didaoui-uniapp 1.0.0 → 1.2.0

package/components/dd-keyboard/dd-keyboard.vue

@@ -0,0 +1,178 @@
+<template>
+	<!-- dd-popup 用 v-model+position；show prop 经 popupShow 透传，收起时仅抛 close 由父级置 false -->
+	<dd-popup
+	    v-model="popupShow"
+	    :overlay="overlay"
+	    :close-on-click-overlay="closeOnClickOverlay"
+	    position="bottom"
+	    :safe-area-inset-bottom="safeAreaInsetBottom"
+	    @close="popupClose"
+	    :z-index="zIndex"
+	>
+	<view class="dd-keyboard">
+			<slot />
+			<view
+			    class="dd-keyboard__tooltip"
+			    v-if="tooltip"
+			>
+				<view
+			    hover-class="dd-keyboard-hover"
+			    :hover-stay-time="100"
+			>
+				<text
+				    class="dd-keyboard__tooltip__item dd-keyboard__tooltip__cancel"
+				    v-if="showCancel"
+				    @tap="onCancel"
+				>{{showCancel && cancelText}}</text>
+			</view>
+			<view>
+				<text
+				    v-if="showTips"
+				    class="dd-keyboard__tooltip__item dd-keyboard__tooltip__tips"
+				>{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}</text>
+			</view>
+			<view
+			    hover-class="dd-keyboard-hover"
+			    :hover-stay-time="100"
+			>
+				<text
+				    v-if="showConfirm"
+				    @tap="onConfirm"
+				    class="dd-keyboard__tooltip__item dd-keyboard__tooltip__submit"
+				>{{showConfirm && confirmText}}</text>
+			</view>
+			</view>
+			<template v-if="mode == 'number' || mode == 'card'">
+				<dd-number-keyboard
+			    :random="random"
+			    @backspace="backspace"
+			    @change="change"
+			    :mode="mode"
+			    :dotDisabled="dotDisabled"
+			></dd-number-keyboard>
+			</template>
+			<template v-else>
+				<dd-car-keyboard
+			    :random="random"
+			    :autoChange="autoChange"
+			    @backspace="backspace"
+			    @change="change"
+			></dd-car-keyboard>
+		</template>
+	</view>
+	</dd-popup>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+
+	/**
+	 * keyboard 键盘
+	 * @description 自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
+	 * @property {String}			mode				键盘类型，见官网基本使用的说明 （默认 'number' ）
+	 * @property {Boolean}			dotDisabled			是否显示"."按键，只在mode=number时有效 （默认 false ）
+	 * @property {Boolean}			tooltip				是否显示键盘顶部工具条 （默认 true ）
+	 * @property {Boolean}			showTips			是否显示工具条中间的提示 （默认 true ）
+	 * @property {String}			tips				工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
+	 * @property {Boolean}			showCancel			是否显示工具条左边的"取消"按钮 （默认 true ）
+	 * @property {Boolean}			showConfirm			是否显示工具条右边的"完成"按钮（ 默认 true ）
+	 * @property {Boolean}			random				是否打乱键盘按键的顺序 （默认 false ）
+	 * @property {Boolean}			safeAreaInsetBottom	是否开启底部安全区适配 （默认 true ）
+	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩收起键盘 （默认 true ）
+	 * @property {Boolean}			show				控制键盘的弹出与收起（默认 false ）
+	 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
+	 * @property {String | Number}	zIndex				弹出键盘的z-index值 （默认 1075 ）
+	 * @property {String}			cancelText			取消按钮的文字 （默认 '取消' ）
+	 * @property {String}			confirmText			确认按钮的文字 （默认 '确认' ）
+	 * @property {Object}			customStyle			自定义样式，对象形式
+	 * @event {Function} change 按键被点击(不包含退格键被点击)
+	 * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
+	 * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
+	 * @event {Function} backspace 键盘退格键被点击
+	 * @example <dd-keyboard mode="number" v-model="show"></dd-keyboard>
+	 */
+	export default {
+		name: "dd-keyboard",
+		data() {
+			return {
+
+			}
+		},
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			// ponytail: 剥离运行时主题；面板底色由 dd-popup（$dd-bg-elevated）承担
+			popupShow: {
+				get() {
+					return this.show;
+				},
+				set(val) {
+					if (!val) this.$emit('close');
+				}
+			}
+		},
+		emits: ["change", "close", "confirm", "cancel", "backspace"],
+		methods: {
+			change(e) {
+				this.$emit('change', e);
+			},
+			// 键盘关闭
+			popupClose() {
+				this.$emit('close');
+			},
+			// 输入完成
+			onConfirm() {
+				this.$emit('confirm');
+			},
+			// 取消输入
+			onCancel() {
+				this.$emit('cancel');
+			},
+			// 退格键
+			backspace() {
+				this.$emit('backspace');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/dd-shared';
+
+	.dd-keyboard {
+		// 工具条按钮点击反馈（text 不支持 hover-class，由外层 view 承担）
+		.dd-keyboard-hover {
+			opacity: 0.7;
+		}
+
+		&__tooltip {
+			@include flex;
+			justify-content: space-between;
+			background-color: $dd-bg-elevated;
+			padding: 14px 12px;
+
+			&__item {
+				color: $dd-text-primary;
+				flex: 1;
+				text-align: center;
+				font-size: 15px;
+			}
+
+			&__submit {
+				text-align: right;
+				color: $dd-primary-400;
+			}
+
+			&__cancel {
+				text-align: left;
+				color: $dd-text-tertiary;
+			}
+
+			&__tips {
+				color: $dd-text-tertiary;
+			}
+		}
+	}
+</style>

package/components/dd-keyboard/keyboard.js

@@ -0,0 +1,22 @@
+import { t } from '../../libs/i18n'
+export default {
+    // 键盘组件
+    keyboard: {
+        mode: 'number',
+        dotDisabled: false,
+        tooltip: true,
+        showTips: true,
+        tips: '',
+        showCancel: true,
+        showConfirm: true,
+        random: false,
+        safeAreaInsetBottom: true,
+        closeOnClickOverlay: true,
+        show: false,
+        overlay: true,
+        zIndex: 10075,
+        cancelText: t("dd.common.cancel"),
+        confirmText: t("dd.common.confirm"),
+        autoChange: false
+    }
+}

package/components/dd-keyboard/props.js

@@ -0,0 +1,89 @@
+import { defineMixin } from '../../libs/vue'
+import KeyboardDefaultProps from './keyboard'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(KeyboardDefaultProps)
+export const props = defineMixin({
+    props: {
+        // 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘
+        mode: {
+            type: String,
+            default: () => defProps.keyboard.mode
+        },
+        // 是否显示键盘的"."符号
+        dotDisabled: {
+            type: Boolean,
+            default: () => defProps.keyboard.dotDisabled
+        },
+        // 是否显示顶部工具条
+        tooltip: {
+            type: Boolean,
+            default: () => defProps.keyboard.tooltip
+        },
+        // 是否显示工具条中间的提示
+        showTips: {
+            type: Boolean,
+            default: () => defProps.keyboard.showTips
+        },
+        // 工具条中间的提示文字
+        tips: {
+            type: String,
+            default: () => defProps.keyboard.tips
+        },
+        // 是否显示工具条左边的"取消"按钮
+        showCancel: {
+            type: Boolean,
+            default: () => defProps.keyboard.showCancel
+        },
+        // 是否显示工具条右边的"完成"按钮
+        showConfirm: {
+            type: Boolean,
+            default: () => defProps.keyboard.showConfirm
+        },
+        // 是否打乱键盘按键的顺序
+        random: {
+            type: Boolean,
+            default: () => defProps.keyboard.random
+        },
+        // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+        safeAreaInsetBottom: {
+            type: Boolean,
+            default: () => defProps.keyboard.safeAreaInsetBottom
+        },
+        // 是否允许通过点击遮罩关闭键盘
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: () => defProps.keyboard.closeOnClickOverlay
+        },
+        // 控制键盘的弹出与收起
+        show: {
+            type: Boolean,
+            default: () => defProps.keyboard.show
+        },
+        // 是否显示遮罩，某些时候数字键盘时，用户希望看到自己的数值，所以可能不想要遮罩
+        overlay: {
+            type: Boolean,
+            default: () => defProps.keyboard.overlay
+        },
+        // z-index值
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.keyboard.zIndex
+        },
+        // 取消按钮的文字
+        cancelText: {
+            type: String,
+            default: () => defProps.keyboard.cancelText
+        },
+        // 确认按钮的文字
+        confirmText: {
+            type: String,
+            default: () => defProps.keyboard.confirmText
+        },
+        // 输入一个中文后，是否自动切换到英文
+        autoChange: {
+            type: Boolean,
+            default: () => defProps.keyboard.autoChange
+        }
+    }
+})

package/components/dd-link/dd-link.vue

@@ -0,0 +1,87 @@
+<template>
+	<text
+	    class="dd-link"
+	    @tap.stop="openLink"
+	    :style="[linkStyle, addStyle(customStyle)]"
+	>{{text}}</text>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle, addUnit, getPx, toast } from '../../libs/function/index';
+	/**
+	 * link 超链接
+	 * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
+	 * @property {String}			color		文字颜色 （默认 color['primary'] ）
+	 * @property {String ｜ Number}	fontSize	字体大小，单位px （默认 15 ）
+	 * @property {Boolean}			underLine	是否显示下划线 （默认 false ）
+	 * @property {String}			href		跳转的链接，要带上http(s)
+	 * @property {String}			mpTips		各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
+	 * @property {String}			lineColor	下划线颜色，默认同color参数颜色
+	 * @property {String}			text		超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 *
+	 * @example <dd-link href="https://didaoktv.com">蜀道难，难于上青天</dd-link>
+	 */
+	export default {
+		name: "dd-link",
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			linkStyle() {
+				const style = {
+					color: this.color,
+					fontSize: addUnit(this.fontSize),
+					// line-height设置为比字体大小多2px
+					lineHeight: addUnit(getPx(this.fontSize) + 2),
+					textDecoration: this.underLine ? 'underline' : 'none'
+				}
+				// if (this.underLine) {
+				// 	style.borderBottomColor = this.lineColor || this.color
+				// 	style.borderBottomWidth = '1px'
+				// }
+				return style
+			}
+		},
+		emits: ["click"],
+		methods: {
+			addStyle,
+			openLink() {
+				// #ifdef APP-PLUS
+				plus.runtime.openURL(this.href)
+				// #endif
+				// #ifdef H5
+				window.open(this.href)
+				// #endif
+				// #ifdef MP
+				uni.setClipboardData({
+					data: this.href,
+					success: () => {
+						uni.hideToast();
+						this.$nextTick(() => {
+							toast(this.mpTips);
+						})
+					}
+				});
+				// #endif
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/dd-shared';
+	$dd-link-line-height:1 !default;
+
+	.dd-link {
+		/* #ifndef APP-NVUE */
+		line-height: $dd-link-line-height;
+		/* #endif */
+		@include flex;
+		flex-wrap: wrap;
+		flex: 1;
+	}
+</style>

package/components/dd-link/link.js

@@ -0,0 +1,18 @@
+import config from '../../libs/config/config'
+import { t } from '../../libs/i18n'
+
+const {
+    color
+} = config
+export default {
+    // link超链接组件props参数
+    link: {
+        color: color['primary'],
+        fontSize: 15,
+        underLine: false,
+        href: '',
+        mpTips: t("dd.link.copyed"),
+        lineColor: '',
+        text: ''
+    }
+}

package/components/dd-link/props.js

@@ -0,0 +1,44 @@
+import { defineMixin } from '../../libs/vue'
+import LinkDefaultProps from './link'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(LinkDefaultProps)
+export const props = defineMixin({
+    props: {
+        // 文字颜色
+        color: {
+            type: String,
+            default: () => defProps.link.color
+        },
+        // 字体大小，单位px
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.link.fontSize
+        },
+        // 是否显示下划线
+        underLine: {
+            type: Boolean,
+            default: () => defProps.link.underLine
+        },
+        // 要跳转的链接
+        href: {
+            type: String,
+            default: () => defProps.link.href
+        },
+        // 小程序中复制到粘贴板的提示语
+        mpTips: {
+            type: String,
+            default: () => defProps.link.mpTips
+        },
+        // 下划线颜色
+        lineColor: {
+            type: String,
+            default: () => defProps.link.lineColor
+        },
+        // 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色
+        text: {
+            type: String,
+            default: () => defProps.link.text
+        }
+    }
+})

package/components/dd-list-cell/dd-list-cell.vue

@@ -71,7 +71,7 @@ function onClick(e: Event) {
   display: flex;
   flex-direction: row;
   align-items: center;
-  min-height: 96rpx;
+  min-height: $dd-space-7;
   padding: 0 $dd-space-4;
   box-sizing: border-box;
   background: $dd-bg-elevated;
@@ -88,7 +88,7 @@ function onClick(e: Event) {
   }
 
   &__icon-text {
-    font-size: 40rpx;
+    font-size: $dd-font-size-h2;
     line-height: 1;
     color: $dd-primary-400;
   }
@@ -98,7 +98,7 @@ function onClick(e: Event) {
     min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: 4rpx;
+    gap: $dd-space-1;
   }
 
   &__title {
@@ -129,7 +129,7 @@ function onClick(e: Event) {
   }
 
   &__arrow {
-    font-size: 36rpx;
+    font-size: $dd-font-size-h3;
     color: $dd-text-tertiary;
     line-height: 1;
     margin-left: $dd-space-1;

package/components/dd-loading/dd-loading.vue

@@ -80,7 +80,7 @@ const coreStyle = computed(() => (props.color ? { '--dd-loading-color': props.co
   &__mask {
     position: absolute;
     inset: 0;
-    background: rgba(0, 0, 0, 0.6);
+    background: $dd-color-overlay-strong;
     /* #ifdef H5 */
     backdrop-filter: blur(8rpx);
     -webkit-backdrop-filter: blur(8rpx);

package/components/dd-loadmore/dd-loadmore.vue

@@ -130,14 +130,14 @@ function onClick() {
   }
 
   &__spinner {
-    border: 4rpx solid $dd-border-default;
+    border: $dd-space-1 solid $dd-border-default;
     border-radius: 50%;
     box-sizing: border-box;
     animation: dd-lm-spin 0.8s linear infinite;
   }
 
   &__text {
-    line-height: 1.5;
+    line-height: $dd-line-height-caption;
   }
 
   &__dot {