@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/form/RuleSelector.vue

@@ -70,7 +70,7 @@ export default {
         return this.value;
       },
       set(localValue) {
-        this.$emit('input', localValue);
+        this.$emit('update:value', localValue);
       }
     }
   },
@@ -109,12 +109,13 @@ export default {
     :class="{[mode]: true}"
   >
     <ArrayList
-      v-model="localValue"
+      :value="value"
       :protip="false"
       :show-header="true"
       :add-label="addLabel"
       :default-add-value="defaultAddValue"
       :mode="mode"
+      @update:value="$emit('input', $event)"
     >
       <template v-slot:column-headers>
         <div class="box">
@@ -133,7 +134,7 @@ export default {
       <template v-slot:columns="scope">
         <div class="key">
           <LabeledInput
-            v-model="scope.row.value.key"
+            v-model:value="scope.row.value.key"
             :mode="mode"
           />
         </div>
@@ -142,7 +143,7 @@ export default {
             :mode="mode"
             :value="scope.row.value.operator"
             :options="operatorOptions"
-            @input="onOperatorInput(scope, $event)"
+            @update:value="onOperatorInput(scope, $event)"
           />
         </div>
         <div class="value">
@@ -150,7 +151,7 @@ export default {
             :disabled="isValueDisabled(scope)"
             :value="getValue(scope)"
             :mode="mode"
-            @input="onValueInput(scope, $event)"
+            @update:value="onValueInput(scope, $event)"
           />
         </div>
       </template>
@@ -164,7 +165,7 @@ export default {
     table-layout: initial;
   }
 
-   ::v-deep .box {
+   :deep() .box {
     display: grid;
     grid-template-columns: 25% 25% 25% 15%;
     column-gap: 1.75%;

package/components/form/SecretSelector.vue

@@ -103,9 +103,9 @@ export default {
         const correctedName = isNone ? undefined : name;
 
         if (this.showKeySelector) {
-          this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: correctedName, [this.keyKey]: '' } } });
+          this.$emit('update:value', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: correctedName, [this.keyKey]: '' } } });
         } else {
-          this.$emit('input', correctedName);
+          this.$emit('update:value', correctedName);
         }
       }
     },
@@ -115,7 +115,7 @@ export default {
         return this.value?.[this.mountKey]?.secretKeyRef?.[this.keyKey] || '';
       },
       set(key) {
-        this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key } } });
+        this.$emit('update:value', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key } } });
       }
     },
 
@@ -200,8 +200,7 @@ export default {
     <div class="input-container">
       <!-- key by namespace to ensure label select current page is recreated on ns change -->
       <ResourceLabeledSelect
-        :key="namespace"
-        v-model="name"
+        v-model:value="name"
         :disabled="!isView && disabled"
         :label="secretNameLabel"
         :mode="mode"
@@ -212,7 +211,7 @@ export default {
       />
       <LabeledSelect
         v-if="showKeySelector"
-        v-model="key"
+        v-model:value="key"
         class="col span-6"
         :disabled="isKeyDisabled"
         :options="keys"

package/components/form/Security.vue

@@ -113,7 +113,7 @@ export default {
         runAsUser:                this.runAsUser,
       };
 
-      this.$emit('input', securityContext);
+      this.$emit('update:value', securityContext);
     }
 
   }
