Merge branch 'develop' into develop

CHANGELOG.md

@@ -5,6 +5,18 @@ toc: false
 spline: explain
 ---
 
+## 🌈 1.0.5 `2023-10-03` 
+### 🚀 Features
+- `Calendar`: 日历选择器支持自动定位到选中日期 @ShinyHwong ([#1102](https://github.com/Tencent/tdesign-mobile-vue/pull/1102))
+- `Textarea`:  新增 `readonly` 属性 @anlyyao ([#1100](https://github.com/Tencent/tdesign-mobile-vue/pull/1100))
+### 🐞 Bug Fixes
+- `Sticky`: 修复组件只能针对浏览器窗口进行定位的问题 @demoadminjie ([#1103](https://github.com/Tencent/tdesign-mobile-vue/pull/1103))
+- `Cascader`: 修复 `change` 事件被触发两次和 `v-model` 没有响应式的问题 @bitjian ([#1096](https://github.com/Tencent/tdesign-mobile-vue/pull/1096))
+- `Cascader`: 修复 `title` 不存在时关闭按钮样式错位的问题 @bitjian ([#1597](https://github.com/Tencent/tdesign-common/pull/1597))
+- `Radio`: 修复 `allowUncheck` 属性无效的问题 @betavs ([#1108](https://github.com/Tencent/tdesign-mobile-vue/pull/1108))
+- `RadioGroup`: 修复 `disabled` 属性无效的问题 @anlyyao ([#1112](https://github.com/Tencent/tdesign-mobile-vue/pull/1112))
+- `Stepper`: 新增 `integer` 属性，并修复组件不支持输入小数的问题 @fennghuang ([#1113](https://github.com/Tencent/tdesign-mobile-vue/pull/1113))
+
 ## 🌈 1.0.4 `2023-09-15` 
 ### 🐞 Bug Fixes
 - `Cascader`: 修复选项卡模式中选中值不更新的问题 @fennghuang ([#1091](https://github.com/Tencent/tdesign-mobile-vue/pull/1091))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-mobile-vue",
   "purename": "tdesign",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "tdesign-mobile-vue",
   "author": "TDesign Group",
   "homepage": "https://tdesign.tencent.com/mobile-vue/",

src/cascader/cascader.vue

@@ -218,8 +218,7 @@ export default defineComponent({
         childrenInfo.value = e;
         childrenInfo.level = level;
       } else {
-        setCascaderValue(item[(keys as Ref<KeysType>).value?.value ?? 'value']);
-        props.onChange?.(
+        setCascaderValue(
           item[(keys as Ref<KeysType>).value?.value ?? 'value'],
           items.map((item, index) => toRaw(item?.[selectedIndexes[index]])),
         );

src/dropdown-menu/dropdown-menu.vue

@@ -66,8 +66,10 @@ export default defineComponent({
     // 通过 slots.default 子成员，计算标题栏选项
     const menuTitles = computed(() =>
       menuItems.value.map((item: any, index: number) => {
-        const { keys, label, value, disabled, options } = item.props;
-        const target = options?.find((item: any) => item[keys?.value ?? 'value'] === value);
+        const { keys, label, value, modelValue, defaultValue, disabled, options } = item.props;
+        const currentValue = value || modelValue || defaultValue;
+        const target = options?.find((item: any) => item[keys?.value ?? 'value'] === currentValue);
+
         if (state.itemsLabel.length < index + 1) {
           if (!label) {
             state.itemsLabel.push((target && target[keys?.label ?? 'label']) || '');
@@ -81,7 +83,7 @@ export default defineComponent({
           };
         }
         return {
-          label: menuTitles.value[index].label,
+          label: label || menuTitles.value[index].label,
           disabled: disabled !== undefined && disabled !== false,
         };
       }),

src/form/__test__/__snapshots__/demo.test.jsx.snap

@@ -1063,6 +1063,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             </div>
             <input
               class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+              inputmode="numeric"
               style=""
               type="tel"
             />
@@ -2791,6 +2792,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   </div>
                   <input
                     class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+                    inputmode="numeric"
                     style=""
                     type="tel"
                   />
@@ -4377,6 +4379,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             </div>
             <input
               class="t-stepper__input t-stepper__input--filled t-stepper__input--medium"
+              inputmode="numeric"
               style=""
               type="tel"
             />

src/message/message.vue

@@ -38,7 +38,7 @@ import {
   onMounted,
 } from 'vue';
 import { CheckCircleFilledIcon, CloseIcon, InfoCircleFilledIcon } from 'tdesign-icons-vue-next';
-import { isObject, isString } from '@vueuse/core';
+import { isObject, isString } from 'lodash';
 
 import Link from '../link';
 import messageProps from './props';

src/pull-down-refresh/__test__/utils.ts

@@ -79,7 +79,11 @@ export class MockResizeObserver {
   }
 
   disconnect() {
-    this._element.removeEventListener('resize', this.trigger);
+    // unmount后监听的元素this._element可能为null，因此先判断元素是否为null，再依据此来是否执行removeEventListener
+    if (this._element) {
+      this._element.removeEventListener('resize', this.trigger);
+    }
+    this._element = null;
   }
 
   /**

src/radio/radio-group.vue

@@ -10,6 +10,7 @@
         :disabled="'disabled' in opt ? opt.disabled : disabled"
         :value="opt[keys?.value ?? 'value']"
         :label="opt[keys?.label ?? 'label']"
+        :allow-uncheck="opt?.allowUncheck ?? allowUncheck"
         :placement="placement"
       ></radio>
     </template>

src/radio/radio.vue

@@ -66,7 +66,9 @@ export default defineComponent({
     const rootGroupValue = inject('rootGroupValue', {}) as Ref;
     const rootGroupChange = inject('rootGroupChange', NOOP) as (val: RadioValue, e: Event) => void;
 
-    const formDisabled = useFormDisabled();
+    // extend radioGroup disabled props
+    const groupDisabled = computed(() => rootGroupProps?.disabled);
+    const formDisabled = useFormDisabled(groupDisabled);
 
     const disabled = computed(() => {
       if (formDisabled.value == null && 'disabled' in rootGroupProps) return rootGroupProps.disabled;
@@ -136,8 +138,8 @@ export default defineComponent({
       if (disabled.value) {
         return;
       }
-      if (rootGroupChange !== NOOP && props.value !== undefined) {
-        rootGroupChange(props.value, e);
+      if (rootGroupChange) {
+        rootGroupChange(props.allowUncheck && radioChecked.value ? '' : props.value, e);
       } else {
         if (!props.allowUncheck && radioChecked.value) return;
         setInnerChecked(!radioChecked.value, { e });

src/radio/type.ts

@@ -153,6 +153,7 @@ export interface RadioOptionObj {
   label?: string | TNode;
   value?: string | number | boolean;
   disabled?: boolean;
+  allowUncheck?: boolean;
 }
 
 export type RadioValue = string | number | boolean;

src/shared/useVModel/index.ts

@@ -1,4 +1,5 @@
 import { ref, Ref, getCurrentInstance, ComponentInternalInstance } from 'vue';
+import kebabCase from 'lodash/kebabCase';
 
 export type ChangeHandler<T> = (value: T, ...args: any[]) => void;
 
@@ -10,12 +11,18 @@ export function useVModel<T>(
   propName = 'value',
   // emit 和 eventName 用于支持 v-model 和 xxx.sync 语法糖
 ): [Ref<T>, ChangeHandler<T>] {
-  const { emit } = getCurrentInstance() as ComponentInternalInstance;
+  const { emit, vnode } = getCurrentInstance() as ComponentInternalInstance;
   const internalValue = ref<T>() as Ref<T>;
   internalValue.value = defaultValue;
-
+  const vProps = vnode.props || {};
+  const isVM =
+    Object.prototype.hasOwnProperty.call(vProps, 'modelValue') ||
+    Object.prototype.hasOwnProperty.call(vProps, 'model-value');
+  const isVMP =
+    Object.prototype.hasOwnProperty.call(vProps, propName) ||
+    Object.prototype.hasOwnProperty.call(vProps, kebabCase(propName));
   // 受控模式 v-model:propName
-  if (typeof value.value !== 'undefined') {
+  if (isVMP || typeof value.value !== 'undefined') {
     return [
       value,
       (newValue, ...args) => {
@@ -26,7 +33,7 @@ export function useVModel<T>(
   }
 
   // 受控模式:modelValue v-model
-  if (typeof modelValue.value !== 'undefined') {
+  if (isVM || typeof modelValue.value !== 'undefined') {
     return [
       modelValue,
       (newValue, ...args) => {

src/shared/util.ts

@@ -1,4 +1,4 @@
-import { isNumber } from '@vueuse/core';
+import isNumber from 'lodash/isNumber';
 import config from '../config';
 
 const { prefix } = config;
@@ -67,3 +67,33 @@ export const reconvertUnit = (val: string | number | undefined) => {
   if (val == null) return 0;
   return isNumber(val) ? Number(val) : Number(val.slice(0, -2));
 };
+
+/**
+ * 格式化数字
+ * @param value 传入的数字字符串
+ * @param allowDecimal 是否允许小数，默认为 true
+ * @param allowNegative 是否允许负数，默认为 true
+ * @returns 返回格式化后的数字字符串
+ */
+export const formatNumber = (value: string, allowDecimal = true, allowNegative = true) => {
+  if (allowDecimal) {
+    const index = value.indexOf('.');
+    if (index !== -1) {
+      value = `${value.slice(0, index + 1)}${value.slice(index).replace(/\./g, '')}`;
+    }
+  } else {
+    const [splitValue = ''] = value.split('.');
+    value = splitValue;
+  }
+
+  if (allowNegative) {
+    const index = value.indexOf('-');
+    if (index !== -1) {
+      value = `${value.slice(0, index + 1)}${value.slice(index).replace(/-/g, '')}`;
+    }
+  } else {
+    value = value.replace(/-/g, '');
+  }
+
+  return value.replace(/[^\d.-]/g, '');
+};