@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/CreateDriver.vue

@@ -36,7 +36,7 @@ export default {
   <div>
     <div class="row mb-20">
       <LabeledInput
-        v-model.trim="value.url"
+        v-model:value.trim="value.url"
         :label="t('drivers.add.downloadUrl.label')"
         :placeholder="t('drivers.add.downloadUrl.placeholder', null, true)"
         :tooltip="t('drivers.add.downloadUrl.tooltip', null, true)"
@@ -48,7 +48,7 @@ export default {
     </div>
     <div class="row mb-20">
       <LabeledInput
-        v-model.trim="value.checksum"
+        v-model:value.trim="value.checksum"
         :label="t('drivers.add.checksum.label')"
         :tooltip="t('drivers.add.checksum.tooltip', null, true)"
         :mode="mode"
@@ -58,7 +58,7 @@ export default {
     </div>
     <div class="row mb-20">
       <LabeledInput
-        v-model.trim="value.uiUrl"
+        v-model:value.trim="value.uiUrl"
         :label="t('drivers.add.customUiUrl.label')"
         :tooltip="t('drivers.add.customUiUrl.tooltip', null, true)"
         :placeholder="t('drivers.add.customUiUrl.placeholder', null, true)"
@@ -69,7 +69,7 @@ export default {
     </div>
     <div class="col span-6">
       <ArrayList
-        v-model="value.whitelistDomains"
+        v-model:value="value.whitelistDomains"
         :protip="false"
         :mode="mode"
         :title="t('drivers.add.whitelist')"

package/components/CruResource.vue

@@ -53,7 +53,7 @@ export default {
     },
 
     resource: {
-      type:     Object,
+      type:     [String, Object],
       required: true
     },
 
@@ -275,7 +275,7 @@ export default {
     this.$store.dispatch('cru-resource/setCreateNamespace', false);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.$store.dispatch('cru-resource/setCreateNamespace', false);
   },
 
@@ -416,6 +416,10 @@ export default {
       if (this.preventEnterSubmit) {
         event.preventDefault();
       }
+    },
+
+    shouldProvideSlot(slot) {
+      return slot !== 'default' && typeof this.$slots[slot] === 'function';
     }
   },
 
@@ -443,6 +447,7 @@ export default {
     </p>
     <component
       :is="(isView? 'div' : 'form')"
+      :value="resource"
       data-testid="cru-form"
       class="create-resource-container cru__form"
       @submit.prevent
@@ -473,8 +478,8 @@ export default {
           :subtypes="subtypes"
         >
           <div
-            v-for="subtype in subtypes"
-            :key="subtype.id"
+            v-for="(subtype, i) in subtypes"
+            :key="i"
             class="subtype-banner"
             :class="{ selected: subtype.id === _selectedSubtype }"
             :data-testid="`subtype-banner-item-${subtype.id}`"
@@ -564,7 +569,10 @@ export default {
               #stepContainer="{activeStep}"
               class="step-container"
             >
-              <template v-for="step in steps">
+              <template
+                v-for="(step, i) in steps"
+                :key="i"
+              >
                 <div
                   v-if="step.name === activeStep.name || step.hidden"
                   :key="step.name"
@@ -589,13 +597,16 @@ export default {
                 >
                   <!-- 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
-                      :name="slot"
-                      v-bind="scope"
-                    />
+                    <template v-if="shouldProvideSlot(slot)">
+                      <slot
+                        :name="slot"
+                        v-bind="scope"
+                      />
+                    </template>
                   </template>
                   <div class="controls-steps">
                     <button
@@ -670,17 +681,22 @@ export default {
           >
             <!-- 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
-                :name="slot"
-                v-bind="scope"
-              />
+              <template v-if="shouldProvideSlot(slot)">
+                <slot
+                  :name="slot"
+                  v-bind="scope"
+                />
+              </template>
             </template>
-
-            <template #default>
-              <div v-if="!isView">
+            <template
+              v-if="!isView"
+              #default
+            >
+              <div>
                 <button
                   v-if="showYaml"
                   :data-testid="componentTestid + '-yaml'"

package/components/DashboardMetrics.vue

@@ -59,7 +59,7 @@ export default {
   >
     <div class="graph-options mb-10">
       <DashboardOptions
-        v-model="graphOptions"
+        v-model:value="graphOptions"
         :has-summary-and-detail="hasSummaryAndDetail"
       />
     </div>
@@ -100,7 +100,7 @@ export default {
 
 <style lang="scss" scoped>
 .dashboard-metrics {
-  & ::v-deep {
+  & :deep() {
     .external-link {
       position: absolute;
       left: 200px;
@@ -114,7 +114,7 @@ export default {
 }
 
 .dashboard-metrics.external-link-pull-left {
-  & ::v-deep {
+  & :deep() {
     .external-link {
       position: absolute;
       left: 10px;

package/components/DashboardOptions.vue

@@ -104,7 +104,7 @@ export default {
   <div class="graph-options">
     <div v-if="hasSummaryAndDetail">
       <ButtonGroup
-        v-model="value.type"
+        v-model:value="value.type"
         :options="detailSummaryOptions"
       />
     </div>
@@ -113,12 +113,12 @@ export default {
     </div>
     <div class="range-refresh">
       <LabeledSelect
-        v-model="value.range"
+        v-model:value="value.range"
         :options="rangeOptions"
         :label="t('graphOptions.range')"
       />
       <LabeledSelect
-        v-model="value.refreshRate"
+        v-model:value="value.refreshRate"
         :options="refreshOptions"
         :label="t('graphOptions.refresh')"
       />

package/components/DetailTop.vue

@@ -213,8 +213,8 @@ export default {
         class="details"
       >
         <div
-          v-for="detail in group"
-          :key="detail.label || detail.slotName"
+          v-for="(detail, i) in group"
+          :key="i"
           class="detail"
         >
           <span class="label">
@@ -241,7 +241,7 @@ export default {
         </span>
         <Tag
           v-for="(prop, key) in labels"
-          :key="key + prop"
+          :key="key"
         >
           <i
             v-if="internalIcons[key]"

package/components/DisableAuthProviderModal.vue

@@ -47,17 +47,16 @@ export default {
       class="disable-auth-provider"
       :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        class="text-default-text"
-      >
-        {{ t('promptRemove.title') }}
-      </h4>
-      <div slot="body">
+      <template #title>
+        <h4 class="text-default-text">
+          {{ t('promptRemove.title') }}
+        </h4>
+      </template>
+      <template #body>
         <div class="mb-10">
           <p v-clean-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
         </div>
-      </div>
+      </template>
       <template #actions>
         <button
           class="btn role-secondary"

package/components/EmberPage.vue

@@ -138,7 +138,7 @@ export default {
     this.initFrame();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('message', this.receiveMessage);
 
     if (this.heightSync) {

package/components/EtcdInfoBanner.vue

@@ -68,7 +68,7 @@ export default {
             margin-right: 5px;
         }
 
-        & ::v-deep label {
+        & :deep() label {
             color: var(--info);
         }
     }

package/components/ExplorerMembers.vue

@@ -48,15 +48,15 @@ export default {
 
     const projectRoleTemplateBindingSchema = this.$store.getters['rancher/schemaFor'](NORMAN.PROJECT_ROLE_TEMPLATE_BINDING);
 
-    this.$set(this, 'normanClusterRTBSchema', clusterRoleTemplateBindingSchema);
-    this.$set(this, 'normanProjectRTBSchema', projectRoleTemplateBindingSchema);
+    this['normanClusterRTBSchema'] = clusterRoleTemplateBindingSchema;
+    this['normanProjectRTBSchema'] = projectRoleTemplateBindingSchema;
 
     if (clusterRoleTemplateBindingSchema) {
       Promise.all([
         this.$store.dispatch(`rancher/findAll`, { type: NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING }, { root: true }),
         this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING })
       ]).then(([normanBindings]) => {
-        this.$set(this, 'normanClusterRoleTemplateBindings', normanBindings);
+        this['normanClusterRoleTemplateBindings'] = normanBindings;
         this.loadingClusterBindings = false;
       });
     }
@@ -64,13 +64,13 @@ export default {
     if (projectRoleTemplateBindingSchema) {
       this.$store.dispatch('rancher/findAll', { type: NORMAN.PROJECT_ROLE_TEMPLATE_BINDING }, { root: true })
         .then((bindings) => {
-          this.$set(this, 'projectRoleTemplateBindings', bindings);
+          this['projectRoleTemplateBindings'] = bindings;
           this.loadingProjectBindings = false;
         });
     }
 
     this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT })
-      .then((projects) => this.$set(this, 'projects', projects));
+      .then((projects) => (this['projects'] = projects));
 
     const hydration = {
       normanPrincipals:  this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
@@ -365,7 +365,6 @@ export default {
             <span
               v-for="(role, j) in row.allRoles"
               :key="j"
-
               ref="value"
               :data-testid="`role-value-${j}`"
               class="role"
@@ -385,11 +384,11 @@ export default {
             </span>
           </template>
           <template
-            v-for="project in projectsWithoutRoles"
+            v-for="(project, i) in projectsWithoutRoles"
+            :key="i"
             v-slot:[slotName(project)]
           >
             <tr
-              :key="project.id"
               class="main-row"
             >
               <td
@@ -438,7 +437,7 @@ export default {
 }
 
 .project-members {
-  & ::v-deep .group-bar{
+  & :deep() .group-bar{
     display: flex;
     justify-content: space-between;
   }

package/components/ExplorerProjectsNamespaces.vue

@@ -358,7 +358,7 @@ export default {
 </script>
 
 <template>
-  <div class="project-namespaces">
+  <div class="project-namespaces outlet">
     <Masthead
       :schema="projectSchema"
       :type-display="t('projectNamespaces.label')"
@@ -372,7 +372,7 @@ export default {
     >
       <template
         v-if="showCreateNsButton"
-        slot="extraActions"
+        #extraActions
       >
         <router-link
           :to="createNamespaceLocationFlatList()"
@@ -391,8 +391,8 @@ export default {
     />
     <ResourceTable
       ref="table"
+      v-bind="{...$attrs, class: null }"
       class="table project-namespaces-table"
-      v-bind="$attrs"
       :schema="schema"
       :headers="headers"
       :rows="filteredRows"
@@ -401,7 +401,6 @@ export default {
       :loading="loading"
       group-tooltip="resourceTable.groupBy.project"
       key-field="_key"
-      v-on="$listeners"
     >
       <template #group-by="group">
         <div
@@ -473,11 +472,11 @@ export default {
         </div>
       </template>
       <template
-        v-for="project in projectsWithoutNamespaces"
+        v-for="(project, i) in projectsWithoutNamespaces"
+        :key="i"
         v-slot:[slotName(project)]
       >
         <tr
-          :key="project.id"
           class="main-row"
         >
           <td
@@ -504,7 +503,7 @@ export default {
 </template>
 <style lang="scss" scoped>
 .project-namespaces {
-  & ::v-deep {
+  & :deep() {
     .project-namespaces-table table {
       table-layout: fixed;
     }

package/components/FileDiff.vue

@@ -120,7 +120,7 @@ export default {
 <style scoped lang="scss">
 @import 'node_modules/diff2html/bundles/css/diff2html.min.css';
 
-::v-deep .d2h-wrapper {
+:deep() .d2h-wrapper {
   .d2h-file-header {
     display: none;
   }

package/components/FixedBanner.vue

@@ -115,6 +115,7 @@ export default {
 
   watch: {
     bannerSetting: {
+      deep: true,
       handler(neu) {
         if (neu?.value && neu.value !== '') {
           try {

package/components/GlobalRoleBindings.vue

@@ -326,7 +326,7 @@ export default {
     <form v-if="selectedRoles">
       <div
         v-for="(sortedRole, roleType) in sortedRoles"
-        :key="getUnique(roleType)"
+        :key="roleType"
         class="role-group mb-10"
       >
         <Card
@@ -348,20 +348,19 @@ export default {
               :class="'checkbox-section--' + roleType"
             >
               <div
-                v-for="role in sortedRoles[roleType]"
-                :key="getUnique(roleType, role.id)"
+                v-for="(role, i) in sortedRoles[roleType]"
+                :key="i"
                 class="checkbox mb-10 mr-10"
               >
                 <Checkbox
-                  :key="getUnique(roleType, role.id, 'checkbox')"
-                  v-model="selectedRoles"
+                  v-model:value="selectedRoles"
                   :value-when-true="role.id"
                   :disabled="!!assignOnlyRoles[role.id]"
                   :label="role.nameDisplay"
                   :description="role.descriptionDisplay"
                   :mode="mode"
                   :data-testId="'grb-checkbox-' + role.id"
-                  @input="checkboxChanged"
+                  @update:value="checkboxChanged"
                 >
                   <template #label>
                     <div class="checkbox-label-slot">

package/components/GradientBox.vue

@@ -42,10 +42,9 @@ export default {
     style() {
       if (!this.plain) {
         const background = `background: transparent linear-gradient(94deg, ${ this.leftColor } 0%, ${ this.rightColor } 100%) 0% 0% no-repeat padding-box;`;
-        const border = this.showBorder ? `border: 1px solid ${ this.primaryColor };` : '';
         const borderLeft = this.showTab ? `border-left: 9px solid ${ this.primaryColor };` : '';
 
-        return `${ background }${ border }${ borderLeft }`;
+        return `${ background }${ borderLeft }`;
       }
 
       return '';

package/components/GrafanaDashboard.vue

@@ -95,7 +95,7 @@ export default {
     this.$refs.frame.onload = this.inject;
     this.poll();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.interval) {
       clearInterval(this.interval);
     }
@@ -130,11 +130,11 @@ export default {
             throw new Error('An error was detected in the iframe');
           }
 
-          this.$set(this, 'loading', !loaded);
-          this.$set(this, 'error', isFailure);
+          this['loading'] = !loaded;
+          this['error'] = isFailure;
         } catch (ex) {
-          this.$set(this, 'error', true);
-          this.$set(this, 'loading', false);
+          this['error'] = true;
+          this['loading'] = false;
           clearInterval(this.interval);
           this.interval = null;
         }
@@ -287,7 +287,7 @@ export default {
   min-height: 100%;
   min-width: 100%;
 
-  & ::v-deep .content {
+  & :deep() .content {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -298,7 +298,7 @@ export default {
     padding: 0;
   }
 
-  & ::v-deep .overlay {
+  & :deep() .overlay {
     position: static;
     background-color: initial;
   }

package/components/GrowlManager.vue

@@ -87,7 +87,7 @@ export default {
     <div class="growl-list">
       <div
         v-for="(growl, idx) in stack"
-        :key="growl.id"
+        :key="idx"
         :data-testid="`growl-list-item-${idx}`"
         :class="{'growl': true, ['bg-'+growl.color]: true}"
       >

package/components/HarvesterServiceAddOnConfig.vue

@@ -176,7 +176,7 @@ export default {
       <div class="col span-6">
         <LabeledSelect
           v-if="showShareIP"
-          v-model="sharedService"
+          v-model:value="sharedService"
           :mode="mode"
           :options="serviceOptions"
           :label="t('servicesPage.harvester.shareIP.label')"
@@ -184,7 +184,7 @@ export default {
         />
         <LabeledSelect
           v-else
-          v-model="ipam"
+          v-model:value="ipam"
           :mode="mode"
           :options="ipamOptions"
           :label="t('servicesPage.harvester.ipam.label')"

package/components/IconOrSvg.vue

@@ -16,7 +16,6 @@
  * and then injecting custom css into the document so that any icons included via svg will
  * show with the desired colors for the theme.
  */
-import Vue from 'vue';
 import { Solver } from '@shell/utils/svg-filter';
 import { colorToRgb, mapStandardColors, normalizeHex } from '@shell/utils/color';
 
@@ -153,7 +152,7 @@ export default {
         cssCache[className] = true;
       }
 
-      Vue.set(this, 'className', className);
+      this['className'] = className;
     }
   }
 };

package/components/Import.vue

@@ -139,11 +139,12 @@ export default {
             </div>
             <div class="col span-6">
               <LabeledSelect
-                v-model="defaultNamespace"
+                :value="defaultNamespace"
                 class="pull-right"
                 :options="namespaceOptions"
                 label-key="import.defaultNamespace.label"
                 mode="edit"
+                @update:value="newValue => defaultNamespace = newValue"
               />
             </div>
           </div>
@@ -170,7 +171,7 @@ export default {
       <YamlEditor
         v-else
         ref="yamleditor"
-        v-model="currentYaml"
+        v-model:value="currentYaml"
         class="yaml-editor"
       />
       <Banner
@@ -229,7 +230,7 @@ export default {
     min-height: $min;
     max-height: $max;
 
-    ::v-deep .code-mirror {
+    :deep() .code-mirror {
       .CodeMirror {
         position: initial;
       }

package/components/Inactivity.vue

@@ -62,7 +62,7 @@ export default {
       this.addIdleListeners();
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.removeEventListener();
     this.clearAllTimeouts();
   },
@@ -198,7 +198,7 @@ export default {
       <PercentageBar
         v-if="!isInactive"
         class="mt-20"
-        :value="timerPercentageLeft"
+        :modelValue="timerPercentageLeft"
         :color-stops="colorStops"
       />
     </template>

package/components/IndentedPanel.vue

@@ -5,7 +5,6 @@ export default {};
 <template>
   <div
     class="indented-panel"
-    v-on="$listeners"
   >
     <slot />
   </div>