@@ -129,13 +129,13 @@ export default {
           class="col span-6"
         >
           <RadioGroup
-            v-model="privileged"
+            v-model:value="privileged"
             name="privileged"
             :label="t('workload.container.security.privileged.label')"
             :options="[false,true]"
             :labels="[t('workload.container.security.privileged.false'), t('workload.container.security.privileged.true')]"
             :mode="mode"
-            @input="update"
+            @update:value="update"
           />
         </div>
         <div
@@ -144,14 +144,14 @@ export default {
           class="col span-6"
         >
           <RadioGroup
-            v-model="allowPrivilegeEscalation"
+            v-model:value="allowPrivilegeEscalation"
             name="allowPrivilegeEscalation"
             :label="t('workload.container.security.allowPrivilegeEscalation.label')"
             :disabled="privileged"
             :options="[false,true]"
             :labels="[t('workload.container.security.allowPrivilegeEscalation.false'), t('workload.container.security.allowPrivilegeEscalation.true')]"
             :mode="mode"
-            @input="update"
+            @update:value="update"
           />
         </div>
       </div>
@@ -165,13 +165,13 @@ export default {
           class="col span-6"
         >
           <RadioGroup
-            v-model="runAsNonRoot"
+            v-model:value="runAsNonRoot"
             name="runasNonRoot"
             :label="t('workload.container.security.runAsNonRoot.label')"
             :options="[false, true]"
             :labels="[t('workload.container.security.runAsNonRoot.false'), t('workload.container.security.runAsNonRoot.true')]"
             :mode="mode"
-            @input="update"
+            @update:value="update"
           />
         </div>
         <div
@@ -179,13 +179,13 @@ export default {
           class="col span-6"
         >
           <RadioGroup
-            v-model="readOnlyRootFilesystem"
+            v-model:value="readOnlyRootFilesystem"
             name="readOnlyRootFilesystem"
             :label="t('workload.container.security.readOnlyRootFilesystem.label')"
             :options="[false, true]"
             :labels="[t('workload.container.security.readOnlyRootFilesystem.false'), t('workload.container.security.readOnlyRootFilesystem.true')]"
             :mode="mode"
-            @input="update"
+            @update:value="update"
           />
         </div>
       </div>
@@ -201,7 +201,7 @@ export default {
           v-model.number="runAsUser"
           :label="t('workload.container.security.runAsUser')"
           :mode="mode"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -212,7 +212,7 @@ export default {
         class="col span-6"
       >
         <LabeledSelect
-          v-model="add"
+          v-model:value="add"
           :taggable="true"
           :close-on-select="false"
           :mode="mode"
@@ -220,7 +220,7 @@ export default {
           :label="t('workload.container.security.addCapabilities')"
           :options="allCapabilities"
           :disabled="mode==='view'"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div
@@ -228,7 +228,7 @@ export default {
         class="col span-6"
       >
         <LabeledSelect
-          v-model="drop"
+          v-model:value="drop"
           :close-on-select="false"
           :taggable="true"
           :multiple="true"
@@ -236,7 +236,7 @@ export default {
           :label="t('workload.container.security.dropCapabilities')"
           :options="allCapabilities"
           :disabled="mode==='view'"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>

package/components/form/Select.vue

@@ -7,8 +7,12 @@ import { onClickOption, calculatePosition } from '@shell/utils/select';
 
 export default {
   components: { LabeledTooltip },
-  mixins:     [LabeledFormElement, VueSelectOverrides],
-  props:      {
+  mixins:     [
+    LabeledFormElement,
+    VueSelectOverrides,
+  ],
+  emits: ['createdListItem', 'on-focus', 'on-blur'],
+  props: {
     appendToBody: {
       default: true,
       type:    Boolean,
@@ -77,6 +81,11 @@ export default {
       type:    Boolean,
       default: true
     },
+
+    compact: {
+      type:    Boolean,
+      default: null
+    },
   },
 
   methods: {
@@ -199,6 +208,14 @@ export default {
       } else {
         return undefined;
       }
+    },
+    canPaginate() {
+      return false;
+    },
+    deClassedAttrs() {
+      const { class: _, ...rest } = this.$attrs;
+
+      return rest;
     }
   }
 };
@@ -215,12 +232,14 @@ export default {
       [status]: status,
       taggable: $attrs.taggable,
       taggable: $attrs.multiple,
+      'compact-input': compact,
+      [$attrs.class]: $attrs.class
     }"
     @focus="focusSearch"
   >
     <v-select
       ref="select-input"
-      v-bind="$attrs"
+      v-bind="deClassedAttrs"
       class="inline"
       :class="{'select-input-view': mode === 'view'}"
       :autoscroll="true"
@@ -237,8 +256,9 @@ export default {
       :reduce="(x) => reduce(x)"
       :searchable="isSearchable"
       :selectable="selectable"
-      :value="value != null ? value : ''"
-      v-on="$listeners"
+      :modelValue="value != null ? value : ''"
+
+      @update:modelValue="$emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
       @open="resizeHandler"
@@ -251,7 +271,8 @@ export default {
       </template>
       <!-- Pass down templates provided by the caller -->
       <template
-        v-for="(_, slot) of $scopedSlots"
+        v-for="(_, slot) of $slots"
+        :key="slot"
         v-slot:[slot]="scope"
       >
         <slot
@@ -278,22 +299,22 @@ export default {
   .unlabeled-select {
     position: relative;
 
-    ::v-deep .v-select.select-input-view {
+    :deep() .v-select.select-input-view {
       .vs__actions {
         visibility: hidden;
       }
     }
 
-    & .vs--multiple ::v-deep .vs__selected-options .vs__selected {
+    & .vs--multiple :deep() .vs__selected-options .vs__selected {
       width: auto;
     }
 
-    ::v-deep .labeled-tooltip.error .status-icon {
+    :deep() .labeled-tooltip.error .status-icon {
       top: 7px;
       right: 2px;
     }
 
-    ::v-deep .vs__selected-options {
+    :deep() .vs__selected-options {
       display: flex;
       margin: 3px;
 
@@ -302,18 +323,23 @@ export default {
       }
     }
 
-    ::v-deep .v-select.vs--open {
+    :deep() .v-select.vs--open {
       .vs__dropdown-toggle {
         color: var(--outline) !important;
       }
     }
 
-    ::v-deep .v-select.vs--open {
+    :deep() .v-select.vs--open {
       .vs__dropdown-toggle {
         color: var(--outline) !important;
       }
     }
 
     @include input-status-color;
+
+    &.compact-input {
+      min-height: $unlabeled-input-height;
+      line-height: $input-line-height;
+    }
   }
 </style>

package/components/form/SelectOrCreateAuthSecret.vue

@@ -165,27 +165,12 @@ export default {
       this.allCloudCreds = [];
     }
 
-    let selected = this.preSelect?.selected || AUTH_TYPE._NONE;
-
     if ( !this.value ) {
       this.publicKey = this.preSelect?.publicKey || '';
       this.privateKey = this.preSelect?.privateKey || '';
     }
 
-    if ( this.value ) {
-      if ( typeof this.value === 'object' ) {
-        selected = `${ this.value.namespace }/${ this.value.name }`;
-      } else if ( this.value.includes('/') || this.value.includes(':') ) {
-        selected = this.value;
-      } else if ( this.namespace ) {
-        selected = `${ this.namespace }/${ this.value }`;
-      } else {
-        selected = this.value;
-      }
-    }
-
-    this.selected = selected;
-
+    this.updateSelectedFromValue();
     this.update();
   },
 
@@ -381,6 +366,7 @@ export default {
     selected:   'update',
     publicKey:  'updateKeyVal',
     privateKey: 'updateKeyVal',
+    value:      'updateSelectedFromValue',
 
     async namespace(ns) {
       if (ns && !this.selected.startsWith(`${ ns }/`)) {
@@ -407,6 +393,23 @@ export default {
   },
 
   methods: {
+    updateSelectedFromValue() {
+      let selected = this.preSelect?.selected || AUTH_TYPE._NONE;
+
+      if ( this.value ) {
+        if ( typeof this.value === 'object' ) {
+          selected = `${ this.value.namespace }/${ this.value.name }`;
+        } else if ( this.value.includes('/') || this.value.includes(':') ) {
+          selected = this.value;
+        } else if ( this.namespace ) {
+          selected = `${ this.namespace }/${ this.value }`;
+        } else {
+          selected = this.value;
+        }
+      }
+
+      this.selected = selected;
+    },
     async filterSecretsByApi() {
       const findPageArgs = {
         // Of type ActionFindPageArgs
@@ -457,22 +460,22 @@ export default {
 
     update() {
       if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._NONE].includes(this.selected))) {
-        this.$emit('input', null);
+        this.$emit('update:value', null);
       } else if ( this.selected.includes(':') ) {
         // Cloud creds
-        this.$emit('input', this.selected);
+        this.$emit('update:value', this.selected);
       } else {
         const split = this.selected.split('/');
 
         if ( this.limitToNamespace ) {
-          this.$emit('input', split[1]);
+          this.$emit('update:value', split[1]);
         } else {
           const out = {
             namespace: split[0],
             name:      split[1]
           };
 
-          this.$emit('input', out);
+          this.$emit('update:value', out);
         }
       }
 
@@ -549,7 +552,7 @@ export default {
     >
       <div :class="firstCol">
         <LabeledSelect
-          v-model="selected"
+          v-model:value="selected"
           data-testid="auth-secret-select"
           :mode="mode"
           :label-key="labelKey"
@@ -561,7 +564,7 @@ export default {
       <template v-if="selected === SSH">
         <div :class="moreCols">
           <LabeledInput
-            v-model="publicKey"
+            v-model:value="publicKey"
             data-testid="auth-secret-ssh-public-key"
             :mode="mode"
             type="multiline"
@@ -570,7 +573,7 @@ export default {
         </div>
         <div :class="moreCols">
           <LabeledInput
-            v-model="privateKey"
+            v-model:value="privateKey"
             data-testid="auth-secret-ssh-private-key"
             :mode="mode"
             type="multiline"
@@ -581,7 +584,7 @@ export default {
       <template v-else-if="selected === BASIC">
         <div :class="moreCols">
           <LabeledInput
-            v-model="publicKey"
+            v-model:value="publicKey"
             data-testid="auth-secret-basic-username"
             :mode="mode"
             label-key="selectOrCreateAuthSecret.basic.username"
@@ -589,7 +592,7 @@ export default {
         </div>
         <div :class="moreCols">
           <LabeledInput
-            v-model="privateKey"
+            v-model:value="privateKey"
             data-testid="auth-secret-basic-password"
             :mode="mode"
             type="password"
@@ -600,7 +603,7 @@ export default {
       <template v-else-if="selected === S3">
         <div :class="moreCols">
           <LabeledInput
-            v-model="publicKey"
+            v-model:value="publicKey"
             data-testid="auth-secret-s3-public-key"
             :mode="mode"
             label-key="selectOrCreateAuthSecret.s3.accessKey"
@@ -608,7 +611,7 @@ export default {
         </div>
         <div :class="moreCols">
           <LabeledInput
-            v-model="privateKey"
+            v-model:value="privateKey"
             data-testid="auth-secret-s3-private-key"
             :mode="mode"
             type="password"

package/components/form/ServiceNameSelect.vue

@@ -85,18 +85,21 @@ export default {
 
     serviceName() {
       return this.reduce(this.selected);
-    }
+    },
 
+    canPaginate() {
+      return false;
+    },
   },
 
   methods: {
     changeSelected() {
-      this.$emit('input', this.serviceName);
+      this.$emit('update:value', this.serviceName);
     },
 
     clearSearch(event) {
       this.selected = '';
-      this.$emit('input', null);
+      this.$emit('update:value', null);
 
       event.preventDefault();
     },
@@ -123,7 +126,7 @@ export default {
     </div>
     <div class="row span-6">
       <LabeledSelect
-        v-model="selected"
+        v-model:value="selected"
         :label="selectLabel"
         class="mr-10"
         :class="{ 'in-input': !isView }"
@@ -139,7 +142,7 @@ export default {
         :placement="$attrs.placement ? $attrs.placement : null"
         :v-bind="$attrs"
         :loading="loading"
-        @input="changeSelected"
+        @update:value="changeSelected"
       />
       <button
         v-if="!isView"

package/components/form/ServicePorts.vue

@@ -114,7 +114,7 @@ export default {
         return;
       }
 
-      this.$emit('input', this.rows);
+      this.$emit('update:value', this.rows);
     }
   },
 };
@@ -209,9 +209,9 @@ export default {
           <span v-if="isView">{{ row.protocol }}</span>
           <Select
             v-else
-            v-model="row.protocol"
+            v-model:value="row.protocol"
             :options="protocolOptions"
-            @input="queueUpdate"
+            @update:value="queueUpdate"
           />
         </div>
         <div class="target-port">
@@ -317,7 +317,7 @@ export default {
       height: 100%;
     }
 
-    .port-protocol ::v-deep {
+    .port-protocol :deep() {
       .unlabeled-select {
         .v-select.inline {
           margin-top: 2px;

package/components/form/ShellInput.vue

@@ -44,7 +44,7 @@ export default {
       if ( userValue ) {
         out = userValue.match(/('[^']+')|("[^"]+")|\S+/g).map((string) => string.replace(/^'|'$|^"|"$/g, ''));
       }
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
   }
 };
@@ -82,8 +82,8 @@ export function unparse(xs) {
 
 <template>
   <LabeledInput
-    v-model="userValue"
+    v-model:value="userValue"
     v-bind="$attrs"
-    @input="update($event)"
+    @update:value="update($event)"
   />
 </template>

package/components/form/SimpleSecretSelector.vue

@@ -186,7 +186,7 @@ export default {
   <div class="secret-selector show-key-selector">
     <div class="input-container">
       <ResourceLabeledSelect
-        v-model="name"
+        v-model:value="name"
         class="col span-6"
         :disabled="!isView && disabled"
         :loading="$fetchState.pending"
@@ -198,7 +198,7 @@ export default {
         @selecting="updateSecretName"
       />
       <LabeledSelect
-        v-model="key"
+        v-model:value="key"
         class="col span-6"
         :disabled="isKeyDisabled"
         :options="keys"

package/components/form/Taints.vue

@@ -42,7 +42,7 @@ export default {
       },
 
       set(localValue) {
-        this.$emit('input', localValue);
+        this.$emit('update:value', localValue);
       }
     },
 
@@ -56,7 +56,7 @@ export default {
 <template>
   <div class="taints">
     <KeyValue
-      v-model="localValue"
+      :value="value"
       data-testid="taints-keyvalue"
       :title="t('tableHeaders.taints')"
       :mode="mode"
@@ -69,6 +69,7 @@ export default {
       :preserve-keys="['effect']"
       :add-label="t('labels.addTaint')"
       :disabled="disabled"
+      @update:value="$emit('input', $event)"
     >
       <template #label:effect>
         {{ t('tableHeaders.effect') }}
@@ -76,12 +77,12 @@ export default {
 
       <template #col:effect="{row, queueUpdate, i}">
         <Select
-          v-model="row.effect"
+          v-model:value="row.effect"
           :data-testid="`taints-effect-row-${i}`"
           :options="effectOptions"
           :disabled="disabled"
           class="compact-select"
-          @input="queueUpdate"
+          @update:value="queueUpdate"
         />
       </template>
     </KeyValue>