fix: multiple trigger support in comment component at any position 🦊

package.json

@@ -5,32 +5,32 @@
     "prepare": "husky install",
     "precommit": "lint-staged",
     "scripts": "better-scripts",
-    "dev": "pnpm scripts run dev",
-    "dev:site": "pnpm scripts run dev:site",
-    "build": "pnpm scripts run build",
-    "build:lib": "pnpm scripts run build:lib",
-    "build:lib:theme": "pnpm scripts run build:lib:theme",
-    "test": "pnpm scripts run tests.test"
+    "dev": "pnpm --filter vue-devui dev",
+    "dev:site": "pnpm --filter vue-devui dev:site",
+    "build": "pnpm --filter vue-devui build",
+    "build:lib": "pnpm --filter vue-devui build:lib",
+    "build:lib:theme": "pnpm --filter vue-devui build:lib:theme",
+    "test": "pnpm --filter vue-devui tests.test"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
-    "@ls-lint/ls-lint": "^1.10.0",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^16.11.6",
-    "all-contributors-cli": "^6.20.0",
-    "better-scripts": "^0.1.1",
+    "@ls-lint/ls-lint": "^1.11.2",
+    "@types/lodash": "^4.17.4",
+    "@types/node": "^16.18.97",
+    "all-contributors-cli": "^6.26.1",
+    "better-scripts": "^0.1.4",
     "esbuild-register": "^2.6.0",
-    "eslint": "^7.28.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-vue": "^7.11.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-vue": "^7.20.0",
     "husky": "^7.0.4",
     "intersection-observer": "^0.12.2",
-    "lint-staged": "^11.0.0",
+    "lint-staged": "^11.2.6",
     "npm-run-all": "^4.1.5",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended-scss": "^4.3.0",
     "stylelint-config-standard": "^22.0.0",
