dashboard-shell-shell 1.0.112 → 1.0.113

package/components/ActionDropdown.vue

@@ -222,7 +222,7 @@ export default {
 
           > .divider-inner {
             padding: 0;
-            border-bottom: 1px solid var(--dropdown-divider);
+            border-bottom: 0px solid var(--dropdown-divider);
             width: 125%;
             margin: 0 auto;
           }

package/components/ActionDropdownShell.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
+type HiddenAction = {
+  action: string;
+  enabled: boolean;
+  icon: string;
+  label: string;
+  bulkable: boolean;
+  bulkAction: string;
+  allEnabled: boolean;
+  anyEnabled: boolean;
+}
+
+defineProps<{
+  disabled: boolean,
+  hiddenActions: HiddenAction[],
+  actionTooltip: unknown,
+}>();
+
+const emit = defineEmits(['click', 'mouseover', 'mouseleave']);
+
+const applyTableAction = (act: HiddenAction, args: unknown, event: Event) => {
+  emit('click', act, args, event);
+};
+
+const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' | 'mouseleave' = 'mouseover') => {
+  emit(event, act);
+};
+</script>
+
+<template>
+  <rc-dropdown
+    :distance="14"
+    placement="bottom"
+  >
+    <rc-dropdown-trigger
+      class="bulk-actions-dropdown"
+      :disabled="disabled"
+    >
+      <template #before>
+        <i class="icon icon-gear" />
+      </template>
+      <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
+      <template #after>
+        <i class="ml-10 icon icon-chevron-down" />
+      </template>
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <rc-dropdown-item
+        v-for="(act, i) in hiddenActions"
+        :key="i"
+        v-clean-tooltip="{
+          content: actionTooltip,
+          placement: 'right'
+        }"
+        :disabled="!act.enabled"
+        @click="applyTableAction(act, null, $event)"
+        @mouseover="setBulkActionOfInterest(act)"
+        @mouseleave="setBulkActionOfInterest(null, 'mouseleave')"
+      >
+        <template #before>
+          <i
+            v-if="act.icon"
+            :class="act.icon"
+          />
+        </template>
+        <span v-clean-html="act.label" />
+      </rc-dropdown-item>
+    </template>
+  </rc-dropdown>
+</template>

package/components/ActionMenu.vue

