@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/PodSecurityAdmission.vue

@@ -128,7 +128,7 @@ export default defineComponent({
     updateLabels(): void {
       const nonPSALabels = pickBy(this.labels, (_, key) => !key.includes(this.labelsPrefix));
       const labels = PSAModes.reduce((acc, mode) => {
-        return this.psaControls[mode].active || this.labelsAlwaysActive ? {
+        return this.psaControls[mode]?.active || this.labelsAlwaysActive ? {
           ...acc,
           // Set default level if none
           [`${ this.labelsPrefix }${ mode }`]:         this.psaControls[mode].level || PSADefaultLevel,
@@ -213,18 +213,18 @@ export default defineComponent({
 
     <div
       v-for="(psaControl, level, i) in psaControls"
-      :key="'psaControl-' + i"
+      :key="i"
       class="row row--y-center mb-20"
     >
       <span class="col span-2">
         <Checkbox
           v-if="!labelsAlwaysActive"
-          v-model="psaControl.active"
+          v-model:value="psaControl.active"
           :data-testid="componentTestid + '--psaControl-' + i + '-active'"
           :label="level"
           :label-key="`podSecurityAdmission.labels.${ level }`"
           :disabled="isView"
-          @input="updateLabels()"
+          @update:value="updateLabels()"
         />
         <p v-else>
           <t :k="`podSecurityAdmission.labels.${level}`" />
@@ -237,24 +237,24 @@ export default defineComponent({
           span-4"
       >
         <LabeledSelect
-          v-model="psaControl.level"
+          v-model:value="psaControl.level"
           :data-testid="componentTestid + '--psaControl-' + i + '-level'"
           :disabled="isPsaControlDisabled(psaControl.active)"
           :options="options"
           :mode="mode"
-          @input="updateLabels()"
+          @update:value="updateLabels()"
         />
       </span>
 
       <span class="col span-4">
         <LabeledInput
-          v-model="psaControl.version"
+          v-model:value="psaControl.version"
           :data-testid="componentTestid + '--psaControl-' + i + '-version'"
           :disabled="isPsaControlDisabled(psaControl.active)"
           :options="options"
           :placeholder="t('podSecurityAdmission.version.placeholder', { psaControl: mode })"
           :mode="mode"
-          @input="updateLabels()"
+          @update:value="updateLabels()"
         />
       </span>
     </div>
@@ -272,28 +272,28 @@ export default defineComponent({
 
       <div
         v-for="(psaExemptionsControl, dimension, i) in psaExemptionsControls"
-        :key="'psaExemptionsControl-' + i"
+        :key="i"
         class="row row--y-center mb-20"
       >
         <span class="col span-2">
           <Checkbox
-            v-model="psaExemptionsControl.active"
+            v-model:value="psaExemptionsControl.active"
             :data-testid="componentTestid + '--psaExemptionsControl-' + i + '-active'"
             :label="dimension"
             :label-key="`podSecurityAdmission.labels.${ dimension }`"
             :disabled="isView"
-            @input="updateExemptions()"
+            @update:value="updateExemptions()"
           />
         </span>
         <span class="col span-8">
           <LabeledInput
-            v-model="psaExemptionsControl.value"
+            v-model:value="psaExemptionsControl.value"
             :data-testid="componentTestid + '--psaExemptionsControl-' + i + '-value'"
             :disabled="(isView || !psaExemptionsControl.active)"
             :options="options"
             :placeholder="t('podSecurityAdmission.exemptions.placeholder', { psaExemptionsControl: dimension })"
             :mode="mode"
-            @input="updateExemptions()"
+            @update:value="updateExemptions()"
           />
         </span>
       </div>

package/components/PromptChangePassword.vue

@@ -49,20 +49,20 @@ export default {
       class="prompt-password"
       :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        class="text-default-text"
-      >
-        {{ t("changePassword.title") }}
-      </h4>
-      <div slot="body">
+      <template #title>
+        <h4 class="text-default-text">
+          {{ t("changePassword.title") }}
+        </h4>
+      </template>
+
+      <template #body>
         <form @submit.prevent>
           <ChangePassword
             ref="changePassword"
             @valid="valid = $event"
           />
         </form>
-      </div>
+      </template>
 
       <template #actions>
         <!-- type reset is required by lastpass -->
@@ -88,7 +88,7 @@ export default {
 
 <style lang="scss" scoped>
   .prompt-password {
-    ::v-deep .card-wrap {
+    :deep() .card-wrap {
       display: flex;
       flex-direction: column;
 

package/components/PromptModal.vue

@@ -74,7 +74,7 @@ export default {
 
     // We're using register instead of just making use of $refs because the $refs is always undefined when referencing the component
     registerBackgroundClosing(fn) {
-      this.$set(this, 'backgroundClosing', fn);
+      this['backgroundClosing'] = fn;
     }
   },
 };

package/components/PromptRemove.vue

@@ -350,13 +350,12 @@ export default {
       class="prompt-remove"
       :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">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
@@ -364,35 +363,34 @@ export default {
             />
           </template>
 
-          <template>
-            <component
-              :is="removeComponent"
-              v-if="hasCustomRemove"
-              ref="customPrompt"
-              v-model="toRemove"
-              v-bind="_data"
-              :close="close"
-              :needs-confirm="needsConfirm"
-              :value="toRemove"
-              :names="names"
-              :type="type"
-              @errors="e => error = e"
-              @done="done"
+          <component
+            :is="removeComponent"
+            v-if="hasCustomRemove"
+            ref="customPrompt"
+            v-model:value="toRemove"
+            v-bind="_data"
+            :close="close"
+            :needs-confirm="needsConfirm"
+            :value="toRemove"
+            :names="names"
+            :type="type"
+            :done-location="doneLocation"
+            @errors="e => error = e"
+            @done="done"
+          />
+          <div
+            v-if="needsConfirm"
+            class="mt-10"
+          >
+            <span
+              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
             />
-            <div
-              v-if="needsConfirm"
-              class="mt-10"
-            >
-              <span
-                v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
-              />
-            </div>
-          </template>
+          </div>
         </div>
         <LabeledInput
           v-if="needsConfirm"
           id="confirm"
-          v-model="confirmName"
+          v-model:value="confirmName"
           v-focus
           :data-testid="componentTestid + '-input'"
           type="text"
@@ -411,21 +409,21 @@ export default {
           </div>
           <Checkbox
             v-if="chartsToRemoveIsApp"
-            v-model="chartsDeleteCrd"
+            v-model:value="chartsDeleteCrd"
             label-key="promptRemoveApp.removeCrd"
             class="mt-10 type"
-            @input="chartAddCrdToRemove"
+            @update:value="chartAddCrdToRemove"
           />
-        </labeledinput>
-        <template v-else>
+        </LabeledInput>
+        <div v-else-if="!hasCustomRemove">
           <div class="text-warning mb-10 mt-10">
             {{ warning }}
           </div>
           <div class="text-error mb-10 mt-10">
             {{ error }}
           </div>
-        </template>
-      </div>
+        </div>
+      </template>
       <template #actions>
         <button
           class="btn role-secondary"

package/components/PromptRestore.vue

@@ -149,7 +149,7 @@ export default {
 
       const defaultSnapshot = this.toRestore[0]?.type === SNAPSHOT ? this.toRestore[0].name : this.clusterSnapshots[0]?.value;
 
-      this.$set(this, 'selectedSnapshot', defaultSnapshot);
+      this['selectedSnapshot'] = defaultSnapshot;
     },
 
     async apply(buttonDone) {
@@ -220,76 +220,75 @@ export default {
       class="prompt-restore"
       :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        v-clean-html="t('promptRestore.title', null, true)"
-        class="text-default-text"
-      />
-
-      <div
-        slot="body"
-        class="pl-10 pr-10"
-      >
-        <form>
-          <h3 v-t="'promptRestore.name'" />
-          <div v-if="!isCluster">
-            {{ snapshot.nameDisplay }}
-          </div>
-
-          <LabeledSelect
-            v-if="isCluster"
-            v-model="selectedSnapshot"
-            :label="t('promptRestore.label')"
-            :placeholder="t('promptRestore.placeholder')"
-            :options="clusterSnapshots"
+      <template #title>
+        <h4
+          v-clean-html="t('promptRestore.title', null, true)"
+          class="text-default-text"
+        />
+      </template>
+
+      <template #body>
+        <div class="pl-10 pr-10">
+          <form>
+            <h3 v-t="'promptRestore.name'" />
+            <div v-if="!isCluster">
+              {{ snapshot.nameDisplay }}
+            </div>
+
+            <LabeledSelect
+              v-if="isCluster"
+              v-model:value="selectedSnapshot"
+              :label="t('promptRestore.label')"
+              :placeholder="t('promptRestore.placeholder')"
+              :options="clusterSnapshots"
+            />
+
+            <div class="spacer" />
+
+            <h3 v-t="'promptRestore.date'" />
+            <div>
+              <p>
+                <Date
+                  v-if="snapshot"
+                  :value="snapshot.createdAt || snapshot.created || snapshot.metadata.creationTimestamp"
+                />
+              </p>
+            </div>
+            <div class="spacer" />
+            <RadioGroup
+              v-model:value="restoreMode"
+              name="restoreMode"
+              label="Restore Type"
+              :labels="['Only etcd', 'Kubernetes version and etcd', 'Cluster config, Kubernetes version and etcd']"
+              :options="restoreModeOptions"
+            />
+          </form>
+        </div>
+      </template>
+
+      <template #actions>
+        <div class="dialog-actions">
+          <button
+            class="btn role-secondary"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+
+          <AsyncButton
+            mode="restore"
+            :disabled="!hasSnapshot"
+            @click="apply"
           />
 
-          <div class="spacer" />
-
-          <h3 v-t="'promptRestore.date'" />
-          <div>
-            <p>
-              <Date
-                v-if="snapshot"
-                :value="snapshot.createdAt || snapshot.created || snapshot.metadata.creationTimestamp"
-              />
-            </p>
-          </div>
-          <div class="spacer" />
-          <RadioGroup
-            v-model="restoreMode"
-            name="restoreMode"
-            label="Restore Type"
-            :labels="['Only etcd', 'Kubernetes version and etcd', 'Cluster config, Kubernetes version and etcd']"
-            :options="restoreModeOptions"
+          <Banner
+            v-for="(err, i) in errors"
+            :key="i"
+            color="error"
+            :label="err"
           />
-        </form>
-      </div>
-
-      <div
-        slot="actions"
-        class="dialog-actions"
-      >
-        <button
-          class="btn role-secondary"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-
-        <AsyncButton
-          mode="restore"
-          :disabled="!hasSnapshot"
-          @click="apply"
-        />
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
-      </div>
+        </div>
+      </template>
     </Card>
   </app-modal>
 </template>
@@ -314,7 +313,7 @@ export default {
     }
   }
 
-  .prompt-restore ::v-deep .card-wrap .card-actions {
+  .prompt-restore :deep() .card-wrap .card-actions {
     display: block;
 
     button:not(:last-child) {

package/components/Questions/Array.vue

@@ -8,7 +8,7 @@ export default {
 
   methods: {
     update(val) {
-      this.$emit('input', val);
+      this.$emit('update:value', val);
     }
   }
 };
@@ -18,13 +18,12 @@ export default {
   <div class="row">
     <div class="col span-6">
       <ArrayList
-        :key="question.variable"
-        v-model="value"
+        :value="value"
         :title="question.label"
         :mode="mode"
         :disabled="disabled"
         :protip="displayTooltip"
-        @input="update"
+        @update:value="update"
       />
     </div>
     <div

package/components/Questions/Boolean.vue

@@ -21,7 +21,7 @@ export default {
         :disabled="disabled"
         :tooltip="displayTooltip"
         :data-testid="`boolean-input-${question.variable}`"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div

package/components/Questions/CloudCredential.vue

@@ -40,7 +40,7 @@ export default {
         :required="question.required"
         :value="value"
         :tooltip="displayTooltip"
-        @input="!$fetchState.pending && $emit('input', $event)"
+        @update:value="!$fetchState.pending && $emit('update:value', $event)"
       />
     </div>
     <div class="col span-6 mt-10">

package/components/Questions/Enum.vue

@@ -38,7 +38,7 @@ export default {
         :disabled="disabled"
         :tooltip="displayTooltip"
         :searchable="question.searchable"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div

package/components/Questions/Float.vue

@@ -25,7 +25,7 @@ export default {
         :tooltip="displayTooltip"
         :rules="rules"
         :data-testid="`float-input-${question.variable}`"
-        @input="val = parseFloat($event); if ( !isNaN(val) ) { $emit('input', val) }"
+        @update:value="val = parseFloat($event); if ( !isNaN(val) ) { $emit('update:value', val) }"
       />
     </div>
     <div

package/components/Questions/Int.vue

@@ -25,7 +25,7 @@ export default {
         :tooltip="displayTooltip"
         :rules="rules"
         :data-testid="`int-input-${question.variable}`"
-        @input="val = parseInt($event, 10); if ( !isNaN(val) ) { $emit('input', val) }"
+        @update:value="val = parseInt($event, 10); if ( !isNaN(val) ) { $emit('update:value', val) }"
       />
     </div>
     <div

package/components/Questions/Question.js

@@ -139,7 +139,7 @@ export default {
     }
 
     if ( this.value === undefined && def !== undefined ) {
-      this.$emit('input', def);
+      this.$emit('update:value', def);
     }
   },
 };

package/components/Questions/QuestionMap.vue

@@ -9,7 +9,7 @@ export default {
 
   methods: {
     update(val) {
-      this.$emit('input', val);
+      this.$emit('update:value', val);
     }
   }
 };
@@ -28,14 +28,13 @@ export default {
     <div class="row">
       <div class="col span-12 mt-10">
         <KeyValue
-          :key="question.variable"
-          v-model="value"
+          :value="value"
           :title="question.label"
           :mode="mode"
           :protip="false"
           :disabled="disabled"
           :title-protip="displayTooltip"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>

package/components/Questions/Radio.vue

@@ -20,7 +20,7 @@ export default {
         :disabled="disabled"
         :label="displayLabel"
         :tooltip="displayTooltip"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div

package/components/Questions/Reference.vue

@@ -97,7 +97,7 @@ export default {
         :required="question.required"
         :value="value"
         :tooltip="displayTooltip"
-        @input="!$fetchState.pending && $emit('input', $event)"
+        @update:value="!$fetchState.pending && $emit('update:value', $event)"
       />
     </div>
     <div class="col span-6 mt-10">
@@ -120,7 +120,7 @@ export default {
         :required="question.required"
         :value="value"
         :tooltip="displayTooltip"
-        @input="!$fetchState.pending && $emit('input', $event)"
+        @update:value="!$fetchState.pending && $emit('update:value', $event)"
       />
     </div>
     <div class="col span-6 mt-10">

package/components/Questions/String.vue

@@ -35,7 +35,7 @@ export default {
         :tooltip="displayTooltip"
         :rules="rules"
         :data-testid="`string-input-${question.variable}`"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div

package/components/Questions/Yaml.vue

@@ -32,7 +32,7 @@ export default {
         :disabled="disabled"
         :value="value"
         :data-testid="`yaml-input-${question.variable}`"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div