-    "stylelint-scss": "^3.20.1"
+    "stylelint-scss": "^3.21.0"
   },
   "lint-staged": {
     "packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx}": "eslint --fix",

packages/devui-vue/devui/action-timeline/src/action-timeline.tsx

@@ -48,10 +48,10 @@ export default defineComponent({
         <div class={timelineItemClass(index, parentIndex, actionData, item)}>
           <div class="vertical-list-item-top">
             <div class="vertical-list-item-top-left">
-              <div class={itemIconClass(item, true)}>
+              {ctx.slots.iconContent?.({ option: item }) || <div class={itemIconClass(item, true)}>
                 {!item.icon && <div class="list-empty-icon-dot"></div>}
                 <em class={itemIconClass(item)}></em>
-              </div>
+              </div>}
               <div class="vertical-list-item-top-left-title">{ctx.slots.title?.({ option: item })}</div>
             </div>
             <div class="dp-action-timeline-item-data">{item.createdAt}</div>
@@ -62,10 +62,10 @@ export default defineComponent({
     const renderHorizontalBody = (actionData: ActionData, parentIndex: number) =>
       actionData.actions?.map((item, index) => (
         <div class={timelineItemClass(index, parentIndex, actionData, item)}>
-          <div class={itemIconClass(item, true)}>
+          {ctx.slots.iconContent?.({ option: item }) || <div class={itemIconClass(item, true)}>
             {!item.icon && <div class="list-empty-icon-dot"></div>}
             <em class={itemIconClass(item)}></em>
-          </div>
+          </div>}
           <div class="dp-action-timeline-list-data">{ctx.slots.content?.({ option: item })}</div>
           <div class="dp-action-timeline-item-date">{item.createdAt}</div>
           {!(actionData.actions && data?.value && index === actionData.actions.length - 1 && parentIndex === data?.value?.length - 1) && (

packages/devui-vue/devui/breadcrumb/src/utils.ts

@@ -1,3 +1,3 @@
-export const getPropsSlot = (slots, props, prop = 'default') => {
+export const getPropsSlot = (slots: any, props: any, prop = 'default') => {
   return props[prop] ?? slots[prop]?.();
 };

packages/devui-vue/devui/category-search/src/components/text-input-menu.tsx

@@ -28,6 +28,7 @@ export default defineComponent({
 					<d-input
 						v-model={formData.text}
 						autocomplete='off'
+						autofocus
 						maxlength={tag.value.maxLength}
 						placeholder={tag.value.placeholder || ''}></d-input>
 				</d-form-item>

packages/devui-vue/devui/category-search/src/composables/use-category-search.ts

@@ -1,6 +1,6 @@
 import { ref, computed, toRefs, provide, watch, onMounted, reactive } from 'vue';
 import type { Ref, SetupContext } from 'vue';
-import { mergeWith, cloneDeep, merge } from 'lodash-es';
+import { mergeWith, cloneDeep, merge } from 'lodash';
 import RadioMenu from '../components/radio-menu';
 import CheckboxMenu from '../components/checkbox-menu';
 import LabelMenu from '../components/label-menu';

packages/devui-vue/devui/editor-md/src/components/toolbar.tsx

@@ -6,20 +6,20 @@ import './toolbar.scss';
 export default defineComponent({
   name: 'DMdToolbar',
   setup() {
-    const { toolbars, toolbarConfig } = useToolbar();
-
+    const { toolbars, toolbarConfig, customToolbars } = useToolbar();
+    const tempToolbars = { ...toolbars, ...customToolbars?.value };
     return () => (
       <div class="md-toolbar-container">
         {toolbarConfig.value.map((item, index) =>
           Array.isArray(item) ? (
             <>
               {item.map((key, idx) => (
-                <ToolbarItem config={toolbars[key]} key={`${index}-${idx}`} />
+                <ToolbarItem config={tempToolbars[key]} key={`${index}-${idx}`} />
               ))}
               <span class="md-toolbar-span"></span>
             </>
           ) : (
-            <ToolbarItem config={toolbars[item]} key={index} />
+            <ToolbarItem config={tempToolbars[item]} key={index} />
           )
         )}
       </div>

packages/devui-vue/devui/editor-md/src/composables/use-editor-md-toolbar.ts

@@ -2,7 +2,7 @@ import { inject } from 'vue';
 import { EditorMdInjectionKey, IEditorMdInjection } from '../editor-md-types';
 
 export function useToolbar() {
-  const { toolbars, toolbarConfig } = inject(EditorMdInjectionKey) as IEditorMdInjection;
+  const { toolbars, toolbarConfig, customToolbars } = inject(EditorMdInjectionKey) as IEditorMdInjection;
 
-  return { toolbars, toolbarConfig };
+  return { toolbars, toolbarConfig, customToolbars };
 }

packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts

@@ -414,8 +414,10 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) {
     renderRef,
     containerRef,
     toolbars,
+    toolbarConfig,
     previewHtmlList,
     isHintShow,
+    customToolbars,
     getEditorIns,
     onPaste,
     previewContentChange,

packages/devui-vue/devui/editor-md/src/editor-md-types.ts

@@ -136,6 +136,7 @@ export interface IEditorMdInjection {
   showFullscreen: Ref<boolean>;
   toolbars: Record<string, IToolbarItemConfig>;
   toolbarConfig: Ref<ToolbarConfigProp>;
+  customToolbars: Ref<Record<string, IToolbarItemConfig> | undefined> | undefined;
   getEditorIns: () => any;
   t: (name: string) => string;
 }

packages/devui-vue/devui/editor-md/src/editor-md.tsx

@@ -17,6 +17,7 @@ export default defineComponent({
     const {
       mode,
       toolbarConfig,
+      customToolbars,
       editorContainerHeight,
       hidePreviewView,
       placeholder,
@@ -66,6 +67,7 @@ export default defineComponent({
       showFullscreen,
       toolbars,
       toolbarConfig,
+      customToolbars,
       getEditorIns,
       t: locale,
     });

packages/devui-vue/devui/editor-md/src/utils.ts

@@ -84,5 +84,5 @@ export function locale(key: string): string {
     loading: '正在加载中...',
     pasting: '您粘贴内容较多, 正在努力加载中，请耐心等待...',
   };
-  return localeMap[key];
+  return localeMap[key] || key;
 }

packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx

@@ -279,3 +279,20 @@ describe('d-input-number', () => {
     expect(selectFn).toBeCalledTimes(2);
   });
 });
+
+
+it('allowEmpty', async () => {
+  const num = ref();
+  const wrapper = mount({
+    setup() {
+      return () => <DInputNumber v-model={num.value} allowEmpty={true} ></DInputNumber>;
+    },
+  });
+  num.value = undefined;
+  const inputInner = wrapper.find(ns.e('input-box'));
+  expect((inputInner.element as HTMLInputElement).value).toBeNull;
+  num.value = 51;
+  expect((inputInner.element as HTMLInputElement).value).toBe('51');
+  num.value = '';
+  expect((inputInner.element as HTMLInputElement).value).toBeNull;
+});

packages/devui-vue/devui/input-number/index.ts

@@ -8,6 +8,6 @@ export default {
   category: '数据录入',
   status: '50%',
   install(app: App): void {
-    app.component(InputNumber.name, InputNumber);
+    app.component(InputNumber.name as string, InputNumber);
   }
 };

packages/devui-vue/devui/input-number/src/input-number-types.ts

@@ -3,6 +3,9 @@ import type { PropType, ExtractPropTypes, ComputedRef, Ref, CSSProperties, Input
 export type ISize = 'lg' | 'md' | 'sm';
 
 export const inputNumberProps = {
+  modelValue: {
+    type: [Number, String] as PropType<number | string | null | undefined>,
+  },
   placeholder: {
     type: String,
   },
@@ -25,9 +28,6 @@ export const inputNumberProps = {
   size: {
     type: String as PropType<ISize>,
   },
-  modelValue: {
-    type: Number,
-  },
   precision: {
     type: Number,
   },
@@ -39,13 +39,17 @@ export const inputNumberProps = {
     type: Boolean,
     default: true,
   },
+  allowEmpty: {
+    type: Boolean,
+    default: false,
+  }
 } as const;
 
 export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>;
 
 export interface IState {
-  currentValue: number | string | undefined;
-  userInputValue: number | string | undefined;
+  currentValue: number | string | undefined | null;
+  userInputValue: number | string | undefined | null;
 }
 
 export interface UseExpose {
@@ -62,7 +66,7 @@ export interface UseRender {
 }
 
 export interface UseEvent {
-  inputVal: ComputedRef<number | string | undefined>;
+  inputVal: ComputedRef<number | string | undefined | null>;
   minDisabled: ComputedRef<boolean>;
   maxDisabled: ComputedRef<boolean>;
   onAdd: () => void;

packages/devui-vue/devui/input-number/src/use-input-number.ts

@@ -1,17 +1,16 @@
-import { computed, reactive, toRefs, watch, ref, inject } from 'vue';
+import { computed, reactive, toRefs, watch, ref, inject, InjectionKey } from 'vue';
 import type { SetupContext, Ref, CSSProperties } from 'vue';
 import { InputNumberProps, UseEvent, UseRender, IState, UseExpose } from './input-number-types';
 import { useNamespace } from '../../shared/hooks/use-namespace';
 import { isNumber, isUndefined } from '../../shared/utils';
-import { FORM_TOKEN } from '../../form';
+import { FORM_TOKEN, type FormProps } from '../../form';
 
 const ns = useNamespace('input-number');
 
 export function useRender(props: InputNumberProps, ctx: SetupContext): UseRender {
-  const formContext = inject(FORM_TOKEN, undefined);
+  const formContext: FormProps | undefined | any = inject(FORM_TOKEN, undefined); // 修复ts语法错误组件不被d-from组件引用时，formContext未被定义
   const { style, class: customClass, ...otherAttrs } = ctx.attrs;
   const customStyle = { style: style as CSSProperties };
-
   const inputNumberSize = computed(() => props.size || formContext?.size || 'md');
 
   const wrapClass = computed(() => [
@@ -56,12 +55,12 @@ export function useExpose(ctx: SetupContext): UseExpose {
   return { inputRef };
 }
 
-function getPrecision(pre: number | undefined): number {
+function getPrecision(pre: string | number | undefined | null): number {
   let precision = 0;
   if (isUndefined(pre)) {
     return precision;
   }
-  const preString = pre.toString();
+  const preString = (pre as string).toString();
   const dotIndex = preString.indexOf('.');
   if (dotIndex !== -1) {
     precision = preString.length - dotIndex - 1;
@@ -89,8 +88,8 @@ export function useEvent(props: InputNumberProps, ctx: SetupContext, inputRef: R
       return state.userInputValue;
     }
     let currentValue = state.currentValue;
-    if (currentValue === '' || isUndefined(currentValue) || Number.isNaN(currentValue)) {
-      return '';
+    if (!currentValue && currentValue !== 0) {
+      return null;
     }
     if (isNumber(currentValue)) {
       // todo 小数精度 确认是否应该以正则处理
@@ -111,17 +110,16 @@ export function useEvent(props: InputNumberProps, ctx: SetupContext, inputRef: R
   };
 
   const correctValue = (value: number | string | undefined | null) => {
+    if ((!value && value !== 0) && props.allowEmpty) { // 当用户开始允许空值时 value不为0的false全返回null(即'',null,undefined,NaN都会反回null设计与dev_ui_ag版本一致)
+      return null;
+    }
     // 校验正则
     const valueStr = value + '';
     if (props.reg && !valueStr.match(new RegExp(props.reg))) {
       return undefined;
     }
 
     let newVal = Number(value);
-    // 不是0 是假值或者是NaN返回undefined
-    if (newVal !== 0 && (!Number(value) || Number.isNaN(newVal))) {
-      return undefined;
-    }
 
     // 精度限制存在才做转换
     if (!isUndefined(props.precision)) {
@@ -135,14 +133,14 @@ export function useEvent(props: InputNumberProps, ctx: SetupContext, inputRef: R
     return newVal;
   };
 
-  const setCurrentValue = (value: number | string | undefined) => {
+  const setCurrentValue = (value: number | string | undefined | null) => {
     const oldVal = state.currentValue;
     const newVal = correctValue(value);
 
     state.userInputValue = undefined;
 
-    // 0 可以被更新
-    if (newVal !== 0 && !newVal) {
+    // 0 和 '' 可以被更新
+    if (newVal !== 0 && newVal !== null && !newVal) {
       ctx.emit('update:modelValue', oldVal);
       return;
     }