@@ -305,7 +305,7 @@ export default {
     color: var(--dropdown-text);
     background-color: var(--dropdown-bg);
     border: 1px solid var(--dropdown-border);
-    border-radius: 5px;
+    border-radius: 3px;
     box-shadow: 0 5px 20px var(--shadow);
 
     LI {
@@ -326,7 +326,7 @@ export default {
 
       &.divider {
         padding: 0;
-        border-bottom: 1px solid var(--dropdown-divider);
+        border-bottom: 0px solid var(--dropdown-divider);
       }
 
       &:not(.divider):hover {

package/components/ActionMenuShell.vue

@@ -89,6 +89,7 @@ const menuOptions = () => {
 
   return options.value;
 };
+
 </script>
 
 <template>

package/components/AppModal.vue

@@ -1,6 +1,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { DEFAULT_FOCUS_TRAP_OPTS, useBasicSetupFocusTrap, getFirstFocusableElement } from '@shell/composables/focusTrap';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  useBasicSetupFocusTrap,
+  getFirstFocusableElement,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
 
 export const DEFAULT_ITERABLE_NODE_SELECTOR = 'body;';
 
@@ -80,7 +85,21 @@ export default defineComponent({
     returnFocusFirstIterableNodeSelector: {
       type:    String,
       default: DEFAULT_ITERABLE_NODE_SELECTOR,
-    }
+    },
+    /**
+     * trigger focus trap - but watcher based
+     */
+    triggerFocusTrapWatcherBased: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * watcher-based focus trap variable to watch
+     */
+    focusTrapWatcherBasedVariable: {
+      type:    Boolean,
+      default: false,
+    },
   },
   computed: {
     modalWidth(): string {
@@ -131,7 +150,19 @@ export default defineComponent({
         };
       }
 
-      useBasicSetupFocusTrap('#modal-container-element', opts);
+      if (!props.triggerFocusTrapWatcherBased) {
+        useBasicSetupFocusTrap('#modal-container-element', opts);
+      }
+    }
+  },
+  created() {
+    // This usecase is to cover the PromptModal scenario where it's renders a generic component inside.
+    // Due to the architecture of the PromptModal it needs to be handled with a watcher based focus trap
+    // but with a dedicated unmount hook
+    if (this.triggerFocusTrapWatcherBased) {
+      const opts:any = DEFAULT_FOCUS_TRAP_OPTS;
+
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => this.focusTrapWatcherBasedVariable, '#modal-container-element', opts, true);
     }
   },
   mounted() {
@@ -150,6 +181,14 @@ export default defineComponent({
         this.$emit('close');
       }
     },
+    close(event: MouseEvent) {
+      if (
+        this.$refs.modalRef
+      ) {
+        this.$emit('close');
+      }
+      // this.$emit('close');
+    },
     handleEscapeKey(event: KeyboardEvent) {
       if (this.clickToClose && event.key === 'Escape') {
         this.$emit('close');
@@ -190,8 +229,20 @@ export default defineComponent({
           :style="modalStyles"
           @click.stop
         >
+        <div
+            class="close-dailog-icon"
+          >
+            <button
+              class="btn btn-sm role-link hide-bar"
+              @click="close"
+            >
+              <i class="icon icon-x" />
+            </button>
+          </div>
+        <div>
           <slot><!--Empty content--></slot>
         </div>
+        </div>
       </div>
     </transition>
   </teleport>
@@ -204,18 +255,21 @@ export default defineComponent({
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: var(--overlay-bg);
+    /* background-color: var(--overlay-bg); */
+    background-color: var(--overlay-model-bg);
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: z-index('modalOverlay');
+    /* z-index: z-index('modalOverlay'); */
+    z-index: 50;
 
     .modal-container {
       background-color: var(--modal-bg);
       border-radius: var(--border-radius);
       max-height: 95vh;
       overflow: auto;
-      border: 2px solid var(--modal-border);
+      border: 0px;
+      position: relative;
     }
   }
 
@@ -228,4 +282,22 @@ export default defineComponent({
   .modal-fade-leave-to {
     opacity: 0;
   }
+  .hide-bar{
+    width: 32px;
+    min-width: 32px !important;
+  }
+  .close-dailog-icon{
+    position: absolute;
+    right: 13px;
+    top: 18px;
+    & > button{
+      color:var(--body-text) !important;
+      min-width: 32px !important;
+      width: 32px !important;
+      & > button:hover{
+        color:var(--body-text) !important;
+      }
+    }
+
+  }
 </style>

package/components/AssignTo.vue

@@ -115,6 +115,7 @@ export default {
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card
@@ -157,17 +158,20 @@ export default {
       </template>
 
       <template #actions>
-        <button
-          class="btn role-secondary"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-
-        <AsyncButton
-          mode="apply"
-          @click="apply"
-        />
+        <div class="actions-container">
+          <button
+            class="btn role-secondary"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+
+          <AsyncButton
+            class="apply-btn"
+            mode="apply"
+            @click="apply"
+          />
+        </div>
       </template>
     </Card>
   </app-modal>
@@ -181,5 +185,15 @@ export default {
     & ::-webkit-scrollbar-corner {
       background: rgba(0,0,0,0);
     }
+
+    .actions-container {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+
+      .apply-btn {
+        margin-left: 20px;
+      }
+    }
   }
 </style>

package/components/AsyncButton.vue

@@ -11,6 +11,7 @@ export const ASYNC_BUTTON_STATES = {
 
 const TEXT = 'text';
 const TOOLTIP = 'tooltip';
+const DISABLED_CLASS_STYLE = 'btn-disabled';
 
 export type AsyncButtonCallback = (success: boolean) => void;
 
@@ -152,9 +153,29 @@ export default defineComponent({
         out[`btn-${ this.size }`] = true;
       }
 
+      // while we are waiting for the async button to get
+      // it's callback we want to the button to appear as disabled
+      // but not being actually disabled as need it to be
+      // able to return the keyboard navigation focus back to it
+      // which can't be done while actually disabled, as per
+      // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols
+      if (this.phase === ASYNC_BUTTON_STATES.WAITING) {
+        out[DISABLED_CLASS_STYLE] = true;
+      }
+
+      // used to assist e2e testing mostly when waiting for button to return
+      // to it's normal state/phase
+      if (this.phase === ASYNC_BUTTON_STATES.ACTION) {
+        out['ready-for-action'] = true;
+      }
+
       return out;
     },
 
+    appearsDisabled(): boolean {
+      return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
+    },
+
     displayIcon(): string {
       const exists = this.$store.getters['i18n/exists'];
       const t = this.$store.getters['i18n/t'];
@@ -204,10 +225,6 @@ export default defineComponent({
       return this.phase === ASYNC_BUTTON_STATES.WAITING;
     },
 
-    isDisabled(): boolean {
-      return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
-    },
-
     isManualRefresh() {
       return this.mode === 'manual-refresh';
     },
@@ -232,7 +249,7 @@ export default defineComponent({
 
   methods: {
     clicked() {
-      if ( this.isDisabled ) {
+      if ( this.appearsDisabled ) {
         return;
       }
 
@@ -283,8 +300,8 @@ export default defineComponent({
     :class="classes"
     :name="name"
     :type="type"
-    :disabled="isDisabled"
-    :aria-disabled="isDisabled"
+    :disabled="disabled"
+    :aria-disabled="appearsDisabled"
     :tab-index="tabIndex"
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"

package/components/BannerGraphic.vue

@@ -36,6 +36,7 @@ export default {
         data-testid="banner-brand__img"
         file-name="banner.svg"
         :draggable="false"
+        :alt="t('landing.bannerImage')"
       />
     </div>
     <div

package/components/ButtonDropdown.vue

@@ -196,7 +196,8 @@ export default {
     @update:modelValue="$emit('click-action', $event)"
   >
     <template #no-options>
-      <slot name="no-options" />
+      暂无数据
+      <!-- <slot name="no-options" /> -->
     </template>
 
     <template #selected-option="option">
@@ -247,16 +248,35 @@ export default {
   }
 }
 .button-dropdown {
-  background: var(--accent-btn);
+  /* background: var(--accent-btn); */
+  background: var(--accent-btn-hover);
   border: solid 1px var(--link);
   color: var(--link);
   padding: 0;
 
+  &{
+    :deep() .vs__dropdown-toggle .vs__actions,
+    :deep() .vs__selected-options {
+      background: var(--accent-btn-hover);
+    }
+    :deep() .vs__selected-options .vs__selected button {
+      background-color: transparent;
+      color: var(--accent-btn-hover-text);
+    }
+    :deep() .vs__dropdown-toggle .vs__actions {
+      &:after {
+        color: var(--accent-btn-hover-text);
+        padding-top: 10px;
+      }
+    }
+  }
+
   &.vs--open :deep() {
     outline: none;
     box-shadow: none;
   }
 
+
   &:hover {
     :deep() .vs__dropdown-toggle .vs__actions,
     :deep() .vs__selected-options {
@@ -275,6 +295,7 @@ export default {
 
   :deep() > .vs__dropdown-toggle {
     width: 100%;
+    width: 100px;
     display: grid;
     grid-template-columns: 75% 25%;
     border: none;
@@ -283,7 +304,7 @@ export default {
     .vs__actions {
 
       &:after {
-        color: var(--link);
+        color: var(--accent-btn-hover-text);
         line-height: 1;
       }
     }
@@ -297,7 +318,8 @@ export default {
       button {
         border: none;
         background: transparent;
-        color: var(--link);
+        color: var(--accent-btn-hover-text);
+        min-width: 83px;
       }
     }
     .vs__search {

package/components/ButtonGroup.vue

@@ -77,6 +77,9 @@ export default {
       const tooltip = opt.tooltipKey ? this.t(opt.tooltipKey) : opt.tooltip;
 
       return ariaLabel || tooltip || label || undefined;
+    },
+    isPressed(opt) {
+      return this.value === opt.value;
     }
   }
 };
@@ -97,6 +100,7 @@ export default {
       :disabled="disabled || opt.disabled"
       role="button"
       :aria-label="actionAriaLabel(opt)"
+      :aria-pressed="isPressed(opt)"
       @click="change(opt.value)"
     >
       <slot

package/components/ButtonMultiAction.vue

@@ -30,6 +30,7 @@ const buttonClass = computed(() => {
       class="icon icon-actions"
       :alt="t('sortableTable.tableActionsImgAlt')"
     />
+    <!-- <i style="font-style: normal;">操作</i> -->
   </button>
 </template>
 

package/components/CommunityLinks.vue

@@ -140,7 +140,7 @@ export default {
           :aria-label="t('footer.wechat.title')"
           role="link"
           @click="show"
-          @keyup.enter="show"
+          @keydown.enter="show"
         >
           {{ t('footer.wechat.title') }}
         </a>
@@ -151,6 +151,7 @@ export default {
       name="wechat-modal"
       height="auto"
       :width="640"
+      :trigger-focus-trap="true"
       @close="close"
     >
       <div class="wechat-modal">
@@ -164,8 +165,7 @@ export default {
             :aria-label="t('generic.close')"
             role="button"
             @click="close"
-            @keyup.enter="close"
-            @keyup.space="close"
+            @keydown.enter.stop
           >
             {{ t('generic.close') }}
           </button>

package/components/ConsumptionGauge.vue

@@ -59,7 +59,11 @@ export default {
     usedAsResourceName: {
       type:   Boolean,
       defaut: false
-    }
+    },
+    reserveText: {
+      type:   String,
+      defaut: '预留'
+    },
   },
   computed: {
     displayUnits() {
@@ -91,13 +95,13 @@ export default {
 </script>
 
 <template>
-  <div class="consumption-gauge">
+  <!-- <div class="consumption-gauge">
     <h3 v-if="resourceName && !usedAsResourceName">
       {{ resourceName }}
     </h3>
-    <div class="numbers">
+    <div class="numbers"> -->
       <!-- @slot Optional slot to use as the title rather than showing the resource name -->
-      <slot
+      <!-- <slot
         name="title"
         :amountTemplateValues="amountTemplateValues"
         :formattedPercentage="formattedPercentage"
@@ -118,7 +122,22 @@ export default {
         :color-stops="colorStops"
       />
     </div>
-  </div>
+  </div> -->
+  <div class="consumption-gauge">
+    <div
+      v-if="resourceName && !usedAsResourceName"
+      class="mb-20"
+    >
+      {{ resourceName }}
+    </div>
+    <slot
+      name="content"
+      :amountTemplateValues="amountTemplateValues"
+      :formattedPercentage="formattedPercentage"
+    >
+      <p>{{ formattedPercentage + '(共' + amountTemplateValues.total + ' ' + amountTemplateValues.unit + '，' + reserveText + ' ' + amountTemplateValues.used + ' ' + amountTemplateValues.unit + '）' }}</p>
+    </slot>
+    </div>
 </template>
 
 <style lang="scss">

package/components/CopyToClipboardText.vue

@@ -49,9 +49,10 @@ export default {
     v-if="text"
     class="copy-to-clipboard-text"
     role="button"
-    :aria-label="t('generic.copyToClipboard')"
     :class="{ 'copied': copied, 'plain': plain}"
     href="#"
+    :aria-label="t('generic.copyToClipboard')"
+    v-bind="$attrs"
     @click="clicked"
     @keyup.space="clicked"
   >

package/components/CruResource.vue

@@ -544,7 +544,10 @@ export default {
                       class="flex-right"
                     >{{ t('generic.moreInfo') }} <i class="icon icon-external-link" /></a>
                   </div>
-                  <hr v-if="subtype.description">
+                  <hr
+                    v-if="subtype.description"
+                    role="none"
+                  >
                   <div
                     v-if="subtype.description"
                     class="description"
@@ -621,14 +624,14 @@ export default {
                   </template>
                 </template>
                 <div class="controls-steps">
-                  <button
+                  <!-- <button
                     v-if="showYaml"
                     type="button"
                     class="btn role-secondary"
                     @click="showPreviewYaml"
                   >
                     <t k="cruResource.previewYaml" />
-                  </button>
+                  </button> -->
                   <template
                     v-if="showPrevious"
                     name="back"
@@ -708,7 +711,7 @@ export default {
               #default
             >
               <div>
-                <button
+                <!-- <button
                   v-if="showYaml"
                   :data-testid="componentTestid + '-yaml'"
                   type="button"
@@ -716,7 +719,7 @@ export default {
                   @click="showPreviewYaml"
                 >
                   <t k="cruResource.previewYaml" />
-                </button>
+                </button> -->
                 <AsyncButton
                   v-if="!showSubtypeSelection"
                   ref="save"
@@ -732,7 +735,7 @@ export default {
       </template>
       <!------ YAML ------>
       <!-- Hide this section until it's needed. This means we don't need to upfront create initialYaml -->
-      <section
+      <!-- <section
         v-else-if="showYaml && !showAsForm"
         class="cru-resource-yaml-container resource-container cru__content"
       >
@@ -806,7 +809,7 @@ export default {
             </slot>
           </template>
         </ResourceYaml>
-      </section>
+      </section> -->
     </component>
   </section>
 </template>
@@ -906,6 +909,8 @@ form.create-resource-container .cru {
     position: sticky;
     bottom: 0;
     background-color: var(--header-bg);
+    height: $footer-height;
+    box-sizing: border-box;
 
     // Overrides outlet padding
     margin-left: -$space-m;

package/components/CruResourceFooter.vue

@@ -115,12 +115,12 @@ export default {
 <style lang="scss">
 .cru-resource-footer {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   margin-top: 20px;
   z-index: z-index('cruFooter');
 
   .btn {
-    margin-left: 20px;
+    margin-right: 10px;
   }
 }