dashboard-shell-shell 1.0.111 → 1.0.113

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -4,6 +4,7 @@ import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml, generateRandomAlphaString } from '@shell/utils/string';
 import cronstrue from 'cronstrue';
+import 'cronstrue/locales/zh_CN';
 import { isValidCron } from 'cron-validator';
 import { debounce } from 'lodash';
 import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
@@ -148,7 +149,8 @@ export default defineComponent({
     return {
       updated:          false,
       validationErrors: '',
-      inputId:          `input-${ generateRandomAlphaString(12) }`
+      inputId:          `input-${ generateRandomAlphaString(12) }`,
+      describedById:    `described-by-${ generateRandomAlphaString(12) }`
     };
   },
 
@@ -212,7 +214,8 @@ export default defineComponent({
       }
 
       try {
-        const hint = cronstrue.toString(this.value as string || '', { verbose: true });
+        // const hint = cronstrue.toString(this.value as string || '', { verbose: true });
+        const hint = cronstrue.toString(this.value as string || '', { locale: 'zh_CN' });
 
         return hint;
       } catch (e) {
@@ -333,6 +336,24 @@ export default defineComponent({
 </script>
 
 <template>
+   <div class="label-input-all">
+    <slot name="label">
+      <label
+        v-if="hasLabel"
+        :for="inputId"
+      >
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+        />
+        <template v-else-if="label">{{ label }}</template>
+
+        <span
+          v-if="requiredField"
+          class="required"
+        >*</span>
+      </label>
+    </slot>
   <div
     :class="{
       'labeled-input': true,
@@ -347,7 +368,7 @@ export default defineComponent({
       [className]: true
     }"
   >
-    <slot name="label">
+    <!-- <slot name="label">
       <label
         v-if="hasLabel"
         :for="inputId"
@@ -363,7 +384,7 @@ export default defineComponent({
           class="required"
         >*</span>
       </label>
-    </slot>
+    </slot> -->
 
     <slot name="prefix" />
 
@@ -380,6 +401,7 @@ export default defineComponent({
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
+        :aria-describedby="cronHint || subLabel ? describedById : undefined"
         @update:value="onInput"
         @focus="onFocus"
         @blur="onBlur"
@@ -400,6 +422,7 @@ export default defineComponent({
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
+        :aria-describedby="cronHint || subLabel ? describedById : undefined"
         @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
@@ -428,17 +451,20 @@ export default defineComponent({
     >
       <div
         v-if="cronHint"
+        :id="describedById"
         role="alert"
         :aria-label="cronHint"
       >
         {{ cronHint }}
       </div>
       <div
-        v-if="subLabel"
+        v-else-if="subLabel"
+        :id="describedById"
         v-clean-html="subLabel"
       />
     </div>
   </div>
+</div>
 </template>
 <style scoped lang="scss">
 .labeled-input.view {
@@ -461,6 +487,21 @@ export default defineComponent({
     -moz-appearance: textfield;
   }
 }
+.label-input-all{
+  display: flex;
+  label{
+    width: 160px;
+    line-height: 32px;
+    .required{
+      color: red;
+    }
+  }
+}
+
+.v-popper--has-tooltip INPUT, .v-popper--has-tooltip INPUT:hover, .v-popper--has-tooltip INPUT:focus{
+  padding: 0px 0px 0px 11px;
+}
+
 </style>
 <style>
 .validation-message {

package/rancher-components/Form/Radio/RadioButton.vue

@@ -251,15 +251,21 @@ $fontColor: var(--input-label);
     cursor: not-allowed
   }
 
- .radio-custom {
-    height: 14px;
-    width: 14px;
-    min-height: 14px;
-    min-width: 14px;
+  .radio-custom {
+    height: 12px;
+    width: 12px;
+    min-height: 13px;
+    min-width: 13px;
     background-color: var(--input-bg);
     border-radius: 50%;
+    transition: all 0.3s ease-out;
     border: 1.5px solid var(--border);
-    margin-top: 5px;
+    margin-top: 4px;
+
+    &:focus {
+      outline: none;
+      border-radius: 50%;
+    }
   }
 
   input {
@@ -268,13 +274,31 @@ $fontColor: var(--input-label);
 
   .radio-custom {
     &[aria-checked="true"] {
-      background-color: var(--primary);
+      background-color: #fff;
       -webkit-transform: rotate(0deg) scale(1);
       -ms-transform: rotate(0deg) scale(1);
       transform: rotate(0deg) scale(1);
       opacity:1;
       border: 1.5px solid var(--primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
 
+     &::after {
+      background-color: var(--primary);
+      width: 7px;
+      height: 7px;
+      display: inline;
+      content: "";
+      /* position: absolute; */
+      /* top: 17%;
+      left: 19%;
+      margin-left: 0.4px; */
+      /* top: 1.5px;
+      left: 1.5px; */
+      border-radius: 50%;
+      }
       // Ensure that checked radio buttons are muted but still visibly selected when muted
       &.text-muted {
         opacity: .25;
@@ -297,7 +321,7 @@ $fontColor: var(--input-label);
     display: inline-flex;
     flex-direction: column;
 
-    margin: 3px 10px 0px 5px;
+    margin: 3px 16px 0px 5px;
   }
 }
 

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -199,33 +199,35 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
+  <fieldset>
     <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
       class="radio-group label"
     >
-      <slot name="label">
-        <h3>
-          <t
-            v-if="labelKey"
-            :k="labelKey"
-          />
-          <template v-else-if="label">
-            {{ label }}
-          </template>
-          <i
-            v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
-            class="icon icon-info icon-lg"
-          />
-          <i
-            v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
-            class="icon icon-info icon-lg"
-          />
-        </h3>
-      </slot>
+      <legend>
+        <slot name="label">
+          <span class="radio-group-title">
+            <t
+              v-if="labelKey"
+              :k="labelKey"
+            />
+            <template v-else-if="label">
+              {{ label }}
+            </template>
+            <i
+              v-if="tooltipKey"
+              v-clean-tooltip="t(tooltipKey)"
+              class="icon icon-info icon-lg"
+            />
+            <i
+              v-else-if="tooltip"
+              v-clean-tooltip="tooltip"
+              class="icon icon-info icon-lg"
+            />
+          </span>
+        </slot>
+      </legend>
     </div>
 
     <!-- Group -->
@@ -266,7 +268,7 @@ export default defineComponent({
         </slot>
       </div>
     </div>
-  </div>
+  </fieldset>
 </template>
 
 <style lang='scss'>
@@ -292,7 +294,12 @@ export default defineComponent({
   }
 
   .label{
-    font-size: 14px !important;
+    font-size: 12px !important;
   }
 }
+.radio-group-title{
+  font-size: 14px;
+  margin-bottom: 15px;
+  display: inline-block;
+}
 </style>

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.test.ts

@@ -91,4 +91,21 @@ describe('toggleSwitch.vue', () => {
     expect(wrapper.emitted('update:value')).toHaveLength(1);
     expect(wrapper.emitted('update:value')[0][0]).toBe(offValue);
   });
+
+  it('adds focus class when input is focused', async() => {
+    const wrapper = shallowMount(ToggleSwitch);
+
+    await wrapper.find('input').trigger('focus');
+
+    expect(wrapper.find('.slider').classes()).toContain('focus');
+  });
+
+  it('removes focus class when input is blurred', async() => {
+    const wrapper = shallowMount(ToggleSwitch);
+
+    await wrapper.find('input').trigger('focus');
+    await wrapper.find('input').trigger('blur');
+
+    expect(wrapper.find('.slider').classes()).not.toContain('focus');
+  });
 });

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
+import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';
 
 type StateType = boolean | 'true' | 'false' | undefined;
 
@@ -34,7 +34,7 @@ export default defineComponent({
   emits: ['update:value'],
 
   setup() {
-    const switchChrome = useTemplateRef<HTMLElement>('switchChrome');
+    const switchChrome = ref<HTMLElement | null>(null);
     const focus = () => {
       switchChrome.value?.classList.add('focus');
     };
@@ -43,7 +43,7 @@ export default defineComponent({
       switchChrome.value?.classList.remove('focus');
     };
 
-    const switchInput = useTemplateRef<HTMLInputElement>('switchInput');
+    const switchInput = ref<HTMLInputElement | null>(null);
 
     onMounted(() => {
       switchInput.value?.addEventListener('focus', focus);
@@ -54,6 +54,11 @@ export default defineComponent({
       switchInput.value?.removeEventListener('focus', focus);
       switchInput.value?.removeEventListener('blur', blur);
     });
+
+    return {
+      switchChrome,
+      switchInput,
+    };
   },
 
   data() {

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -26,7 +26,15 @@ export default defineComponent({
     hover: {
       type:    Boolean,
       default: true
-    }
+    },
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'labeledTooltip-info-icon'
+    },
   },
   computed: {
     iconClass(): string {
@@ -64,6 +72,7 @@ export default defineComponent({
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
         tabindex="0"
+        :data-testid="componentTestid"
       />
     </template>
     <template v-else>
@@ -99,9 +108,12 @@ export default defineComponent({
 
      .status-icon {
         position:  absolute;
-        right: 30px;
+        right: 5px;
+        top: 10px;
+        z-index: 3;
+        /* right: 30px;
         top: $input-padding-lg;
-        z-index: z-index(hoverOverContent);
+        z-index: z-index(hoverOverContent); */
      }
 
     @mixin tooltipColors($color) {

package/rancher-components/RcButton/RcButton.vue

@@ -15,6 +15,7 @@ const buttonRoles: { role: keyof ButtonRoleProps, className: string }[] = [
   { role: 'secondary', className: 'role-secondary' },
   { role: 'tertiary', className: 'role-tertiary' },
   { role: 'link', className: 'role-link' },
+  { role: 'multiAction', className: 'role-multi-action' },
   { role: 'ghost', className: 'role-ghost' },
 ];
 

package/rancher-components/RcButton/types.ts

@@ -9,6 +9,7 @@ export type ButtonRoleProps = {
   secondary?: boolean;
   tertiary?: boolean;
   link?: boolean;
+  multiAction?: boolean;
   ghost?: boolean;
 }
 

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -20,13 +20,22 @@
  *    </template>
  *  </rc-dropdown>
  */
-import { useTemplateRef } from 'vue';
+import { ref } from 'vue';
 import { useClickOutside } from '@shell/composables/useClickOutside';
 import { useDropdownContext } from '@components/RcDropdown/useDropdownContext';
 
-defineProps<{
-  ariaLabel?: string
-}>();
+import type { Placement } from 'floating-vue';
+
+withDefaults(
+  defineProps<{
+    // eslint-disable-next-line vue/require-default-prop
+    ariaLabel?: string;
+    // eslint-disable-next-line vue/require-default-prop
+    distance?: number;
+    placement?: Placement;
+  }>(),
+  { placement: 'bottom-end' }
+);
 
 const emit = defineEmits(['update:open']);
 
@@ -42,14 +51,14 @@ const {
 
 provideDropdownContext();
 
-const popperContainer = useTemplateRef<HTMLElement>('popperContainer');
-const dropdownTarget = useTemplateRef<HTMLElement>('dropdownTarget');
+// const popperContainer = ref(null);
+const dropdownTarget = ref(null);
 
 useClickOutside(dropdownTarget, () => showMenu(false));
 
 const applyShow = () => {
   registerDropdownCollection(dropdownTarget.value);
-  setFocus();
+  setFocus('down');
 };
 
 </script>
@@ -60,15 +69,30 @@ const applyShow = () => {
     :triggers="[]"
     :shown="isMenuOpen"
     :auto-hide="false"
-    :container="popperContainer"
-    :placement="'bottom-end'"
+    append-to-body
+    :placement="placement"
+    :distance="distance"
     @apply-show="applyShow"
+    popper-class="custom-dropdown" 
   >
     <slot name="default">
       <!--Empty slot content Trigger-->
     </slot>
 
     <template #popper>
+      <!-- <div
+        ref="dropdownTarget"
+        class="dropdownTarget"
+        tabindex="-1"
+        role="menu"
+        aria-orientation="vertical"
+        dropdown-menu-collection
+        :aria-label="ariaLabel || 'Dropdown Menu'"
+        @keydown="handleKeydown"
+        @keydown.down.prevent="setFocus('down')"
+        @keydown.up.prevent="setFocus('up')"
+        
+      > -->
       <div
         ref="dropdownTarget"
         class="dropdownTarget"
@@ -78,7 +102,10 @@ const applyShow = () => {
         dropdown-menu-collection
         :aria-label="ariaLabel || 'Dropdown Menu'"
         @keydown="handleKeydown"
-        @keydown.down="setFocus()"
+        @keydown.down.prevent="setFocus('down')"
+        @keydown.up.prevent="setFocus('up')"
+        @keydown.tab="showMenu(false)"
+        @keydown.escape="returnFocus"
       >
         <slot name="dropdownCollection">
           <!--Empty slot content-->
@@ -86,14 +113,13 @@ const applyShow = () => {
       </div>
     </template>
   </v-dropdown>
-  <div
+  <!-- <div
     ref="popperContainer"
     class="popperContainer"
     @keydown.tab="showMenu(false)"
     @keydown.escape="returnFocus"
   >
-    <!--Empty container for mounting popper content-->
-  </div>
+  </div> -->
 </template>
 
 <style lang="scss" scoped>
@@ -102,7 +128,8 @@ const applyShow = () => {
     &:deep(.v-popper__popper) {
 
       .v-popper__wrapper {
-        box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
+        box-shadow: 0 5px 20px var(--shadow);
+        /* box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.15); */
         border-radius: var(--border-radius-lg);
 
         .v-popper__arrow-container {
@@ -110,7 +137,9 @@ const applyShow = () => {
         }
 
         .v-popper__inner {
-          padding: 10px 0 10px 0;
+          /* padding: 10px 0 10px 0; */
+          padding: 0px;
+          /* min-width: 145px; */
         }
       }
     }
@@ -121,4 +150,14 @@ const applyShow = () => {
       outline: none;
     }
   }
+
+  .custom-dropdown{
+    .v-popper__wrapper{
+      .v-popper__inner {
+        padding: 0px;
+      }
+    }
+  }
+
 </style>
+

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -83,7 +83,7 @@ const handleActivate = (e: KeyboardEvent) => {
     :aria-disabled="disabled || false"
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
-    @keydown.up.down.stop="handleKeydown"
+    @keydown.up.down.prevent.stop="handleKeydown"
   >
     <slot name="before">
       <!--Empty slot content-->
@@ -99,9 +99,10 @@ const handleActivate = (e: KeyboardEvent) => {
     display: flex;
     gap: 8px;
     align-items: center;
-    padding: 9px 8px;
-    margin: 0 9px;
-    border-radius: 4px;
+    padding: 8px 10px;
+    min-width: 145px;
+    /* margin: 0 9px; */
+    /* border-radius: 4px; */
 
     &:hover {
       cursor: pointer;

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -8,8 +8,11 @@ import {
 import { RcDropdownMenuComponentProps, DropdownOption } from './types';
 import IconOrSvg from '@shell/components/IconOrSvg';
 
-// eslint-disable-next-line vue/no-setup-props-destructure
-const { buttonRole = 'primary', buttonSize = '' } = defineProps<RcDropdownMenuComponentProps>();
+withDefaults(defineProps<RcDropdownMenuComponentProps>(), {
+  buttonRole: 'primary',
+  buttonSize: undefined,
+  isDetail: false,
+});
 
 const emit = defineEmits(['update:open', 'select']);
 
@@ -29,7 +32,8 @@ const hasOptions = (options: DropdownOption[]) => {
       :data-testid="dataTestid"
       :aria-label="buttonAriaLabel"
     >
-      <i class="icon icon-actions" />
+      <i style="font-style: normal;" v-if="buttonRole === 'link'">操作</i>
+      <i class="icon icon-actions" v-else/>
     </rc-dropdown-trigger>
     <template #dropdownCollection>
       <template
@@ -40,7 +44,7 @@ const hasOptions = (options: DropdownOption[]) => {
           v-if="!a.divider"
           @click="(e: MouseEvent) => emit('select', e, a)"
         >
-          <template #before>
+          <!-- <template #before>
             <IconOrSvg
               v-if="a.icon || a.svg"
               :icon="a.icon"
@@ -48,12 +52,12 @@ const hasOptions = (options: DropdownOption[]) => {
               class="icon"
               color="header"
             />
-          </template>
+          </template> -->
           {{ a.label }}
         </rc-dropdown-item>
-        <rc-dropdown-separator
+        <!-- <rc-dropdown-separator
           v-else
-        />
+        /> -->
       </template>
       <rc-dropdown-item
         v-if="!hasOptions(options)"

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -2,7 +2,7 @@
 /**
  * A button that opens a menu. Used in conjunction with `RcDropdown.vue`.
  */
-import { inject, onMounted, useTemplateRef } from 'vue';
+import { inject, onMounted, ref } from 'vue';
 import { RcButton, RcButtonType } from '@components/RcButton';
 import { DropdownContext, defaultContext } from './types';
 
@@ -13,7 +13,7 @@ const {
   handleKeydown,
 } = inject<DropdownContext>('dropdownContext') || defaultContext;
 
-const dropdownTrigger = useTemplateRef<RcButtonType>('dropdownTrigger');
+const dropdownTrigger = ref<RcButtonType | null>(null);
 
 onMounted(() => {
   registerTrigger(dropdownTrigger.value);
@@ -35,8 +35,18 @@ defineExpose({ focus });
     @keydown.enter.space="handleKeydown"
     @click="showMenu(true)"
   >
+    <template #before>
+      <slot name="before">
+        <!-- Empty Content -->
+      </slot>
+    </template>
     <slot name="default">
       <!--Empty slot content-->
     </slot>
+    <template #after>
+      <slot name="after">
+        <!-- Empty Content -->
+      </slot>
+    </template>
   </RcButton>
 </template>

package/rancher-components/RcDropdown/useDropdownCollection.ts

@@ -10,6 +10,7 @@ export const useDropdownCollection = () => {
   const dropdownItems = ref<Element[]>([]);
   const dropdownContainer = ref<HTMLElement | null>(null);
   const firstDropdownItem = ref<HTMLElement | null>(null);
+  const lastDropdownItem = ref<HTMLElement | null>(null);
 
   /**
    * Registers the dropdown container and initializes dropdown items.
@@ -22,6 +23,12 @@ export const useDropdownCollection = () => {
       if (dropdownItems.value[0] instanceof HTMLElement) {
         firstDropdownItem.value = dropdownItems.value[0];
       }
+
+      const lastItem = dropdownItems.value[dropdownItems.value.length - 1];
+
+      if (lastItem instanceof HTMLElement) {
+        lastDropdownItem.value = lastItem;
+      }
     }
   };
 
@@ -40,6 +47,7 @@ export const useDropdownCollection = () => {
   return {
     dropdownItems,
     firstDropdownItem,
+    lastDropdownItem,
     dropdownContainer,
     registerDropdownCollection,
   };