chore: bump vue-related dependencies (#7523)

Signed-off-by: Ryan Wang <i@ryanc.cc>

ui/console-src/main.ts

@@ -49,7 +49,7 @@ async function loadUserPermissions() {
       const { value } = binding;
       const { any, enable } = binding.modifiers;
 
-      if (hasPermission(uiPermissions, value, any)) {
+      if (hasPermission(uiPermissions, value, any ?? false)) {
         return;
       }
 

ui/console-src/modules/interface/themes/ThemeDetail.vue

@@ -80,174 +80,168 @@ const { handleExportThemeConfiguration, openSelectImportFileDialog } =
 </script>
 
 <template>
-  <Transition mode="out-in" name="fade">
-    <div class="overflow-hidden rounded-b-base">
-      <div class="bg-white px-4 py-4 sm:px-6">
-        <div class="group flex items-center justify-between">
-          <div class="flex flex-row items-center gap-3">
-            <VAvatar
-              :key="selectedTheme?.metadata.name"
-              :alt="selectedTheme?.spec.displayName"
-              :src="selectedTheme?.spec.logo"
-              size="lg"
-            />
-            <div>
-              <h3 class="text-lg font-medium leading-6 text-gray-900">
-                {{ selectedTheme?.spec.displayName }}
-              </h3>
-              <p class="mt-1 flex max-w-2xl items-center gap-2">
-                <span class="text-sm text-gray-500">
-                  {{ selectedTheme?.spec.version }}
-                </span>
-                <VTag>
-                  {{
-                    isActivated
-                      ? t("core.common.status.activated")
-                      : t("core.common.status.not_activated")
-                  }}
-                </VTag>
-                <VStatusDot
-                  v-if="getFailedMessage()"
-                  v-tooltip="getFailedMessage()"
-                  state="warning"
-                  animate
-                />
-              </p>
-            </div>
+  <div class="overflow-hidden rounded-b-base">
+    <div class="bg-white px-4 py-4 sm:px-6">
+      <div class="group flex items-center justify-between">
+        <div class="flex flex-row items-center gap-3">
+          <VAvatar
+            :key="selectedTheme?.metadata.name"
+            :alt="selectedTheme?.spec.displayName"
+            :src="selectedTheme?.spec.logo"
+            size="lg"
+          />
+          <div>
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+              {{ selectedTheme?.spec.displayName }}
+            </h3>
+            <p class="mt-1 flex max-w-2xl items-center gap-2">
+              <span class="text-sm text-gray-500">
+                {{ selectedTheme?.spec.version }}
+              </span>
+              <VTag>
+                {{
+                  isActivated
+                    ? t("core.common.status.activated")
+                    : t("core.common.status.not_activated")
+                }}
+              </VTag>
+              <VStatusDot
+                v-if="getFailedMessage()"
+                v-tooltip="getFailedMessage()"
+                state="warning"
+                animate
+              />
+            </p>
           </div>
-          <VDropdown v-permission="['system:themes:manage']">
-            <div
-              class="cursor-pointer rounded p-1 transition-all hover:text-blue-600 group-hover:bg-gray-100"
-            >
-              <IconMore />
-            </div>
-            <template #popper>
-              <VDropdownItem @click="themesModal = true">
-                {{ $t("core.common.buttons.upgrade") }}
-              </VDropdownItem>
-              <VDropdownItem @click="handleExportThemeConfiguration">
-                {{ $t("core.theme.operations.export_configuration.button") }}
-              </VDropdownItem>
-              <VDropdownItem @click="openSelectImportFileDialog()">
-                {{ $t("core.theme.operations.import_configuration.button") }}
-              </VDropdownItem>
-              <VDropdownDivider />
-              <VDropdownItem type="danger" @click="handleReloadTheme">
-                {{ $t("core.theme.operations.reload.button") }}
-              </VDropdownItem>
-              <VDropdownItem type="danger" @click="handleClearCache">
-                {{ $t("core.theme.operations.clear_templates_cache.button") }}
-              </VDropdownItem>
-              <VDropdownItem type="danger" @click="handleResetSettingConfig">
-                {{ $t("core.common.buttons.reset") }}
-              </VDropdownItem>
-            </template>
-          </VDropdown>
         </div>
-      </div>
-      <div class="border-t border-gray-200">
-        <VDescription>
-          <VDescriptionItem
-            label="ID"
-            :content="selectedTheme?.metadata.name"
-          />
-          <VDescriptionItem
-            :label="$t('core.theme.detail.fields.description')"
-            :content="
-              selectedTheme?.spec.description || $t('core.common.text.none')
-            "
-          ></VDescriptionItem>
-          <VDescriptionItem :label="$t('core.theme.detail.fields.author')">
-            <a
-              v-if="selectedTheme?.spec.author"
-              :href="selectedTheme.spec.author.website || '#'"
-              class="hover:text-gray-600"
-              target="_blank"
-            >
-              {{ selectedTheme.spec.author.name }}
-            </a>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem
-            :label="$t('core.theme.detail.fields.version')"
-            :content="selectedTheme?.spec.version"
-          />
-          <VDescriptionItem
-            :label="$t('core.theme.detail.fields.requires')"
-            :content="selectedTheme?.spec.requires"
-          />
-          <VDescriptionItem :label="$t('core.theme.detail.fields.homepage')">
-            <a
-              v-if="selectedTheme?.spec.homepage"
-              :href="selectedTheme.spec.homepage"
-              class="hover:text-gray-600"
-              target="_blank"
-            >
-              {{ selectedTheme.spec.homepage }}
-            </a>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem :label="$t('core.theme.detail.fields.repo')">
-            <a
-              v-if="selectedTheme?.spec.repo"
-              :href="selectedTheme.spec.repo"
-              class="hover:text-gray-600"
-              target="_blank"
-            >
-              {{ selectedTheme.spec.repo }}
-            </a>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem :label="$t('core.theme.detail.fields.issues')">
-            <a
-              v-if="selectedTheme?.spec.issues"
-              :href="selectedTheme.spec.issues"
-              class="hover:text-gray-600"
-              target="_blank"
-            >
-              {{ selectedTheme.spec.issues }}
-            </a>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem :label="$t('core.theme.detail.fields.license')">
-            <ul
-              v-if="
-                selectedTheme?.spec.license &&
-                selectedTheme?.spec.license.length
-              "
-              class="list-inside"
-              :class="{ 'list-disc': selectedTheme?.spec.license.length > 1 }"
-            >
-              <li
-                v-for="(license, index) in selectedTheme.spec.license"
-                :key="index"
-              >
-                <a v-if="license.url" :href="license.url" target="_blank">
-                  {{ license.name }}
-                </a>
-                <span v-else>
-                  {{ license.name }}
-                </span>
-              </li>
-            </ul>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem
-            :label="$t('core.theme.detail.fields.storage_location')"
-            :content="selectedTheme?.status?.location"
-          />
-        </VDescription>
+        <VDropdown v-permission="['system:themes:manage']">
+          <div
+            class="cursor-pointer rounded p-1 transition-all hover:text-blue-600 group-hover:bg-gray-100"
+          >
+            <IconMore />
+          </div>
+          <template #popper>
+            <VDropdownItem @click="themesModal = true">
+              {{ $t("core.common.buttons.upgrade") }}
+            </VDropdownItem>
+            <VDropdownItem @click="handleExportThemeConfiguration">
+              {{ $t("core.theme.operations.export_configuration.button") }}
+            </VDropdownItem>
+            <VDropdownItem @click="openSelectImportFileDialog()">
+              {{ $t("core.theme.operations.import_configuration.button") }}
+            </VDropdownItem>
+            <VDropdownDivider />
+            <VDropdownItem type="danger" @click="handleReloadTheme">
+              {{ $t("core.theme.operations.reload.button") }}
+            </VDropdownItem>
+            <VDropdownItem type="danger" @click="handleClearCache">
+              {{ $t("core.theme.operations.clear_templates_cache.button") }}
+            </VDropdownItem>
+            <VDropdownItem type="danger" @click="handleResetSettingConfig">
+              {{ $t("core.common.buttons.reset") }}
+            </VDropdownItem>
+          </template>
+        </VDropdown>
       </div>
     </div>
-  </Transition>
+    <div class="border-t border-gray-200">
+      <VDescription>
+        <VDescriptionItem label="ID" :content="selectedTheme?.metadata.name" />
+        <VDescriptionItem
+          :label="$t('core.theme.detail.fields.description')"
+          :content="
+            selectedTheme?.spec.description || $t('core.common.text.none')
+          "
+        ></VDescriptionItem>
+        <VDescriptionItem :label="$t('core.theme.detail.fields.author')">
+          <a
+            v-if="selectedTheme?.spec.author"
+            :href="selectedTheme.spec.author.website || '#'"
+            class="hover:text-gray-600"
+            target="_blank"
+          >
+            {{ selectedTheme.spec.author.name }}
+          </a>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem
+          :label="$t('core.theme.detail.fields.version')"
+          :content="selectedTheme?.spec.version"
+        />
+        <VDescriptionItem
+          :label="$t('core.theme.detail.fields.requires')"
+          :content="selectedTheme?.spec.requires"
+        />
+        <VDescriptionItem :label="$t('core.theme.detail.fields.homepage')">
+          <a
+            v-if="selectedTheme?.spec.homepage"
+            :href="selectedTheme.spec.homepage"
+            class="hover:text-gray-600"
+            target="_blank"
+          >
+            {{ selectedTheme.spec.homepage }}
+          </a>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem :label="$t('core.theme.detail.fields.repo')">
+          <a
+            v-if="selectedTheme?.spec.repo"
+            :href="selectedTheme.spec.repo"
+            class="hover:text-gray-600"
+            target="_blank"
+          >
+            {{ selectedTheme.spec.repo }}
+          </a>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem :label="$t('core.theme.detail.fields.issues')">
+          <a
+            v-if="selectedTheme?.spec.issues"
+            :href="selectedTheme.spec.issues"
+            class="hover:text-gray-600"
+            target="_blank"
+          >
+            {{ selectedTheme.spec.issues }}
+          </a>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem :label="$t('core.theme.detail.fields.license')">
+          <ul
+            v-if="
+              selectedTheme?.spec.license && selectedTheme?.spec.license.length
+            "
+            class="list-inside"
+            :class="{ 'list-disc': selectedTheme?.spec.license.length > 1 }"
+          >
+            <li
+              v-for="(license, index) in selectedTheme.spec.license"
+              :key="index"
+            >
+              <a v-if="license.url" :href="license.url" target="_blank">
+                {{ license.name }}
+              </a>
+              <span v-else>
+                {{ license.name }}
+              </span>
+            </li>
+          </ul>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem
+          :label="$t('core.theme.detail.fields.storage_location')"
+          :content="selectedTheme?.status?.location"
+        />
+      </VDescription>
+    </div>
+  </div>
 </template>

ui/console-src/modules/interface/themes/ThemeSetting.vue

@@ -71,35 +71,33 @@ const handleSaveConfigMap = async (data: object) => {
 await suspense();
 </script>
 <template>
-  <Transition mode="out-in" name="fade">
-    <div class="p-4">
-      <FormKit
-        v-if="group && formSchema && currentConfigMapGroupData"
-        :id="group"
-        :value="currentConfigMapGroupData || {}"
-        :name="group"
-        :preserve="true"
-        type="form"
-        @submit="handleSaveConfigMap"
+  <div class="p-4">
+    <FormKit
+      v-if="group && formSchema && currentConfigMapGroupData"
+      :id="group"
+      :value="currentConfigMapGroupData || {}"
+      :name="group"
+      :preserve="true"
+      type="form"
+      @submit="handleSaveConfigMap"
+    >
+      <FormKitSchema
+        :schema="toRaw(formSchema)"
+        :data="toRaw(currentConfigMapGroupData)"
+      />
+    </FormKit>
+    <StickyBlock
+      v-permission="['system:themes:manage']"
+      class="-mx-4 -mb-4 rounded-b-base rounded-t-lg bg-white p-4 pt-5"
+      position="bottom"
+    >
+      <VButton
+        :loading="saving"
+        type="secondary"
+        @click="$formkit.submit(group || '')"
       >
-        <FormKitSchema
-          :schema="toRaw(formSchema)"
-          :data="toRaw(currentConfigMapGroupData)"
-        />
-      </FormKit>
-      <StickyBlock
-        v-permission="['system:themes:manage']"
-        class="-mx-4 -mb-4 rounded-b-base rounded-t-lg bg-white p-4 pt-5"
-        position="bottom"
-      >
-        <VButton
-          :loading="saving"
-          type="secondary"
-          @click="$formkit.submit(group || '')"
-        >
-          {{ $t("core.common.buttons.save") }}
-        </VButton>
-      </StickyBlock>
-    </div>
-  </Transition>
+        {{ $t("core.common.buttons.save") }}
+      </VButton>
+    </StickyBlock>
+  </div>
 </template>

ui/console-src/modules/system/plugins/components/tabs/Detail.vue

@@ -97,197 +97,195 @@ const lastCondition = computed(() => {
     :plugin="plugin"
     @close="conditionsModalVisible = false"
   />
-  <Transition mode="out-in" name="fade">
-    <div class="overflow-hidden rounded-b-base">
-      <div class="flex items-center justify-between bg-white px-4 py-4 sm:px-6">
-        <div>
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            {{ $t("core.plugin.detail.header.title") }}
-          </h3>
-        </div>
-        <div v-permission="['system:plugins:manage']">
-          <VSwitch
-            :loading="changingStatus"
-            :model-value="plugin?.spec.enabled"
-            @change="changeStatus"
-          />
-        </div>
+  <div class="overflow-hidden rounded-b-base">
+    <div class="flex items-center justify-between bg-white px-4 py-4 sm:px-6">
+      <div>
+        <h3 class="text-lg font-medium leading-6 text-gray-900">
+          {{ $t("core.plugin.detail.header.title") }}
+        </h3>
       </div>
-      <div
-        v-if="errorAlertVisible && lastCondition"
-        class="w-full px-4 pb-2 sm:px-6"
-      >
-        <VAlert type="error" :title="lastCondition.reason" :closable="false">
-          <template #description>
-            <div class="overflow-x-auto">
-              <pre>{{ lastCondition.message }}</pre>
-            </div>
-          </template>
-          <template #actions>
-            <VButton size="sm" @click="conditionsModalVisible = true">
-              {{ $t("core.plugin.detail.operations.view_conditions.button") }}
-            </VButton>
-          </template>
-        </VAlert>
-      </div>
-      <div class="border-t border-gray-200">
-        <VDescription>
-          <VDescriptionItem label="ID" :content="plugin?.metadata.name" />
-          <VDescriptionItem
-            :label="$t('core.plugin.detail.fields.description')"
-            :content="plugin?.spec.description || $t('core.common.text.none')"
-          />
-          <VDescriptionItem :label="$t('core.plugin.detail.fields.author')">
-            <a
-              v-if="plugin?.spec.author"
-              :href="plugin?.spec.author.website"
-              class="hover:text-gray-600"
-              target="_blank"
-            >
-              {{ plugin?.spec.author.name }}
-            </a>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem
-            :label="$t('core.plugin.detail.fields.version')"
-            :content="plugin?.spec.version"
-          />
-          <VDescriptionItem
-            :label="$t('core.plugin.detail.fields.requires')"
-            :content="plugin?.spec.requires"
-          />
-          <VDescriptionItem :label="$t('core.plugin.detail.fields.homepage')">
-            <a
-              v-if="plugin?.spec.homepage"
-              :href="plugin?.spec.homepage"
-              class="hover:text-gray-600"
-              target="_blank"
-            >
-              {{ plugin?.spec.homepage }}
-            </a>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem :label="$t('core.plugin.detail.fields.repo')">
-            <a
-              v-if="plugin?.spec.repo"
-              :href="plugin.spec.repo"
-              class="hover:text-gray-600"
-              target="_blank"
-            >
-              {{ plugin.spec.repo }}
-            </a>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem :label="$t('core.plugin.detail.fields.issues')">
-            <a
-              v-if="plugin?.spec.issues"
-              :href="plugin.spec.issues"
-              class="hover:text-gray-600"
-              target="_blank"
-            >
-              {{ plugin.spec.issues }}
-            </a>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem :label="$t('core.plugin.detail.fields.license')">
-            <ul
-              v-if="plugin?.spec.license && plugin?.spec.license.length"
-              class="list-inside"
-              :class="{ 'list-disc': plugin?.spec.license.length > 1 }"
-            >
-              <li v-for="(license, index) in plugin.spec.license" :key="index">
-                <a v-if="license.url" :href="license.url" target="_blank">
-                  {{ license.name }}
-                </a>
-                <span v-else>
-                  {{ license.name }}
-                </span>
-              </li>
-            </ul>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem
-            :label="$t('core.plugin.detail.fields.role_templates')"
-          >
-            <dl
-              v-if="pluginRoleTemplateGroups.length"
-              class="divide-y divide-gray-100"
-            >
-              <div
-                v-for="(group, groupIndex) in pluginRoleTemplateGroups"
-                :key="groupIndex"
-                class="rounded bg-gray-50 px-4 py-5 hover:bg-gray-100 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-              >
-                <dt class="text-sm font-medium text-gray-900">
-                  {{ group.module }}
-                </dt>
-                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                  <ul class="space-y-2">
-                    <li v-for="(role, index) in group.roles" :key="index">
-                      <div
-                        class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
-                      >
-                        <div class="inline-flex flex-col gap-y-3">
-                          <span class="font-medium text-gray-900">
-                            {{
-                              role.metadata.annotations?.[
-                                rbacAnnotations.DISPLAY_NAME
-                              ]
-                            }}
-                          </span>
-                          <span
-                            v-if="
-                              role.metadata.annotations?.[
-                                rbacAnnotations.DEPENDENCIES
-                              ]
-                            "
-                            class="text-xs text-gray-400"
-                          >
-                            {{
-                              $t("core.role.common.text.dependent_on", {
-                                roles: JSON.parse(
-                                  role.metadata.annotations?.[
-                                    rbacAnnotations.DEPENDENCIES
-                                  ]
-                                ).join(", "),
-                              })
-                            }}
-                          </span>
-                        </div>
-                      </div>
-                    </li>
-                  </ul>
-                </dd>
-              </div>
-            </dl>
-            <span v-else>
-              {{ $t("core.common.text.none") }}
-            </span>
-          </VDescriptionItem>
-          <VDescriptionItem
-            :label="$t('core.plugin.detail.fields.creation_time')"
-            :content="formatDatetime(plugin?.metadata.creationTimestamp)"
-          />
-          <VDescriptionItem
-            :label="$t('core.plugin.detail.fields.last_starttime')"
-            :content="formatDatetime(plugin?.status?.lastStartTime)"
-          />
-          <VDescriptionItem
-            :label="$t('core.plugin.detail.fields.load_location')"
-            :content="plugin?.status?.loadLocation"
-          ></VDescriptionItem>
-        </VDescription>
+      <div v-permission="['system:plugins:manage']">
+        <VSwitch
+          :loading="changingStatus"
+          :model-value="plugin?.spec.enabled"
+          @change="changeStatus"
+        />
       </div>
     </div>
-  </Transition>
+    <div
+      v-if="errorAlertVisible && lastCondition"
+      class="w-full px-4 pb-2 sm:px-6"
+    >
+      <VAlert type="error" :title="lastCondition.reason" :closable="false">
+        <template #description>
+          <div class="overflow-x-auto">
+            <pre>{{ lastCondition.message }}</pre>
+          </div>
+        </template>
+        <template #actions>
+          <VButton size="sm" @click="conditionsModalVisible = true">
+            {{ $t("core.plugin.detail.operations.view_conditions.button") }}
+          </VButton>
+        </template>
+      </VAlert>
+    </div>
+    <div class="border-t border-gray-200">
+      <VDescription>
+        <VDescriptionItem label="ID" :content="plugin?.metadata.name" />
+        <VDescriptionItem
+          :label="$t('core.plugin.detail.fields.description')"
+          :content="plugin?.spec.description || $t('core.common.text.none')"
+        />
+        <VDescriptionItem :label="$t('core.plugin.detail.fields.author')">
+          <a
+            v-if="plugin?.spec.author"
+            :href="plugin?.spec.author.website"
+            class="hover:text-gray-600"
+            target="_blank"
+          >
+            {{ plugin?.spec.author.name }}
+          </a>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem
+          :label="$t('core.plugin.detail.fields.version')"
+          :content="plugin?.spec.version"
+        />
+        <VDescriptionItem
+          :label="$t('core.plugin.detail.fields.requires')"
+          :content="plugin?.spec.requires"
+        />
+        <VDescriptionItem :label="$t('core.plugin.detail.fields.homepage')">
+          <a
+            v-if="plugin?.spec.homepage"
+            :href="plugin?.spec.homepage"
+            class="hover:text-gray-600"
+            target="_blank"
+          >
+            {{ plugin?.spec.homepage }}
+          </a>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem :label="$t('core.plugin.detail.fields.repo')">
+          <a
+            v-if="plugin?.spec.repo"
+            :href="plugin.spec.repo"
+            class="hover:text-gray-600"
+            target="_blank"
+          >
+            {{ plugin.spec.repo }}
+          </a>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem :label="$t('core.plugin.detail.fields.issues')">
+          <a
+            v-if="plugin?.spec.issues"
+            :href="plugin.spec.issues"
+            class="hover:text-gray-600"
+            target="_blank"
+          >
+            {{ plugin.spec.issues }}
+          </a>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem :label="$t('core.plugin.detail.fields.license')">
+          <ul
+            v-if="plugin?.spec.license && plugin?.spec.license.length"
+            class="list-inside"
+            :class="{ 'list-disc': plugin?.spec.license.length > 1 }"
+          >
+            <li v-for="(license, index) in plugin.spec.license" :key="index">
+              <a v-if="license.url" :href="license.url" target="_blank">
+                {{ license.name }}
+              </a>
+              <span v-else>
+                {{ license.name }}
+              </span>
+            </li>
+          </ul>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem
+          :label="$t('core.plugin.detail.fields.role_templates')"
+        >
+          <dl
+            v-if="pluginRoleTemplateGroups.length"
+            class="divide-y divide-gray-100"
+          >
+            <div
+              v-for="(group, groupIndex) in pluginRoleTemplateGroups"
+              :key="groupIndex"
+              class="rounded bg-gray-50 px-4 py-5 hover:bg-gray-100 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+            >
+              <dt class="text-sm font-medium text-gray-900">
+                {{ group.module }}
+              </dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                <ul class="space-y-2">
+                  <li v-for="(role, index) in group.roles" :key="index">
+                    <div
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
+                    >
+                      <div class="inline-flex flex-col gap-y-3">
+                        <span class="font-medium text-gray-900">
+                          {{
+                            role.metadata.annotations?.[
+                              rbacAnnotations.DISPLAY_NAME
+                            ]
+                          }}
+                        </span>
+                        <span
+                          v-if="
+                            role.metadata.annotations?.[
+                              rbacAnnotations.DEPENDENCIES
+                            ]
+                          "
+                          class="text-xs text-gray-400"
+                        >
+                          {{
+                            $t("core.role.common.text.dependent_on", {
+                              roles: JSON.parse(
+                                role.metadata.annotations?.[
+                                  rbacAnnotations.DEPENDENCIES
+                                ]
+                              ).join(", "),
+                            })
+                          }}
+                        </span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </dd>
+            </div>
+          </dl>
+          <span v-else>
+            {{ $t("core.common.text.none") }}
+          </span>
+        </VDescriptionItem>
+        <VDescriptionItem
+          :label="$t('core.plugin.detail.fields.creation_time')"
+          :content="formatDatetime(plugin?.metadata.creationTimestamp)"
+        />
+        <VDescriptionItem
+          :label="$t('core.plugin.detail.fields.last_starttime')"
+          :content="formatDatetime(plugin?.status?.lastStartTime)"
+        />
+        <VDescriptionItem
+          :label="$t('core.plugin.detail.fields.load_location')"
+          :content="plugin?.status?.loadLocation"
+        ></VDescriptionItem>
+      </VDescription>
+    </div>
+  </div>
 </template>

ui/console-src/modules/system/plugins/components/tabs/Setting.vue

@@ -68,38 +68,36 @@ const handleSaveConfigMap = async (data: object) => {
 };
 </script>
 <template>
-  <Transition mode="out-in" name="fade">
-    <div class="rounded-b-base bg-white p-4">
-      <div>
-        <FormKit
-          v-if="group && formSchema && currentConfigMapGroupData"
-          :id="group"
-          :value="currentConfigMapGroupData"
-          :name="group"
-          :preserve="true"
-          type="form"
-          @submit="handleSaveConfigMap"
-        >
-          <FormKitSchema
-            :schema="toRaw(formSchema)"
-            :data="toRaw(currentConfigMapGroupData)"
-          />
-        </FormKit>
-      </div>
-
-      <StickyBlock
-        v-permission="['system:plugins:manage']"
-        class="-mx-4 -mb-4 rounded-b-base rounded-t-lg bg-white p-4 pt-5"
-        position="bottom"
+  <div class="rounded-b-base bg-white p-4">
+    <div>
+      <FormKit
+        v-if="group && formSchema && currentConfigMapGroupData"
+        :id="group"
+        :value="currentConfigMapGroupData"
+        :name="group"
+        :preserve="true"
+        type="form"
+        @submit="handleSaveConfigMap"
       >
-        <VButton
-          :loading="saving"
-          type="secondary"
-          @click="$formkit.submit(group || '')"
-        >
-          {{ $t("core.common.buttons.save") }}
-        </VButton>
-      </StickyBlock>
+        <FormKitSchema
+          :schema="toRaw(formSchema)"
+          :data="toRaw(currentConfigMapGroupData)"
+        />
+      </FormKit>
     </div>
-  </Transition>
+
+    <StickyBlock
+      v-permission="['system:plugins:manage']"
+      class="-mx-4 -mb-4 rounded-b-base rounded-t-lg bg-white p-4 pt-5"
+      position="bottom"
+    >
+      <VButton
+        :loading="saving"
+        type="secondary"
+        @click="$formkit.submit(group || '')"
+      >
+        {{ $t("core.common.buttons.save") }}
+      </VButton>
+    </StickyBlock>
+  </div>
 </template>

ui/console-src/modules/system/settings/tabs/Setting.vue

@@ -68,37 +68,35 @@ const handleSaveConfigMap = async () => {
 };
 </script>
 <template>
-  <Transition mode="out-in" name="fade">
-    <div class="p-4">
-      <FormKit
-        v-if="group && formSchema && configMapFormData?.[group]"
-        :id="group"
-        v-model="configMapFormData[group]"
-        :name="group"
-        :actions="false"
-        :preserve="true"
-        type="form"
-        @submit="handleSaveConfigMap"
-      >
-        <FormKitSchema
-          :schema="toRaw(formSchema)"
-          :data="configMapFormData[group]"
-        />
-      </FormKit>
+  <div class="p-4">
+    <FormKit
+      v-if="group && formSchema && configMapFormData?.[group]"
+      :id="group"
+      v-model="configMapFormData[group]"
+      :name="group"
+      :actions="false"
+      :preserve="true"
+      type="form"
+      @submit="handleSaveConfigMap"
+    >
+      <FormKitSchema
+        :schema="toRaw(formSchema)"
+        :data="configMapFormData[group]"
+      />
+    </FormKit>
 
-      <StickyBlock
-        v-permission="['system:configmaps:manage']"
-        class="-mx-4 -mb-4 rounded-b-base rounded-t-lg bg-white p-4 pt-5"
-        position="bottom"
+    <StickyBlock
+      v-permission="['system:configmaps:manage']"
+      class="-mx-4 -mb-4 rounded-b-base rounded-t-lg bg-white p-4 pt-5"
+      position="bottom"
+    >
+      <VButton
+        :loading="saving"
+        type="secondary"
+        @click="$formkit.submit(group || '')"
       >
-        <VButton
-          :loading="saving"
-          type="secondary"
-          @click="$formkit.submit(group || '')"
-        >
-          {{ $t("core.common.buttons.save") }}
-        </VButton>
-      </StickyBlock>
-    </div>
-  </Transition>
+        {{ $t("core.common.buttons.save") }}
+      </VButton>
+    </StickyBlock>
+  </div>
 </template>

ui/package.json

@@ -92,24 +92,24 @@
     "overlayscrollbars": "^2.5.0",
     "overlayscrollbars-vue": "^0.5.7",
     "path-browserify": "^1.0.1",
-    "pinia": "^2.1.6",
+    "pinia": "^3.0.3",
     "pretty-bytes": "^6.0.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.1",
     "short-unique-id": "^5.0.2",
     "transliteration": "^2.3.5",
     "ua-parser-js": "^1.0.38",
-    "vue": "^3.5.13",
+    "vue": "^3.5.16",
     "vue-demi": "^0.14.10",
     "vue-draggable-plus": "^0.4.1",
     "vue-grid-layout": "3.0.0-beta1",
-    "vue-i18n": "^9.14.2",
-    "vue-router": "^4.3.2"
+    "vue-i18n": "^11.1.5",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.235",
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
-    "@number-flow/vue": "^0.4.7",
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@number-flow/vue": "^0.4.8",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.0",
@@ -123,10 +123,10 @@
     "@types/randomstring": "^1.1.8",
     "@types/ua-parser-js": "^0.7.39",
     "@vitejs/plugin-legacy": "^6.0.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
     "@vitest/ui": "^0.34.1",
-    "@vue/compiler-sfc": "^3.5.13",
+    "@vue/compiler-sfc": "^3.5.16",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^2.4.6",
@@ -134,7 +134,7 @@
     "autoprefixer": "^10.4.14",
     "c8": "^7.12.0",
     "eslint": "^8.43.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^9.33.0",
     "husky": "^8.0.3",
     "js-yaml": "^4.1.0",
     "jsdom": "^20.0.3",
@@ -153,7 +153,7 @@
     "tailwindcss-safe-area": "^0.2.2",
     "tailwindcss-themer": "^2.0.3",
     "terser": "^5.37.0",
-    "typescript": "~5.6.2",
+    "typescript": "~5.8.0",
     "unplugin-icons": "^0.19.2",
     "vite": "^6.0.3",
     "vite-plugin-externals": "^0.6.2",
@@ -161,7 +161,7 @@
     "vite-plugin-pwa": "^0.20.0",
     "vite-plugin-static-copy": "^1.0.6",
     "vitest": "^0.34.1",
-    "vue-tsc": "^2.1.6"
+    "vue-tsc": "^2.2.10"
   },
   "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }

ui/packages/components/package.json

@@ -61,8 +61,8 @@
     "vite-plugin-dts": "^4.2.2"
   },
   "peerDependencies": {
-    "vue": "^3.5.13",
-    "vue-router": "^4.3.2"
+    "vue": "^3.5.16",
+    "vue-router": "^4.5.1"
   },
   "exports": {
     ".": {

ui/packages/editor/package.json

@@ -90,6 +90,6 @@
     "vite-plugin-dts": "^4.2.2"
   },
   "peerDependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.16"
   }
 }

ui/packages/editor/src/extensions/code-block/CodeBlockSelect.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
   filterSort?: (options: Option[], query: string) => number;
 }>();
 
-const value = defineModel({
+const value = defineModel<string>({
   default: "",
 });
 

ui/packages/shared/package.json

@@ -41,8 +41,8 @@
     "vite-plugin-dts": "^4.2.2"
   },
   "peerDependencies": {
-    "vue": "^3.5.13",
-    "vue-router": "^4.3.2"
+    "vue": "^3.5.16",
+    "vue-router": "^4.5.1"
   },
   "dependencies": {
     "@halo-dev/api-client": "workspace:*"

ui/packages/shared/src/types/plugin.ts

@@ -27,7 +27,7 @@ import type { AttachmentSelectProvider } from "../states/attachment-selector";
 import type { FunctionalPage } from "../states/pages";
 
 export interface RouteRecordAppend {
-  parentName: RouteRecordName;
+  parentName: NonNullable<RouteRecordName>;
   route: RouteRecordRaw;
 }
 

ui/uc-src/main.ts

@@ -42,7 +42,7 @@ async function loadUserPermissions() {
       const { value } = binding;
       const { any, enable } = binding.modifiers;
 
-      if (hasPermission(uiPermissions, value, any)) {
+      if (hasPermission(uiPermissions, value, any ?? false)) {
         return;
       }