@rancher/shell 2.0.1 → 3.0.0-rc.2

package/cloud-credential/vmwarevsphere.vue

@@ -55,7 +55,7 @@ export default {
           placeholder-key="cluster.credential.vmwarevsphere.server.placeholder"
           :required="true"
           :mode="mode"
-          @input="value.setData('vcenter', $event);"
+          @update:value="value.setData('vcenter', $event);"
         />
       </div>
       <div class="col span-6">
@@ -67,7 +67,7 @@ export default {
           min="1"
           max="65535"
           :mode="mode"
-          @input="value.setData('vcenterPort', $event);"
+          @update:value="value.setData('vcenterPort', $event);"
         />
       </div>
     </div>
@@ -78,7 +78,7 @@ export default {
           label-key="cluster.credential.vmwarevsphere.username.label"
           :required="true"
           :mode="mode"
-          @input="value.setData('username', $event);"
+          @update:value="value.setData('username', $event);"
         />
       </div>
       <div class="col span-6">
@@ -88,7 +88,7 @@ export default {
           :required="true"
           type="password"
           :mode="mode"
-          @input="value.setData('password', $event);"
+          @update:value="value.setData('password', $event);"
         />
       </div>
     </div>

package/components/ActionDropdown.vue

@@ -46,7 +46,7 @@ export default {
 
   methods: {
     hasSlot(name = 'default') {
-      return !!this.$slots[name] || !!this.$scopedSlots[name];
+      return !!this.$slots[name] || !!this.$slots.name();
     },
 
     // allows parent components to programmatically open the dropdown
@@ -62,7 +62,7 @@ export default {
       class="dropdown-button bg-primary"
       :class="{'one-action':!dualAction, [buttonSize]:true, 'disabled': disableButton}"
     >
-      <v-popover
+      <v-dropdown
         placement="bottom"
         :container="false"
         :disabled="disableButton"
@@ -82,10 +82,10 @@ export default {
             Button <i class="icon icon-chevron-down" />
           </button>
         </slot>
-        <template #popover>
+        <template #popper>
           <slot name="popover-content" />
         </template>
-      </v-popover>
+      </v-dropdown>
     </div>
   </div>
 </template>
@@ -123,7 +123,7 @@ export default {
   $sm-trigger-padding: 10px 10px 10px 10px;
   $lg-trigger-padding: 18px 10px 10px 10px;
 
-  .v-popover {
+  .v-popper {
     .text-right {
       margin-top: 5px;
     }
@@ -179,7 +179,7 @@ export default {
       &>.btn {
         padding: 15px 35px 15px 15px;
       }
-      .v-popover{
+      .v-popper{
         .trigger{
           position: absolute;
           top: 0px;
@@ -194,23 +194,19 @@ export default {
       }
     }
   }
-  .popover {
+  .v-popper__popper {
     border: none;
   }
-  .tooltip {
+  .v-popper__popper {
     margin-top: 0px;
 
-    &[x-placement^="bottom"] {
-      .tooltip-arrow {
-        border-bottom-color: var(--dropdown-border);
-
-        &:after {
-          border-bottom-color: var(--dropdown-bg);
-        }
+    &[data-popper-placement^="bottom"] {
+      .v-popper__arrow-container {
+        display: none;
       }
     }
 
-    .tooltip-inner {
+    .v-popper__inner {
       color: var(--dropdown-text);
       background-color: var(--dropdown-bg);
       border: 1px solid var(--dropdown-border);

package/components/ActionMenu.vue

@@ -257,8 +257,8 @@ export default {
     >
       <li
         v-for="(opt, i) in menuOptions"
-        :key="opt.action"
-        :disabled="opt.disabled"
+        :key="i"
+        :disabled="opt.disabled ? true : null"
         :class="{divider: opt.divider}"
         :data-testid="componentTestid + '-' + i + '-item'"
         @click="execute(opt, $event)"

package/components/AlertTable.vue

@@ -65,7 +65,7 @@ export default {
     this.fetchDeps();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.alertManagerPoller.stop();
   },
 

package/components/AppModal.vue

@@ -57,9 +57,13 @@ export default defineComponent({
   },
   computed: {
     modalWidth(): string {
-      const uom = typeof (this.width) === 'number' ? 'px' : '';
+      if (this.isValidWidth(this.width)) {
+        const uom = typeof (this.width) === 'number' ? 'px' : '';
 
-      return `${ this.width }${ uom }`;
+        return `${ this.width }${ uom }`;
+      }
+
+      return '600px';
     },
     stylesPropToObj(): object {
       return this.styles.split(';')
@@ -81,7 +85,7 @@ export default defineComponent({
   mounted() {
     document.addEventListener('keydown', this.handleEscapeKey);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('keydown', this.handleEscapeKey);
   },
   methods: {
@@ -98,17 +102,24 @@ export default defineComponent({
       if (this.clickToClose && event.key === 'Escape') {
         this.$emit('close');
       }
+    },
+    isValidWidth(value: number | string) {
+      if (typeof value === 'number') {
+        return value > 0;
+      }
+
+      if (typeof value === 'string') {
+        return /^(0*(?:[1-9][0-9]*|0)\.?\d*)+(px|%)$/.test(value);
+      }
+
+      return false;
     }
   }
 });
 </script>
 
 <template>
-  <mounting-portal
-    mountTo="#modals"
-    name="source"
-    append
-  >
+  <teleport to="#modals">
     <transition
       name="modal-fade"
       appear
@@ -130,7 +141,7 @@ export default defineComponent({
         </div>
       </div>
     </transition>
-  </mounting-portal>
+  </teleport>
 </template>
 
 <style lang="scss">

package/components/AssignTo.vue

@@ -4,6 +4,7 @@ import { FLEET, NORMAN } from '@shell/config/types';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import KeyValue from '@shell/components/form/KeyValue';
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import { exceptionToErrorsArray } from '@shell/utils/error';
@@ -16,6 +17,7 @@ export default {
     KeyValue,
     AsyncButton,
     Banner,
+    AppModal
   },
 
   data() {
@@ -119,42 +121,41 @@ export default {
       v-if="loaded"
       :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        v-clean-html="t('assignTo.title', {count: resourceCount}, true)"
-        class="text-default-text"
-      />
-
-      <div
-        slot="body"
-        class="pl-10 pr-10"
-      >
-        <form>
-          <LabeledSelect
-            v-model="moveTo"
-            :label="t('assignTo.workspace')"
-            :options="workspaceOptions"
-            placement="bottom"
-          />
-
-          <KeyValue
-            key="labels"
-            v-model="labels"
-            class="mt-20"
-            :add-label="t('labels.addSetLabel')"
-            :read-allowed="false"
-          />
-
-          <Banner
-            v-for="(err, i) in errors"
-            :key="i"
-            color="error"
-            :label="err"
-          />
-        </form>
-      </div>
-
-      <div slot="actions">
+      <template #title>
+        <h4
+          v-clean-html="t('assignTo.title', {count: resourceCount}, true)"
+          class="text-default-text"
+        />
+      </template>
+      <template #body>
+        <div class="pl-10 pr-10">
+          <form>
+            <LabeledSelect
+              v-model:value="moveTo"
+              :label="t('assignTo.workspace')"
+              :options="workspaceOptions"
+              placement="bottom"
+            />
+
+            <KeyValue
+              key="labels"
+              v-model:value="labels"
+              class="mt-20"
+              :add-label="t('labels.addSetLabel')"
+              :read-allowed="false"
+            />
+
+            <Banner
+              v-for="(err, i) in errors"
+              :key="i"
+              color="error"
+              :label="err"
+            />
+          </form>
+        </div>
+      </template>
+
+      <template #actions>
         <button
           class="btn role-secondary"
           @click="close"
@@ -166,7 +167,7 @@ export default {
           mode="apply"
           @click="apply"
         />
-      </div>
+      </template>
     </Card>
   </app-modal>
 </template>

package/components/AsyncButton.vue

@@ -126,6 +126,8 @@ export default defineComponent({
     return { timer };
   },
 
+  emits: ['click'],
+
   data() {
     return { phase: this.currentPhase };
   },
@@ -218,19 +220,14 @@ export default defineComponent({
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.timer) {
       clearTimeout(this.timer);
     }
   },
 
   methods: {
-    clicked($event: MouseEvent) {
-      if ($event) {
-        $event.stopPropagation();
-        $event.preventDefault();
-      }
-
+    clicked() {
       if ( this.isDisabled ) {
         return;
       }

package/components/ButtonDropdown.vue

@@ -181,7 +181,7 @@ export default {
     :clearable="false"
     :close-on-select="closeOnSelect"
     :filterable="false"
-    :value="buttonLabel"
+    :modelValue="buttonLabel"
     :options="dropdownOptions"
     :map-keydown="mappedKeys"
     :get-option-key="
@@ -191,9 +191,9 @@ export default {
     :selectable="selectable"
     @search:blur="onBlur"
     @search:focus="onFocus"
-    @input="$emit('click-action', $event)"
+    @update:modelValue="$emit('click-action', $event)"
   >
-    <template slot="no-options">
+    <template #no-options>
       <slot name="no-options" />
     </template>
 
@@ -210,21 +210,23 @@ export default {
     </template>
     <!-- Pass down templates provided by the caller -->
     <template
-      v-for="(_, slot) of $scopedSlots"
-      v-slot:[slot]="scope"
+      v-for="(_, slot) of $slots"
+      #[slot]="scope"
+      :key="slot"
     >
-      <slot
-        v-if="slot !== 'selected-option'"
-        :name="slot"
-        v-bind="scope"
-      />
+      <template v-if="slot !== 'selected-option' && typeof $slots[slot] === 'function'">
+        <slot
+          :name="slot"
+          v-bind="scope"
+        />
+      </template>
     </template>
   </v-select>
 </template>
 
 <style lang='scss' scoped>
 .button-dropdown.btn-sm {
-  ::v-deep > .vs__dropdown-toggle {
+  :deep() > .vs__dropdown-toggle {
     .vs__actions {
       &:after {
         font-size: 1.6rem;
@@ -233,7 +235,7 @@ export default {
   }
 }
 .button-dropdown.btn-lg {
-  ::v-deep > .vs__dropdown-toggle {
+  :deep() > .vs__dropdown-toggle {
     .vs__actions {
       &:after {
         font-size: 2.6rem;
@@ -247,28 +249,28 @@ export default {
   color: var(--link);
   padding: 0;
 
-  &.vs--open ::v-deep {
+  &.vs--open :deep() {
     outline: none;
     box-shadow: none;
   }
 
   &:hover {
-    ::v-deep .vs__dropdown-toggle .vs__actions,
-    ::v-deep .vs__selected-options {
+    :deep() .vs__dropdown-toggle .vs__actions,
+    :deep() .vs__selected-options {
       background: var(--accent-btn-hover);
     }
-    ::v-deep .vs__selected-options .vs__selected button {
+    :deep() .vs__selected-options .vs__selected button {
       background-color: transparent;
       color: var(--accent-btn-hover-text);
     }
-    ::v-deep .vs__dropdown-toggle .vs__actions {
+    :deep() .vs__dropdown-toggle .vs__actions {
       &:after {
         color: var(--accent-btn-hover-text);
       }
     }
   }
 
-  ::v-deep > .vs__dropdown-toggle {
+  :deep() > .vs__dropdown-toggle {
     width: 100%;
     display: grid;
     grid-template-columns: 75% 25%;
@@ -284,7 +286,7 @@ export default {
     }
   }
 
-  ::v-deep .vs__selected-options {
+  :deep() .vs__selected-options {
     .vs__selected {
       margin: unset;
       border: none;
@@ -305,7 +307,7 @@ export default {
     }
   }
 
-  ::v-deep .vs__dropdown-menu {
+  :deep() .vs__dropdown-menu {
     min-width: unset;
     width: fit-content;
   }

package/components/ButtonGroup.vue

@@ -61,7 +61,7 @@ export default {
 
   methods: {
     change(value) {
-      this.$emit('input', value);
+      this.$emit('update:value', value);
     }
   }
 };

package/components/Carousel.vue

@@ -111,7 +111,7 @@ export default {
     },
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.autoScrollSlideInterval) {
       clearInterval(this.autoScrollSlideInterval);
     }

package/components/Certificates.vue

@@ -118,7 +118,7 @@ export default defineComponent({
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // We're fetching secrets with a filter, clear it so as to not clash with other contexts
     this.$store.dispatch('cluster/forgetType', SECRET);
   },

package/components/ChartReadme.vue

@@ -31,7 +31,7 @@ export default {
     <div class="chart-readmes">
       <Markdown
         v-if="appReadme"
-        v-model="appReadme"
+        v-model:value="appReadme"
         class="md md-desc mb-20"
         @loaded="appReadmeLoaded = true"
       />
@@ -43,7 +43,7 @@ export default {
       </h1>
       <Markdown
         v-if="readme"
-        v-model="readme"
+        v-model:value="readme"
         class="md md-desc"
         @loaded="readmeLoaded = true"
       />
@@ -63,7 +63,7 @@ export default {
     max-width: 100%;
     line-height: 1.6;
 
-    ::v-deep {
+    :deep() {
       * + H1,
       * + H2,
       * + H3,
@@ -74,7 +74,7 @@ export default {
       }
     }
 
-    ::v-deep code {
+    :deep() code {
       font-size: 13.5px;
       white-space: break-spaces;
       word-wrap: break-word;
@@ -83,16 +83,16 @@ export default {
       border: 0;
     }
 
-    ::v-deep pre {
+    :deep() pre {
       white-space: break-spaces;
       word-break: break-word;
     }
 
-    ::v-deep  > h1:first-of-type {
+    :deep()  > h1:first-of-type {
       display: none;
     }
 
-    ::v-deep p {
+    :deep() p {
       margin-bottom: 0.5em;
     }
   }

package/components/CodeMirror.vue

@@ -173,7 +173,7 @@ export default {
           </div>
         </div>
       </div>
-      <codemirror
+      <Codemirror
         ref="codeMirrorRef"
         :value="value"
         :options="combinedOptions"
@@ -194,7 +194,7 @@ export default {
 <style lang="scss">
   $code-mirror-animation-time: 0.1s;
 
-  .code-mirror {
+  .codemirror-container {
     z-index: 0;
 
     // Keyboard mapping overlap

package/components/CommunityLinks.vue

@@ -103,8 +103,8 @@ export default {
         </h2>
       </template>
       <div
-        v-for="link in options"
-        :key="link.label"
+        v-for="(link, i) in options"
+        :key="i"
         class="support-link"
       >
         <router-link

package/components/ConsumptionGauge.vue

@@ -114,7 +114,7 @@ export default {
     </div>
     <div class="mt-10">
       <PercentageBar
-        :value="percentageBarValue"
+        :modelValue="percentageBarValue"
         :color-stops="colorStops"
       />
     </div>

package/components/ContainerResourceLimit.vue

@@ -97,7 +97,7 @@ export default {
         limitsGpu
       } = this;
 
-      this.$emit('input', cleanUp({
+      this.$emit('update:value', cleanUp({
         limitsCpu,
         limitsMemory,
         requestsCpu,
@@ -178,7 +178,7 @@ export default {
     <div class="row mb-20">
       <span class="col span-6">
         <UnitInput
-          v-model="requestsCpu"
+          v-model:value="requestsCpu"
           :placeholder="t('containerResourceLimit.cpuPlaceholder')"
           :label="t('containerResourceLimit.requestsCpu')"
           :mode="mode"
@@ -186,12 +186,12 @@ export default {
           :output-modifier="true"
           :base-unit="t('suffix.cpus')"
           data-testid="cpu-reservation"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
       <span class="col span-6">
         <UnitInput
-          v-model="requestsMemory"
+          v-model:value="requestsMemory"
           :placeholder="t('containerResourceLimit.memPlaceholder')"
           :label="t('containerResourceLimit.requestsMemory')"
           :mode="mode"
@@ -199,7 +199,7 @@ export default {
           :increment="1024"
           :output-modifier="true"
           data-testid="memory-reservation"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
     </div>
@@ -207,7 +207,7 @@ export default {
     <div class="row mb-20">
       <span class="col span-6">
         <UnitInput
-          v-model="limitsCpu"
+          v-model:value="limitsCpu"
           :placeholder="t('containerResourceLimit.cpuPlaceholder')"
           :label="t('containerResourceLimit.limitsCpu')"
           :mode="mode"
@@ -215,12 +215,12 @@ export default {
           :output-modifier="true"
           :base-unit="t('suffix.cpus')"
           data-testid="cpu-limit"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
       <span class="col span-6">
         <UnitInput
-          v-model="limitsMemory"
+          v-model:value="limitsMemory"
           :placeholder="t('containerResourceLimit.memPlaceholder')"
           :label="t('containerResourceLimit.limitsMemory')"
           :mode="mode"
@@ -228,7 +228,7 @@ export default {
           :increment="1024"
           :output-modifier="true"
           data-testid="memory-limit"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
     </div>
@@ -238,13 +238,13 @@ export default {
     >
       <span class="col span-6">
         <UnitInput
-          v-model="limitsGpu"
+          v-model:value="limitsGpu"
           :placeholder="t('containerResourceLimit.gpuPlaceholder')"
           :label="t('containerResourceLimit.limitsGpu')"
           :mode="mode"
           :base-unit="t('suffix.gpus')"
           data-testid="gpu-limit"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
     </div>

package/components/CountGauge.vue

@@ -78,7 +78,7 @@ export default {
     :class="{clickable}"
     :primary-color-var="primaryColorVar"
     :plain="plain"
-    @click.native="visitLocation()"
+    @click="visitLocation()"
   >
     <div
       v-if="graphical"