@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/form/BannerSettings.vue

@@ -109,7 +109,7 @@ export default ({
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value[bannerType].text"
+            v-model:value="value[bannerType].text"
             :disabled="isUiDisabled"
             :label="t('banner.text')"
             type="multiline"
@@ -125,7 +125,7 @@ export default ({
             class="mt-10"
           >
             <Checkbox
-              v-model="showAsDialog"
+              v-model:value="showAsDialog"
               name="bannerDecoration"
               class="banner-decoration-checkbox"
               :mode="mode"
@@ -133,7 +133,7 @@ export default ({
               :tooltip="t('banner.showAsDialog.tooltip')"
             />
             <LabeledInput
-              v-model="buttonText"
+              v-model:value="buttonText"
               :disabled="!showAsDialog || isUiDisabled"
               :label="t('banner.buttonText')"
             />
@@ -141,7 +141,7 @@ export default ({
         </div>
         <div class="col span-2">
           <RadioGroup
-            v-model="value[bannerType].textAlignment"
+            v-model:value="value[bannerType].textAlignment"
             name="bannerAlignment"
             :data-testid="`banner_alignment_radio_options${bannerType}`"
             :label="t('banner.bannerAlignment.label')"
@@ -155,11 +155,11 @@ export default ({
             {{ t('banner.bannerDecoration.label') }}
           </h3>
           <div
-            v-for="o in textDecorationOptions"
-            :key="o.style"
+            v-for="(o, i) in textDecorationOptions"
+            :key="i"
           >
             <Checkbox
-              v-model="value[bannerType][o.style]"
+              v-model:value="value[bannerType][o.style]"
               name="bannerDecoration"
               :data-testid="`banner_decoration_checkbox${bannerType}${o.label}`"
               class="banner-decoration-checkbox"
@@ -170,7 +170,7 @@ export default ({
         </div>
         <div class="col span-2">
           <LabeledSelect
-            v-model="value[bannerType].fontSize"
+            v-model:value="value[bannerType].fontSize"
             :data-testid="`banner_font_size_options${bannerType}`"
             :disabled="isUiDisabled"
             :label="t('banner.bannerFontSize.label')"
@@ -181,7 +181,7 @@ export default ({
       <div class="row mt-10">
         <div class="col span-6">
           <ColorInput
-            v-model="value[bannerType].color"
+            v-model:value="value[bannerType].color"
             :default-value="themeVars.bannerTextColor"
             :label="t('banner.textColor')"
             :mode="mode"
@@ -189,7 +189,7 @@ export default ({
         </div>
         <div class="col span-6">
           <ColorInput
-            v-model="value[bannerType].background"
+            v-model:value="value[bannerType].background"
             :default-value="themeVars.bannerBgColor"
             :label="t('banner.background')"
             :mode="mode"

package/components/form/ChangePassword.vue

@@ -219,7 +219,7 @@ export default {
       }
 
       this.$emit('valid', isValid);
-      this.$emit('input', {
+      this.$emit('update:value', {
         password:          this.password,
         userChangeOnLogin: this.userChangeOnLogin
       });
@@ -303,19 +303,19 @@ export default {
       <div class="fields">
         <Checkbox
           v-if="isChange"
-          v-model="form.deleteKeys"
+          v-model:value="form.deleteKeys"
           label-key="changePassword.deleteKeys.label"
           class="mt-10"
         />
         <Checkbox
           v-if="isCreateEdit"
-          v-model="userChangeOnLogin"
+          v-model:value="userChangeOnLogin"
           label-key="changePassword.changeOnLogin.label"
           class="mt-10 type"
         />
         <Checkbox
           v-if="isCreateEdit"
-          v-model="isRandomGenerated"
+          v-model:value="isRandomGenerated"
           label-key="changePassword.generatePassword.label"
           class="mt-10 type"
         />
@@ -341,7 +341,7 @@ export default {
         >
         <Password
           v-if="isChange"
-          v-model="passwordCurrent"
+          v-model:value="passwordCurrent"
           data-testid="account__current_password"
           class="mt-10"
           :required="true"
@@ -353,7 +353,7 @@ export default {
         >
           <div :class="{'col': isCreateEdit, 'span-8': isCreateEdit}">
             <Password
-              v-model="passwordGen"
+              v-model:value="passwordGen"
               class="mt-10"
               :is-random="true"
               :required="false"
@@ -368,7 +368,7 @@ export default {
         >
           <div :class="{'col': isCreateEdit, 'span-4': isCreateEdit}">
             <Password
-              v-model="passwordNew"
+              v-model:value="passwordNew"
               data-testid="account__new_password"
               class="mt-10"
               :label="t('changePassword.userGen.newPassword.label')"
@@ -378,7 +378,7 @@ export default {
           </div>
           <div :class="{'col': isCreateEdit, 'span-4': isCreateEdit}">
             <Password
-              v-model="passwordConfirm"
+              v-model:value="passwordConfirm"
               data-testid="account__confirm_password"
               class="mt-10"
               :label="t('changePassword.userGen.confirmPassword.label')"
@@ -391,7 +391,7 @@ export default {
       </div>
       <Checkbox
         v-if="isChange"
-        v-model="isRandomGenerated"
+        v-model:value="isRandomGenerated"
         label-key="changePassword.generatePassword.label"
         class="mt-10 type"
       />

package/components/form/ColorInput.vue

@@ -59,7 +59,7 @@ export default {
 
   mounted() {
     // Ensures that if the default value is used, the model is updated with it
-    this.$emit('input', this.inputValue);
+    this.$emit('update:value', this.inputValue);
   }
 };
 </script>
@@ -89,7 +89,7 @@ export default {
           type="color"
           :disabled="mode !== editMode"
           :value="inputValue"
-          @input="$emit('input', $event.target.value)"
+          @input="$emit('update:value', $event.target.value)"
         >
       </span>
       <span class="text-muted color-value">{{ inputValue }}</span>

package/components/form/Command.vue

@@ -1,6 +1,4 @@
 <script>
-import Vue from 'vue';
-
 import { LabeledInput } from '@components/Form/LabeledInput';
 import ShellInput from '@shell/components/form/ShellInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
@@ -111,13 +109,13 @@ export default {
         const val = out[prop];
 
         if (val === '' || typeof val === 'undefined' || val === null) {
-          Vue.delete(this.value, prop);
+          delete this.value[prop];
         } else {
-          Vue.set(this.value, prop, val);
+          this.value[prop] = val;
         }
       }
 
-      this.$emit('input', this.value);
+      this.$emit('update:value', this.value);
     },
   },
 };
@@ -131,11 +129,11 @@ export default {
       >
         <slot name="entrypoint">
           <ShellInput
-            v-model="command"
+            v-model:value="command"
             :mode="mode"
             :label="t('workload.container.command.command')"
             :placeholder="t('generic.placeholder', {text: '/bin/sh'}, true)"
-            @input="update"
+            @update:value="update"
           />
         </slot>
       </div>
@@ -145,11 +143,11 @@ export default {
       >
         <slot name="command">
           <ShellInput
-            v-model="args"
+            v-model:value="args"
             :mode="mode"
             :label="t('workload.container.command.args')"
             :placeholder="t('generic.placeholder', {text: '/usr/sbin/httpd -f httpd.conf'}, true)"
-            @input="update"
+            @update:value="update"
           />
         </slot>
       </div>
@@ -161,11 +159,11 @@ export default {
         data-testid="input-command-workingDir"
       >
         <LabeledInput
-          v-model="workingDir"
+          v-model:value="workingDir"
           :mode="mode"
           :label="t('workload.container.command.workingDir')"
           :placeholder="t('generic.placeholder', {text: '/myapp'}, true)"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div class="col span-6">
@@ -178,11 +176,11 @@ export default {
             data-testid="input-command-stdin"
           >
             <LabeledSelect
-              v-model="stdinSelect"
+              v-model:value="stdinSelect"
               :label="t('workload.container.command.stdin')"
               :options="commandOptions"
               :mode="mode"
-              @input="update"
+              @update:value="update"
             />
           </div>
           <div
@@ -191,10 +189,10 @@ export default {
             data-testid="input-command-tty"
           >
             <Checkbox
-              v-model="tty"
+              v-model:value="tty"
               :mode="mode"
               :label="t('workload.container.command.tty')"
-              @input="update"
+              @update:value="update"
             />
           </div>
         </div>

package/components/form/EnvVars.vue

@@ -59,7 +59,7 @@ export default {
   watch: {
     'value.tty'(neu) {
       if (neu) {
-        this.$set(this.value, 'stdin', true);
+        this.value['stdin'] = true;
       }
     }
   },
@@ -84,8 +84,8 @@ export default {
           envVar.push(row.value);
         }
       });
-      this.$set(this.value, 'env', envVar);
-      this.$set(this.value, 'envFrom', envVarSource);
+      this.value['env'] = envVar;
+      this.value['envFrom'] = envVarSource;
     },
 
     updateRow() {
@@ -107,16 +107,16 @@ export default {
   <div :style="{'width':'100%'}">
     <div
       v-for="(row, i) in allEnv"
-      :key="row.id"
+      :key="i"
     >
       <ValueFromResource
-        v-model="row.value"
+        v-model:value="row.value"
         :all-secrets="secrets"
         :all-config-maps="configMaps"
         :mode="mode"
         :loading="loading"
         @remove="removeRow(i)"
-        @input="updateRow"
+        @update:value="updateRow"
       />
     </div>
     <button
@@ -131,7 +131,7 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-.value-from ::v-deep {
+.value-from :deep() {
   .v-select {
     height: 50px;
   }

package/components/form/FileImageSelector.vue

@@ -47,7 +47,7 @@ export default {
      * @param {string} event
      */
     setIcon(event) {
-      this.$emit('input', event);
+      this.$emit('update:value', event);
     },
     setError(error) {
       this.$emit('error', error);

package/components/form/GitPicker.vue

@@ -415,7 +415,7 @@ export default defineComponent({
     <div class="row">
       <div class="spacer">
         <LabeledInput
-          v-model="selectedAccOrOrg"
+          v-model:value="selectedAccOrOrg"
           data-testid="git_picker-username-or-org"
           :tooltip="t(`gitPicker.${ type }.username.tooltip`)"
           :label="t(`gitPicker.${ type }.username.inputLabel`)"
@@ -423,7 +423,7 @@ export default defineComponent({
           :rules="[reposRules]"
           :delay="debounceTime"
           :status="status(hasError.repo)"
-          @input="fetchRepos"
+          @update:value="fetchRepos"
         />
       </div>
 
@@ -432,7 +432,7 @@ export default defineComponent({
         class="spacer"
       >
         <LabeledSelect
-          v-model="selectedRepo"
+          v-model:value="selectedRepo"
           :required="true"
           :label="t(`gitPicker.${ type }.repo.inputLabel`)"
           :options="preparedRepos"
@@ -443,7 +443,7 @@ export default defineComponent({
           :status="status(hasError.repo)"
           :option-label="'name'"
           @search="onSearchRepo"
-          @input="fetchBranches"
+          @update:value="fetchBranches"
         />
       </div>
       <!-- Deals with Branches  -->
@@ -452,7 +452,7 @@ export default defineComponent({
         class="spacer"
       >
         <LabeledSelect
-          v-model="selectedBranch"
+          v-model:value="selectedBranch"
           :required="true"
           :label="t(`gitPicker.${ type }.branch.inputLabel`)"
           :options="preparedBranches"
@@ -463,7 +463,7 @@ export default defineComponent({
           :status="status(hasError.branch)"
           :option-label="'name'"
           @search="onSearchBranch"
-          @input="fetchCommits"
+          @update:value="fetchCommits"
         />
       </div>
       <!-- Deals with Commits, display & allow to pick from it  -->
@@ -488,7 +488,7 @@ export default defineComponent({
             <RadioButton
               :value="selectedCommitId"
               :val="row.commitId"
-              @input="final($event)"
+              @update:value="final($event)"
             />
           </template>
 

package/components/form/HealthCheck.vue

@@ -32,7 +32,7 @@ export default {
     update() {
       const { readinessProbe, livenessProbe, startupProbe } = this;
 
-      this.$emit('input', {
+      this.$emit('update:value', {
         readinessProbe, livenessProbe, startupProbe
       } );
     }
@@ -45,7 +45,7 @@ export default {
     <div>
       <div class="row">
         <Probe
-          v-model="readinessProbe"
+          v-model:value="readinessProbe"
           class="col span-12"
           :mode="mode"
           :label="t('workload.container.healthCheck.readinessProbe')"
@@ -59,7 +59,7 @@ export default {
     <div>
       <div class="row">
         <Probe
-          v-model="livenessProbe"
+          v-model:value="livenessProbe"
           class="col span-12"
           :mode="mode"
           :label="t('workload.container.healthCheck.livenessProbe')"
@@ -72,7 +72,7 @@ export default {
 
     <div class="row">
       <Probe
-        v-model="startupProbe"
+        v-model:value="startupProbe"
         class="col span-12"
         :mode="mode"
         :label="t('workload.container.healthCheck.startupProbe')"

package/components/form/HookOption.vue

@@ -70,7 +70,7 @@ export default {
       const header = { name: '', value: '' };
 
       if (!this.value.httpGet.httpHeaders) {
-        this.$set(this.value.httpGet, 'httpHeaders', []);
+        this.value.httpGet['httpHeaders'] = [];
       }
 
       this.value.httpGet.httpHeaders.push(header);
@@ -99,7 +99,7 @@ export default {
         break;
       }
 
-      this.$emit('input', this.value);
+      this.$emit('update:value', this.value);
     },
 
     deleteLeftovers(leftovers) {
@@ -117,7 +117,7 @@ export default {
   <div>
     <div class="row mb-10">
       <RadioGroup
-        v-model="selectHook"
+        v-model:value="selectHook"
         name="selectHook"
         :options="['none', 'exec', 'httpGet']"
         :labels="[
@@ -126,7 +126,7 @@ export default {
           t('workload.container.lifecycleHook.httpGet.add'),
         ]"
         :mode="mode"
-        @input="update"
+        @update:value="update"
       />
     </div>
 
@@ -135,7 +135,7 @@ export default {
         <h4>{{ t('workload.container.lifecycleHook.exec.title') }}</h4>
         <div>
           <ShellInput
-            v-model="value.exec.command"
+            v-model:value="value.exec.command"
             :mode="mode"
             :label="t('workload.container.lifecycleHook.exec.command.label')"
             :placeholder="t('workload.container.lifecycleHook.exec.command.placeholder', null, true)"
@@ -148,15 +148,15 @@ export default {
     <template v-if="selectHook === 'httpGet'">
       <h4>{{ t('workload.container.lifecycleHook.httpGet.title') }}</h4>
       <div class="var-row">
-        <template @input="update">
+        <template @update:value="update">
           <LabeledInput
-            v-model="value.httpGet.host"
+            v-model:value="value.httpGet.host"
             :label="t('workload.container.lifecycleHook.httpGet.host.label')"
             :placeholder="t('workload.container.lifecycleHook.httpGet.host.placeholder')"
             :mode="mode"
           />
           <LabeledInput
-            v-model="value.httpGet.path"
+            v-model:value="value.httpGet.path"
             :label="t('workload.container.lifecycleHook.httpGet.path.label')"
             :placeholder="t('workload.container.lifecycleHook.httpGet.path.placeholder')"
             :mode="mode"
@@ -170,7 +170,7 @@ export default {
             required
           />
           <LabeledSelect
-            v-model="value.httpGet.scheme"
+            v-model:value="value.httpGet.scheme"
             :label="t('workload.container.lifecycleHook.httpGet.scheme.label')"
             :placeholder="t('workload.container.lifecycleHook.httpGet.scheme.placeholder')"
             :options="schemeOptions"
@@ -182,12 +182,12 @@ export default {
       <h4>{{ t('workload.container.lifecycleHook.httpHeaders.title') }}</h4>
       <div
         v-for="(header, index) in value.httpGet.httpHeaders"
-        :key="header.id"
+        :key="index"
         class="var-row"
       >
-        <template @input="update">
+        <template @update:value="update">
           <LabeledInput
-            v-model="value.httpGet.httpHeaders[index].name"
+            v-model:value="value.httpGet.httpHeaders[index].name"
             :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
             :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
             class="single-value"
@@ -195,7 +195,7 @@ export default {
             required
           />
           <LabeledInput
-            v-model="value.httpGet.httpHeaders[index].value"
+            v-model:value="value.httpGet.httpHeaders[index].value"
             :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
             :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
             class="single-value"

package/components/form/InputWithSelect.vue

@@ -94,6 +94,12 @@ export default {
     };
   },
 
+  computed: {
+    canPaginate() {
+      return false;
+    }
+  },
+
   methods: {
     focus() {
       const comp = this.$refs.text;
@@ -104,7 +110,7 @@ export default {
     },
 
     change() {
-      this.$emit('input', { selected: this.selected, text: this.string });
+      this.$emit('update:value', { selected: this.selected, text: this.string });
     },
   },
 
@@ -120,11 +126,11 @@ export default {
   <div
     :class="{ 'select-after': !selectBeforeText }"
     class="input-container row"
-    @input="change"
+    @update:value="change"
   >
     <LabeledSelect
       v-if="selectLabel"
-      v-model="selected"
+      v-model:value="selected"
       :label="selectLabel"
       :class="{ 'in-input': !isView}"
       :options="options"
@@ -139,11 +145,11 @@ export default {
       :placement="$attrs.placement ? $attrs.placement : null"
       :v-bind="$attrs"
       :rules="selectRules"
-      @input="change"
+      @update:value="change"
     />
     <Select
       v-else
-      v-model="selected"
+      v-model:value="selected"
       :options="options"
       :searchable="searchable"
       :disabled="disabled || isView"
@@ -156,12 +162,12 @@ export default {
       :option-label="optionLabel"
       :placement="$attrs.placement ? $attrs.placement : null"
       :v-bind="$attrs"
-      @input="change"
+      @update:value="change"
     />
     <LabeledInput
       v-if="textLabel || textRules.length > 0"
       ref="text"
-      v-model="string"
+      v-model:value="string"
       class="input-string col span-8"
       :label="textLabel"
       :placeholder="placeholder"
@@ -276,18 +282,18 @@ export default {
       border: 1px solid var(--outline) !important;
     }
 
-    &.labeled-select.focused ::v-deep,
-    &.unlabeled-select.focused ::v-deep {
+    &.labeled-select.focused :deep(),
+    &.unlabeled-select.focused :deep() {
       outline: none;
     }
 
-    &.labeled-select:not(.disabled):not(.view) ::v-deep,
-    &.unlabeled-select:not(.disabled):not(.view) ::v-deep {
+    &.labeled-select:not(.disabled):not(.view) :deep(),
+    &.unlabeled-select:not(.disabled):not(.view) :deep() {
       border: solid 1px var(--input-border);
     }
 
-    &.labeled-select ::v-deep,
-    &.unlabeled-select ::v-deep {
+    &.labeled-select :deep(),
+    &.unlabeled-select :deep() {
       box-shadow: none;
       width: 20%;
       margin-right: 1px; // push the input box right so the full focus outline of the select can be seen, z-index borks