Support to clear date range by shortcut

Author: sheepzh

package.json

@@ -27,13 +27,13 @@
         "@babel/plugin-transform-modules-commonjs": "^7.25.9",
         "@babel/preset-env": "^7.26.0",
         "@crowdin/crowdin-api-client": "^1.39.1",
-        "@types/chrome": "0.0.284",
+        "@types/chrome": "0.0.287",
         "@types/copy-webpack-plugin": "^10.1.3",
         "@types/decompress": "^4.2.7",
         "@types/echarts": "^4.9.22",
         "@types/generate-json-webpack-plugin": "^0.3.7",
         "@types/jest": "^29.5.14",
-        "@types/node": "^22.9.3",
+        "@types/node": "^22.10.1",
         "@types/psl": "^1.1.3",
         "@types/punycode": "^2.1.4",
         "@types/webpack": "^5.28.5",
@@ -43,7 +43,7 @@
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
         "decompress": "^4.2.1",
-        "eslint": "^9.15.0",
+        "eslint": "^9.16.0",
         "filemanager-webpack-plugin": "^8.0.0",
         "generate-json-webpack-plugin": "^2.0.0",
         "html-webpack-plugin": "^5.6.3",
@@ -69,10 +69,10 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
-        "@vueuse/core": "^11.3.0",
+        "@vueuse/core": "^12.0.0",
         "countup.js": "^2.8.0",
         "echarts": "^5.5.1",
-        "element-plus": "2.8.8",
+        "element-plus": "2.9.0",
         "js-base64": "^3.7.7",
         "punycode": "^2.3.1",
         "stream-browserify": "^3.0.0",

src/app/components/Report/ReportFilter/RemoteClient.tsx

@@ -10,7 +10,7 @@ import { UploadFilled } from "@element-plus/icons-vue"
 import { useRequest } from "@hooks"
 import statService from "@service/stat-service"
 import { ElButton, ElIcon, ElTooltip } from "element-plus"
-import { defineComponent, ref, watch, computed } from "vue"
+import { computed, defineComponent, ref, watch } from "vue"
 
 const _default = defineComponent({
     emits: {

src/app/components/common/DateRangeFilterItem.tsx

@@ -5,12 +5,18 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { t } from "@app/locale"
 import { EL_DATE_FORMAT } from "@i18n/element"
 import { ElementDatePickerShortcut } from "@src/element-ui/date"
 import { getDatePickerIconSlots } from "@src/element-ui/rtl"
 import { ElDatePicker } from "element-plus"
 import { defineComponent, PropType, ref, Ref } from "vue"
 
+const clearShortcut = (): ElementDatePickerShortcut => ({
+    text: t(msg => msg.button.clear),
+    value: [new Date(0), new Date(0)],
+})
+
 const _default = defineComponent({
     props: {
         defaultRange: Object as PropType<[Date, Date]>,
@@ -27,6 +33,18 @@ const _default = defineComponent({
         change: (_value: [Date, Date]) => true
     },
     setup(props, ctx) {
+        const handleChange = (newVal: [Date, Date]) => {
+            const [start, end] = newVal || []
+            const isClearChosen = start?.getTime?.() === 0 && end?.getTime?.() === 0
+            if (isClearChosen) newVal = null
+            ctx.emit("change", dateRange.value = newVal)
+        }
+        const shortcuts = () => {
+            const { shortcuts: value, clearable } = props
+            if (!value?.length || !clearable) return value
+            return [...value, clearShortcut()]
+        }
+
         const dateRange: Ref<[Date, Date]> = ref(props.defaultRange || [undefined, undefined])
         return () => <span class="filter-item">
             <ElDatePicker
@@ -35,8 +53,8 @@ const _default = defineComponent({
                 type="daterange"
                 rangeSeparator="-"
                 disabledDate={props.disabledDate}
-                shortcuts={props.shortcuts}
-                onUpdate:modelValue={(newVal: [Date, Date]) => ctx.emit("change", dateRange.value = newVal)}
+                shortcuts={shortcuts()}
+                onUpdate:modelValue={(newVal: [Date, Date]) => handleChange(newVal)}
                 startPlaceholder={props.startPlaceholder}
                 endPlaceholder={props.endPlaceholder}
                 clearable={props.clearable}

src/i18n/message/common/button-resource.json

@@ -12,7 +12,8 @@
         "next": "Next",
         "okey": "OK",
         "dont": "NO!",
-        "operation": "Operations"
+        "operation": "Operations",
+        "clear": "Clear"
     },
     "zh_CN": {
         "create": "新增",
@@ -27,7 +28,8 @@
         "next": "下一步",
         "okey": "好的",
         "dont": "不用了",
-        "operation": "操作"
+        "operation": "操作",
+        "clear": "清除"
     },
     "zh_TW": {
         "create": "新增",

src/i18n/message/common/button.ts

@@ -20,6 +20,7 @@ export type ButtonMessage = {
     okey: string
     dont: string
     operation: string
+    clear: string
 }
 
 const _default: Messages<ButtonMessage> = resource