Merge pull request #113 from sheepzh/ele

Upgrade element-plus to v2.x.x

Author: sheepzh

package.json

@@ -51,7 +51,7 @@
     "clipboardy": "^3.0.0",
     "countup.js": "^2.2.0",
     "echarts": "^5.3.3",
-    "element-plus": "1.2.0-beta.6",
+    "element-plus": "2.2.6",
     "psl": "^1.8.0",
     "vue": "^3.2.37",
     "vue-router": "^4.0.16"

src/app/components/common/date-range-filter-item.ts

@@ -26,6 +26,7 @@ const _default = defineComponent({
     setup(props, ctx) {
         // @ts-ignore
         const dateRange: Ref<Date[]> = ref(props.defaultRange || [undefined, undefined])
+        // @ts-ignore
         return () => h('span', { class: 'filter-item' }, h(ElDatePicker,
             {
                 modelValue: dateRange.value,

src/app/components/common/editable-tag.sass

@@ -6,8 +6,19 @@
  */
 
 .el-tag
+    height: 32px
     margin-right: 10px
 
+.editable-tag-container
+    // offset right margin from the rightmost child 
+    margin-right: -10px
+    display: flex
+    flex-flow: row wrap
+    justify-content: space-between
+    .item-input-container,.item-add-button
+        // The last line left 
+        margin-right: auto
+
 .item-cancel-button
     border-right: 0.5px
     border-radius: 0
@@ -17,24 +28,23 @@
     margin-left: 0px !important
     margin-right: 10px
 .item-check-button,.item-cancel-button,.item-add-button
-    height: 30px
+    height: 32px
     line-height: 30px
 .item-add-button
     padding: 0 15px
 .item-check-button,.item-cancel-button
     padding: 0 10px
 
-.input-new-tag
-    width: 140px
-    input
-        height: 32px
-
 .item-input-container
-    display: inline-block
+    display: inline-flex
+    .el-input__wrapper
+        height: 30px
+        width: 140px
 
 .editable-item
     margin-bottom: 9px
     line-height: 32px !important
+    display: inline-flex
 
     .edit-icon
         height: 14px

src/app/components/common/popup-confirm-button.ts

@@ -36,7 +36,7 @@ const _default = defineComponent({
             onConfirm: () => ctx.emit("confirm")
         }, {
             reference: () => h(ElButton, {
-                size: "mini",
+                size: 'small',
                 type: props.buttonType,
                 icon: props.buttonIcon,
                 style: {

src/app/components/common/switch-filter-item.ts

@@ -21,7 +21,7 @@ const _default = defineComponent({
     emits: ["change"],
     setup(props, ctx) {
         const modelValue: Ref<boolean> = ref(props.defaultValue)
-        return () => h("span", {}, [
+        return () => h("span", { class: "filter-switch" }, [
             h('a', { class: 'filter-name' }, props.label),
             h(ElSwitch, {
                 class: 'filter-item',

src/app/components/dashboard/feedback.ts

@@ -28,7 +28,7 @@ const _default = defineComponent({
         effect: Effect.LIGHT,
     }, () => h(ElButton, {
         type: "info",
-        size: "mini",
+        size: 'small',
         icon: Headset,
         round: true,
         onClick: () => chrome.tabs.create({

src/app/components/data-manage/clear/filter/date-filter.ts

@@ -37,10 +37,11 @@ const pickerShortcuts = [
     datePickerShortcut('till30DaysAgo', 30)
 ]
 
+// @ts-ignore
 const picker = ({ dateRangeRef }: DateFilterProps) => h(ElDatePicker, {
     modelValue: dateRangeRef.value,
     "onUpdate:modelValue": (date: Array<Date>) => dateRangeRef.value = date,
-    size: 'mini',
+    size: 'small',
     style: 'width:250px;',
     startPlaceholder: '1994/12/15',
     format: "YYYY/MM/DD",

src/app/components/data-manage/clear/filter/number-filter.ts

@@ -17,7 +17,7 @@ const elInput = (valRef: Ref<string>, placeholder: string, min?: Ref<string>) =>
         placeholder: placeholder,
         min: min !== undefined ? min.value || '0' : undefined,
         clearable: true,
-        size: 'mini',
+        size: 'small',
         modelValue: valRef.value,
         onInput: (val: string) => valRef.value = val.trim(),
         onClear: () => valRef.value = ''

src/app/components/data-manage/clear/filter/operation-button.ts

@@ -139,7 +139,7 @@ const button = (props: _Props) => h(ElButton,
     {
         icon: props.button.icon,
         type: props.button.type,
-        size: 'mini',
+        size: 'small',
         onClick: () => handleClick(props)
     },
     () => t(msg => msg.item.operation[props.button.message])

src/app/components/limit/table/column/operation.ts

@@ -26,7 +26,7 @@ const _default = defineComponent({
             default: ({ row }: { row: TimeLimitItem }) => [
                 h(ElButton, {
                     type: 'danger',
-                    size: 'mini',
+                    size: 'small',
                     icon: Delete,
                     onClick() {
                         const { cond } = row

src/app/components/limit/table/index.ts

@@ -24,7 +24,7 @@ const _default = defineComponent({
     setup(props, ctx) {
         return () => h(ElTable, {
             border: true,
-            size: 'mini',
+            size: 'small',
             style: { width: '100%' },
             highlightCurrentRow: true,
             fit: true,

src/app/components/option/common.ts

@@ -21,7 +21,7 @@ import { OptionMessage } from "@app/locale/components/option"
 export function renderOptionItem(input: VNode | { [key: string]: VNode }, label: (msg: OptionMessage) => string, defaultValue: string | number) {
     const param = isVNode(input) ? { input } : input
     const labelArcher = h('a', { class: 'option-label' }, tN(msg => label(msg.option), param))
-    const defaultTag = h(ElTag, { size: 'mini' }, () => defaultValue)
+    const defaultTag = h(ElTag, { size: 'small' }, () => defaultValue)
     const defaultArcher = h('a', { class: 'option-default' }, tN(msg => msg.option.defaultValue, { default: defaultTag }))
     return h('div', { class: 'option-line' }, [labelArcher, defaultArcher])
 }

src/app/components/option/components/appearance.ts

@@ -46,7 +46,7 @@ const allLocaleOptions: Timer.LocaleOption[] = ["default", ...allLocales]
 
 const locale = (option: Ref<Timer.AppearanceOption>) => h(ElSelect, {
     modelValue: option.value.locale,
-    size: 'mini',
+    size: 'small',
     style: { width: '120px' },
     onChange: async (newVal: Timer.LocaleOption) => {
         option.value.locale = newVal

src/app/components/option/components/popup.ts

@@ -16,7 +16,7 @@ import { ALL_POPUP_DURATION } from "@util/constant/popup"
 
 const popupMaxInput = (option: Ref<Timer.PopupOption>) => h(ElInputNumber, {
     modelValue: option.value.popupMax,
-    size: 'mini',
+    size: 'small',
     min: 5,
     max: 30,
     onChange: (val: number) => {
@@ -28,7 +28,7 @@ const popupMaxInput = (option: Ref<Timer.PopupOption>) => h(ElInputNumber, {
 const typeOptions = () => ALL_DATA_ITEMS.map(item => h(ElOption, { value: item, label: t(msg => msg.item[item]) }))
 const typeSelect = (option: Ref<Timer.PopupOption>) => h(ElSelect, {
     modelValue: option.value.defaultType,
-    size: 'mini',
+    size: 'small',
     style: { width: '120px' },
     onChange: (val: Timer.DataDimension) => {
         option.value.defaultType = val
@@ -39,7 +39,7 @@ const typeSelect = (option: Ref<Timer.PopupOption>) => h(ElSelect, {
 const durationOptions = () => ALL_POPUP_DURATION.map(item => h(ElOption, { value: item, label: t(msg => msg.option.popup.duration[item]) }))
 const durationSelect = (option: Ref<Timer.PopupOption>) => h(ElSelect, {
     modelValue: option.value.defaultDuration,
-    size: 'mini',
+    size: 'small',
     style: { width: t(msg => msg.option.popup.durationWidth) },
     onChange: (val: Timer.PopupDuration) => {
         option.value.defaultDuration = val

src/app/components/option/style/index.sass

@@ -25,10 +25,16 @@
     .option-line
         height: 30px
         line-height: 30px
+        .el-input--small
+            height: 28px
+            .el-input__wrapper
+                height: 26px
         .option-label
             float: left
         .option-default
             float: right
+            .el-tag
+                height: 20px
 .option-container>span
     margin: 20px
     padding-left: 20px

src/app/components/report/filter/download-file.ts

@@ -19,7 +19,7 @@ const _default = defineComponent({
     setup(_, ctx) {
         return () => h(ElDropdown, { class: 'export-dropdown', showTimeout: 100 }, {
             default: () => h(ElButton,
-                { size: 'mini', class: 'export-dropdown-button' },
+                { size: 'small', class: 'export-dropdown-button' },
                 () => h(ElIcon, { size: 17, style: { padding: '0 1px' } }, () => h(Download))
             ),
             dropdown: () => h(ElDropdownMenu, {},

src/app/components/report/filter/index.ts

@@ -120,11 +120,12 @@ const _default = defineComponent({
                 }
             }),
             // Float right
-            h("div", { style: { float: "right" } }, [
+            h("div", { class: "filter-item-right-group" }, [
                 h(ElButton, {
                     class: "batch-delete-button",
                     disabled: mergeHost.value,
-                    type: "text",
+                    type: "primary",
+                    link: true,
                     icon: DeleteFilled,
                     onClick: () => ctx.emit("batchDelete", computeOption())
                 }, () => batchDeleteButtonText),

src/app/components/report/styles/element.sass

@@ -10,13 +10,16 @@
 
 .batch-delete-button
     margin-right: 20px
+    height: 41px !important
+    margin-top: 2px
 
 .export-dropdown
 
     &-menu-icon
         font-size: 16px
 
     &-button
+        width: 30px
         padding: 7px !important
         margin-top: 8px
 

src/app/components/report/table/columns/alias-info.ts

@@ -21,7 +21,7 @@ type _Emits = "change"
 
 function renderEditing(data: _Data, ctx: SetupContext<_Emits[]>) {
     return h(ElInput, {
-        size: "mini",
+        size: 'small',
         ref: data.input,
         modelValue: data.inputVal.value,
         onInput: (newVal: string) => data.inputVal.value = newVal?.trimStart(),
@@ -60,7 +60,6 @@ function renderText(data: _Data) {
         style: { paddingRight: "4px" }
     }, data.inputVal.value))
     result.push(h(ElIcon, {
-        size: 17,
         class: "edit-btn"
     }, () => h(Edit, {
         onClick: () => {

src/app/components/report/table/columns/operation.ts

@@ -67,7 +67,7 @@ const _default = defineComponent({
                 // Trend
                 h(ElButton, {
                     icon: Stopwatch,
-                    size: 'mini',
+                    size: 'small',
                     type: 'primary',
                     onClick() {
                         const query: LocationQueryRaw = {

src/app/components/report/table/index.ts

@@ -51,7 +51,7 @@ const _default = defineComponent({
         return () => h(ElTable, {
             data: props.data,
             border: true,
-            size: 'mini',
+            size: 'small',
             defaultSort: props.defaultSort,
             style: { width: '100%' },
             highlightCurrentRow: true,

src/app/components/rule-merge/item-list.ts

@@ -102,7 +102,7 @@ const itemList = () => {
         onSaved: (origin, merged) => handleInputConfirm(origin, merged, addButtonRef)
     })
     result.push(addButton)
-    return result
+    return h('div', { class: 'editable-tag-container' }, result)
 }
 
 export default itemList

src/app/components/site-manage/table/column/operation.ts

@@ -23,7 +23,7 @@ const deleteButton = (ctx: SetupContext<_Emit[]>, row: HostAliasInfo) => h(Popup
 
 const modifyButtonText = t(msg => msg.siteManage.button.modify)
 const modifyButton = (ctx: SetupContext<_Emit[]>, row: HostAliasInfo) => h(ElButton, {
-    size: 'mini',
+    size: 'small',
     type: "primary",
     icon: Edit,
     onClick: () => ctx.emit("modify", row)

src/app/components/site-manage/table/column/source.ts

@@ -17,7 +17,7 @@ const SOURCE_DESC: { [source in HostAliasSource]: string } = {
 
 function renderSource(source: HostAliasSource) {
     const type = source === HostAliasSource.USER ? '' : 'info'
-    return h(ElTag, { type, size: 'mini' }, () => SOURCE_DESC[source])
+    return h(ElTag, { type, size: 'small' }, () => SOURCE_DESC[source])
 }
 
 const _default = defineComponent({

src/app/components/site-manage/table/index.ts

@@ -23,7 +23,7 @@ const _default = defineComponent({
         return () => h(ElTable, {
             data: props.data,
             border: true,
-            size: 'mini',
+            size: 'small',
             style: { width: '100%' },
             highlightCurrentRow: true,
             fit: true,

src/app/components/whitelist/item-list.ts

@@ -66,7 +66,7 @@ function handleAdd(inputValue: string, ref: Ref) {
         }).catch(() => { })
 }
 
-const tags: () => VNode[] = () => {
+function tags(): VNode {
     const result = []
     whitelistRef.value.forEach((white: string, index: number) => {
         const itemRef: Ref = ref()
@@ -82,7 +82,7 @@ const tags: () => VNode[] = () => {
         ref: addButtonRef,
         onSaved: (inputVal: string) => handleAdd(inputVal, addButtonRef)
     }))
-    return result
+    return h('div', { class: 'editable-tag-container' }, result)
 }
 
 export default tags

src/app/index.ts

@@ -9,6 +9,7 @@ import { App, createApp } from "vue"
 import Main from "./layout"
 import 'element-plus/theme-chalk/index.css'
 import './styles' // global css
+import './styles/compatible'
 import installRouter from "./router"
 import '../common/timer'
 import ElementPlus from 'element-plus'

src/app/styles/compatible.sass

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ * 
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+// Compatible for element-ui
+.el-button--small
+    min-height: 28px
+    padding: 7px 15px
+.el-input
+    line-height: var(--el-input-height)
+.el-input__wrapper
+    height: var(--el-input-inner-height)
+
+.el-table
+    .el-checkbox.el-checkbox--small
+        height: 28px
+
+.el-table--small .el-table__cell
+    padding: 6px 0
+
+.el-pagination
+    --el-pagination-font-size: 13px
+    --el-pagination-button-width: 35.5px
+    --el-pagination-button-height: 28px
+
+    .el-pagination__sizes>.el-select--default, .el-pagination__jump>.el-input
+        line-height: 28px
+        --el-input-inner-height: 26px
+
+.filter-item.el-button
+    min-height: 40px
+
+.el-input--prefix
+    .el-input__wrapper
+        padding-left: 0px
+        .el-select
+            input
+                padding-left: 11px
+
+\:root
+    --el-input-height: 40px
+    --el-input-inner-height: 38px