refactor(frontend): v-model:value to v-model

frontend/packages/admin/src/App.vue

@@ -78,9 +78,9 @@ watch(
 
 <template>
   <v-app>
-    <app-bar v-model:drawerOpen="drawerOpen" :routes="routes"></app-bar>
+    <app-bar v-model="drawerOpen" :routes="routes"></app-bar>
 
-    <nav-drawer v-model:drawerOpen="drawerOpen" :routes="routes"></nav-drawer>
+    <nav-drawer v-model="drawerOpen" :routes="routes"></nav-drawer>
 
     <v-main class="bg-gray-100 bg-opacity-50">
       <router-view v-slot="{ Component }">

frontend/packages/main/src/App.vue

@@ -82,9 +82,9 @@ watch(
 
 <template>
   <v-app>
-    <app-bar v-model:drawerOpen="drawerOpen" :routes="routes"></app-bar>
+    <app-bar v-model="drawerOpen" :routes="routes"></app-bar>
 
-    <nav-drawer v-model:drawerOpen="drawerOpen" :routes="routes"></nav-drawer>
+    <nav-drawer v-model="drawerOpen" :routes="routes"></nav-drawer>
 
     <v-main class="bg-gray-100 bg-opacity-50">
       <router-view v-slot="{ Component }">

frontend/packages/main/src/components/App/AppBar.vue

@@ -7,11 +7,11 @@ import learnwareLogo from "/logo.svg?url";
 import type { Route } from "@beiming-system/types/route";
 
 export interface Props {
-  drawerOpen: boolean;
+  modelValue: boolean;
   routes: Route[];
 }
 
-const emit = defineEmits(["update:drawerOpen"]);
+const emit = defineEmits(["update:modelValue"]);
 const router = useRouter();
 
 const props = defineProps<Props>();
@@ -54,7 +54,7 @@ const filteredRoutes = computed<Route[]>(
     <div class="prepend">
       <v-app-bar-nav-icon
         v-if="['xs', 'sm'].includes(display.name.value)"
-        @click="() => emit('update:drawerOpen', !drawerOpen)"
+        @click="() => emit('update:modelValue', !modelValue)"
       ></v-app-bar-nav-icon>
       <div class="logo" @click="() => router.push('/')">
         <img class="logo-img" :src="learnwareLogo" />

frontend/packages/main/src/components/App/NavDrawer.vue

@@ -5,19 +5,19 @@ import { useDisplay } from "vuetify";
 import type { Route } from "@beiming-system/types/route";
 
 export interface Props {
-  drawerOpen: boolean;
+  modelValue: boolean;
   routes: Route[];
 }
 
 const display = useDisplay();
 
-const emit = defineEmits(["update:drawerOpen"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps<Props>();
 
 const drawer = computed({
-  get: () => props.drawerOpen && ["xs", "sm"].includes(display.name.value),
-  set: (value) => emit("update:drawerOpen", value),
+  get: () => props.modelValue && ["xs", "sm"].includes(display.name.value),
+  set: (value) => emit("update:modelValue", value),
 });
 
 const store = useStore();

frontend/packages/main/src/components/Search/UserRequirement.vue

@@ -96,17 +96,17 @@ watch(
         ></v-text-field>
       </div>
 
-      <data-type-btns v-model:value="dataType" :cols="3" :md="2" :sm="2" :xs="2"></data-type-btns>
-      <task-type-btns v-model:value="taskType" :cols="2" :md="2" :sm="2" :xs="2"></task-type-btns>
+      <data-type-btns v-model="dataType" :cols="3" :md="2" :sm="2" :xs="2"></data-type-btns>
+      <task-type-btns v-model="taskType" :cols="2" :md="2" :sm="2" :xs="2"></task-type-btns>
       <library-type-btns
-        v-model:value="libraryType"
+        v-model="libraryType"
         :cols="2"
         :md="2"
         :sm="2"
         :xs="2"
       ></library-type-btns>
       <scenario-list-btns
-        v-model:value="scenarioList"
+        v-model="scenarioList"
         :cols="2"
         :md="2"
         :sm="2"
@@ -117,13 +117,26 @@ watch(
     </div>
 
     <div class="p-4 pt-0 border-t-1 border-gray-300">
+      <template v-if="isHeterogeneous">
+        <div ref="anchorRef" class="mt-3 mb-5 w-full text-h6 transition-all truncate">
+          <v-icon class="mr-3" icon="mdi-upload" color="black" size="small"></v-icon>
+          Upload Feature Description
+        </div>
+
+        <file-upload
+          v-model="files"
+          :height="28"
+          :tips="t('Submit.File.DragFileHere', { file: 'json' })"
+        />
+      </template>
+
       <div ref="anchorRef" class="mt-3 mb-5 w-full text-h6 transition-all truncate">
         <v-icon class="mr-3" icon="mdi-upload" color="black" size="small"></v-icon>
         {{ t("Search.UploadStatisticalRequirement") }}
       </div>
 
       <file-upload
-        v-model:files="files"
+        v-model="files"
         :height="28"
         :tips="t('Submit.File.DragFileHere', { file: 'json' })"
       />

frontend/packages/main/src/components/Specification/DescriptionInput.vue

@@ -6,7 +6,7 @@ import { debounce } from "../../utils";
 
 export interface Props {
   name: string;
-  value: {
+  modelValue: {
     Dimension: number;
     Description: Record<number, string>;
   };
@@ -16,27 +16,19 @@ const { t, locale } = useI18n();
 
 const display = useDisplay();
 
-const emits = defineEmits(["update:value"]);
+const emits = defineEmits(["update:modelValue"]);
 
-const props = defineProps({
-  name: {
-    type: String,
-    required: false,
-    default: "feature",
-  },
-  value: {
-    type: Object,
-    required: true,
-  },
-});
+const props = defineProps<Props>();
 
 const errorMessages = ref<string>("");
 
-const descriptionJSON = ref(props.value);
+const descriptionJSON = ref(props.modelValue);
 const descriptionArray = ref<(string | null)[]>(
-  [...new Array(props.value.Dimension)].map((_, idx) => props.value?.Description[idx] || null),
+  [...new Array(props.modelValue.Dimension)].map(
+    (_, idx) => props.modelValue?.Description[idx] || null,
+  ),
 );
-const descriptionString = ref(JSON.stringify(props.value, null, 2));
+const descriptionString = ref(JSON.stringify(props.modelValue, null, 2));
 
 const debouncedSetErrorMessages = debounce<string>((val) => {
   errorMessages.value = val;
@@ -50,7 +42,7 @@ watch(
       (_, idx) => newVal.Description[idx] || null,
     );
     descriptionString.value = JSON.stringify(newVal, null, 2);
-    emits("update:value", newVal);
+    emits("update:modelValue", newVal);
   },
 );
 watch(

frontend/packages/main/src/components/Specification/FileUpload.vue

@@ -2,16 +2,15 @@
 import { ref, computed } from "vue";
 
 export interface Props {
-  files: File[];
+  modelValue: File[];
   tips: string;
   errorMessages?: string;
   height?: number;
 }
 
-const emit = defineEmits(["update:files"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const props = withDefaults(defineProps<Props>(), {
-  files: () => [],
   errorMessages: "",
   height: 40,
 });
@@ -43,9 +42,9 @@ const computeFileSize = (byte: number): string => {
 };
 
 const files = computed({
-  get: () => props.files,
+  get: () => props.modelValue,
   set: (val) => {
-    emit("update:files", val);
+    emit("update:modelValue", val);
   },
 });
 </script>

frontend/packages/main/src/components/Specification/SpecTag.vue

@@ -71,10 +71,10 @@ const taskTypeDescription = computed({
         <v-alert class="w-full max-w-[900px] mx-auto" closable :text="errorMessages" type="error" />
       </v-card-actions>
     </v-scroll-y-transition>
-    <data-type-btns v-model:value="dataType" />
+    <data-type-btns v-model="dataType" />
     <description-input
       v-if="dataType === 'Table'"
-      v-model:value="dataTypeDescription"
+      v-model="dataTypeDescription"
       :name="t('Submit.SemanticSpecification.DataType.DescriptionInput.Name')"
     >
       <template #msg>
@@ -84,14 +84,14 @@ const taskTypeDescription = computed({
         {{ t("Submit.SemanticSpecification.DataType.DescriptionInput.FeatureTipsSmall") }}
       </template>
     </description-input>
-    <task-type-btns v-model:value="taskType" />
+    <task-type-btns v-model="taskType" />
     <description-input
       v-if="
         taskType === 'Classification' ||
         taskType === 'Regression' ||
         taskType === 'Feature Extraction'
       "
-      v-model:value="taskTypeDescription"
+      v-model="taskTypeDescription"
       :name="t('Submit.SemanticSpecification.TaskType.DescriptionOutput.Name')"
     >
       <template #msg>
@@ -101,7 +101,7 @@ const taskTypeDescription = computed({
         {{ t("Submit.SemanticSpecification.TaskType.DescriptionOutput.LabelTipsSmall") }}
       </template>
     </description-input>
-    <library-type-btns v-model:value="libraryType" />
-    <scenario-list-btns v-model:value="scenarioList" />
+    <library-type-btns v-model="libraryType" />
+    <scenario-list-btns v-model="scenarioList" />
   </div>
 </template>

frontend/packages/main/src/components/Specification/SpecTag/DataType.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { computed } from "vue";
 import GridBtns from "./GridBtns.vue";
 import AudioBtn from "../../../assets/images/specification/dataType/audio.svg?component";
 import VideoBtn from "../../../assets/images/specification/dataType/video.svg?component";
@@ -8,39 +8,33 @@ import ImageBtn from "../../../assets/images/specification/dataType/image.svg?co
 import TableBtn from "../../../assets/images/specification/dataType/table.svg?component";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+export interface DataTypeProps {
+  modelValue: string;
+  cols?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+}
 
-const emit = defineEmits(["update:value"]);
-
-const props = defineProps({
-  value: {
-    type: String,
-    required: true,
-  },
-  cols: {
-    type: Number,
-    default: 5,
-  },
-  md: {
-    type: Number,
-    default: 4,
-  },
-  sm: {
-    type: Number,
-    default: 4,
-  },
-  xs: {
-    type: Number,
-    default: 2,
-  },
+const props = withDefaults(defineProps<DataTypeProps>(), {
+  cols: 5,
+  md: 4,
+  sm: 4,
+  xs: 2,
 });
 
-const value = ref(props.value);
+const { t } = useI18n();
 
-watch(
-  () => value.value,
-  (newVal) => emit("update:value", newVal),
-);
+const emit = defineEmits(["update:modelValue"]);
+
+const modelValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
 
 const dataTypeBtns = computed(() => [
   {
@@ -73,7 +67,7 @@ const dataTypeBtns = computed(() => [
 
 <template>
   <grid-btns
-    v-model:value="value"
+    v-model="modelValue"
     :btns="dataTypeBtns"
     :title="t('Submit.SemanticSpecification.DataType.DataType')"
     :cols="cols"

frontend/packages/main/src/components/Specification/SpecTag/GridBtns.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { computed } from "vue";
 import { useDisplay } from "vuetify";
 import IconBtn from "./IconBtn.vue";
 import type { FunctionalComponent, SVGAttributes } from "vue";
@@ -11,7 +11,7 @@ export interface Btn {
 }
 
 export interface Props {
-  value: string;
+  modelValue: string;
   btns: Btn[];
   title: string;
   cols?: number;
@@ -29,9 +29,16 @@ const props = withDefaults(defineProps<Props>(), {
   xs: 3,
 });
 
-const emit = defineEmits(["update:value"]);
+const emit = defineEmits(["update:modelValue"]);
 
-const value = ref(props.value);
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
 
 const realCols = computed(() => {
   let { cols } = props;
@@ -48,13 +55,6 @@ const realCols = computed(() => {
 function clickBtn(btn: Btn): void {
   value.value = btn.value === value.value ? "" : btn.value;
 }
-
-watch(
-  () => value.value,
-  (newValue) => {
-    emit("update:value", newValue);
-  },
-);
 </script>
 
 <template>

frontend/packages/main/src/components/Specification/SpecTag/LibraryType.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { computed } from "vue";
 import GridBtns from "./GridBtns.vue";
 import TensorFlowBtn from "../../../assets/images/specification/libraryType/tensorflow.svg?component";
 import PyTorchBtn from "../../../assets/images/specification/libraryType/pytorch.svg?component";
@@ -7,40 +7,33 @@ import ScikitLearnBtn from "../../../assets/images/specification/libraryType/sci
 import OthersBtn from "../../../assets/images/specification/libraryType/others.svg?component";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+export interface LibraryTypeProps {
+  modelValue: string;
+  cols?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+}
 
-const emit = defineEmits(["update:value"]);
-
-const props = defineProps({
-  value: {
-    type: String,
-    required: true,
-  },
-  cols: {
-    type: Number,
-    default: 4,
-  },
-  md: {
-    type: Number,
-    default: 4,
-  },
-  sm: {
-    type: Number,
-    default: 4,
-  },
-  xs: {
-    type: Number,
-    default: 2,
-  },
+const props = withDefaults(defineProps<LibraryTypeProps>(), {
+  cols: 4,
+  md: 4,
+  sm: 4,
+  xs: 2,
 });
 
-const value = ref(props.value);
+const { t } = useI18n();
 
-watch(
-  () => value.value,
-  (newVal) => emit("update:value", newVal),
-  { deep: true },
-);
+const emit = defineEmits(["update:modelValue"]);
+
+const modelValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
 
 const libraryTypeBtns = computed(() => [
   {
@@ -68,7 +61,7 @@ const libraryTypeBtns = computed(() => [
 
 <template>
   <grid-btns
-    v-model:value="value"
+    v-model="modelValue"
     :btns="libraryTypeBtns"
     :title="t('Submit.SemanticSpecification.LibraryType.LibraryType')"
     :cols="cols"

frontend/packages/main/src/components/Specification/SpecTag/ScenarioList.vue

@@ -5,7 +5,7 @@ import { useI18n } from "vue-i18n";
 import type { Scenario, ScenarioList } from "@beiming-system/types/learnware";
 
 export interface Props {
-  value: ScenarioList;
+  modelValue: ScenarioList;
   cols?: number;
   md?: number;
   sm?: number;
@@ -14,7 +14,7 @@ export interface Props {
 
 const { t } = useI18n();
 
-const emit = defineEmits(["update:value"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const display = useDisplay();
 
@@ -116,17 +116,19 @@ const items = computed<
   },
 ]);
 
-const allSelected = computed(() => props.value && props.value.length === items.value.length);
+const allSelected = computed(
+  () => props.modelValue && props.modelValue.length === items.value.length,
+);
 
 const selections = computed(() => {
-  if (props.value) {
-    return props.value.map((s) => items.value.find((item) => item.value === s));
+  if (props.modelValue) {
+    return props.modelValue.map((s) => items.value.find((item) => item.value === s));
   }
   return [];
 });
 
 function click(value: Scenario): void {
-  if (props.value && props.value.includes(value)) {
+  if (props.modelValue && props.modelValue.includes(value)) {
     deleteSelect(value);
   } else {
     addSelect(value);
@@ -134,21 +136,21 @@ function click(value: Scenario): void {
 }
 
 function addSelect(value: Scenario): void {
-  if (props.value) {
-    emit("update:value", [...props.value, value]);
+  if (props.modelValue) {
+    emit("update:modelValue", [...props.modelValue, value]);
   } else {
-    emit("update:value", [value]);
+    emit("update:modelValue", [value]);
   }
 }
 
 function deleteSelect(value: Scenario): void {
-  if (props.value) {
+  if (props.modelValue) {
     emit(
-      "update:value",
-      props.value.filter((s) => s !== value),
+      "update:modelValue",
+      props.modelValue.filter((s) => s !== value),
     );
   } else {
-    emit("update:value", []);
+    emit("update:modelValue", []);
   }
 }
 </script>

frontend/packages/main/src/components/Specification/SpecTag/TaskType.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { computed } from "vue";
 import GridBtns from "./GridBtns.vue";
 import ClassificationBtn from "../../../assets/images/specification/taskType/classification.svg?component";
 import ClusteringBtn from "../../../assets/images/specification/taskType/clustering.svg?component";
@@ -11,39 +11,33 @@ import RankingBtn from "../../../assets/images/specification/taskType/ranking.sv
 import OthersBtn from "../../../assets/images/specification/taskType/others.svg?component";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+export interface TaskTypeProps {
+  modelValue: string;
+  cols?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+}
 
-const emit = defineEmits(["update:value"]);
-
-const props = defineProps({
-  value: {
-    type: String,
-    required: true,
-  },
-  cols: {
-    type: Number,
-    default: 5,
-  },
-  md: {
-    type: Number,
-    default: 4,
-  },
-  sm: {
-    type: Number,
-    default: 4,
-  },
-  xs: {
-    type: Number,
-    default: 2,
-  },
+const props = withDefaults(defineProps<TaskTypeProps>(), {
+  cols: 5,
+  md: 4,
+  sm: 4,
+  xs: 2,
 });
 
-const value = ref(props.value);
+const { t } = useI18n();
 
-watch(
-  () => value.value,
-  (newVal) => emit("update:value", newVal),
-);
+const emit = defineEmits(["update:modelValue"]);
+
+const modelValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
 
 const taskTypeBtns = computed(() => [
   {
@@ -91,7 +85,7 @@ const taskTypeBtns = computed(() => [
 
 <template>
   <grid-btns
-    v-model:value="value"
+    v-model="modelValue"
     :btns="taskTypeBtns"
     :title="t('Submit.SemanticSpecification.TaskType.TaskType')"
     :cols="cols"

frontend/packages/main/src/views/Submit.vue

@@ -462,7 +462,7 @@ onActivated(init);
           <v-window-item :value="3">
             <div class="p-4 m-auto">
               <file-upload
-                v-model:files="files.value"
+                v-model="files.value"
                 :error-messages="files.errorMessages"
                 :tips="t('Submit.File.DragFileHere', { file: 'zip' })"
                 class="text-xl"