@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/form/ResourceQuota/Namespace.vue

@@ -64,7 +64,7 @@ export default {
         }
       };
 
-      this.$set(this.value, 'resourceQuota', resourceQuota);
+      this.value['resourceQuota'] = resourceQuota;
     }
   },
 };
@@ -84,7 +84,7 @@ export default {
     </div>
     <Row
       v-for="(limit, i) in editableLimits"
-      :key="project.id + i"
+      :key="i"
       :value="value.resourceQuota"
       :namespace="value"
       :mode="mode"
@@ -93,7 +93,7 @@ export default {
       :project-resource-quota-limits="projectResourceQuotaLimits"
       :default-resource-quota-limits="defaultResourceQuotaLimits"
       :namespace-resource-quota-limits="namespaceResourceQuotaLimits"
-      @input="update"
+      @update:value="update"
     />
   </div>
 </template>

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -163,7 +163,7 @@ export default {
         addSuffixSpace: false
       });
 
-      this.$emit('input', this.type, value);
+      this.$emit('update:value', this.type, value);
     }
   }
 };
@@ -184,7 +184,7 @@ export default {
       <PercentageBar
         v-clean-tooltip="tooltip"
         class="percentage-bar"
-        :value="percentageUsed"
+        :modelValue="percentageUsed"
         :slices="slices"
         :color-stops="{'100': '--primary'}"
       />
@@ -197,7 +197,7 @@ export default {
       :input-exponent="typeOption.inputExponent"
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
-      @input="update"
+      @update:value="update"
     />
   </div>
 </template>

package/components/form/ResourceQuota/Project.vue

@@ -26,9 +26,9 @@ export default {
   },
 
   data() {
-    this.$set(this.value, 'spec', this.value.spec || {});
-    this.$set(this.value.spec, 'namespaceDefaultResourceQuota', this.value.spec.namespaceDefaultResourceQuota || { limit: {} });
-    this.$set(this.value.spec, 'resourceQuota', this.value.spec.resourceQuota || { limit: {} });
+    this.value['spec'] = this.value.spec || {};
+    this.value.spec['namespaceDefaultResourceQuota'] = this.value.spec.namespaceDefaultResourceQuota || { limit: {} };
+    this.value.spec['resourceQuota'] = this.value.spec.resourceQuota || { limit: {} };
 
     return { typeValues: Object.keys(this.value.spec.resourceQuota.limit) };
   },
@@ -37,7 +37,7 @@ export default {
 
   methods: {
     updateType(i, type) {
-      this.$set(this.typeValues, i, type);
+      this.typeValues[i] = type;
     },
     remainingTypes(currentType) {
       return this.mappedTypes
@@ -63,7 +63,7 @@ export default {
       </div>
     </div>
     <ArrayList
-      v-model="typeValues"
+      v-model:value="typeValues"
       label="Resources"
       :add-label="t('resourceQuota.add.label')"
       :default-add-value="remainingTypes()[0] ? remainingTypes()[0].value : ''"
@@ -73,10 +73,11 @@ export default {
     >
       <template #columns="props">
         <Row
-          v-model="value"
+          :value="value"
           :mode="mode"
           :types="remainingTypes(typeValues[props.i])"
           :type="typeValues[props.i]"
+          @input="$emit('input', $event)"
           @type-change="updateType(props.i, $event)"
         />
       </template>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -1,114 +1,113 @@
-<script>
-import Select from '@shell/components/form/Select';
-import UnitInput from '@shell/components/form/UnitInput';
-import { ROW_COMPUTED } from './shared';
-import Vue from 'vue';
-
-export default {
-  components: { Select, UnitInput },
-
-  props: {
-    mode: {
-      type:     String,
-      required: true,
-    },
-    types: {
-      type:    Array,
-      default: () => []
-    },
-    type: {
-      type:    String,
-      default: ''
-    },
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    }
-  },
-
-  computed: {
-    ...ROW_COMPUTED,
-
-    resourceQuotaLimit: {
-      get() {
-        return this.value.spec.resourceQuota?.limit || {};
-      },
-    },
-
-    namespaceDefaultResourceQuotaLimit: {
-      get() {
-        return this.value.spec.namespaceDefaultResourceQuota?.limit || {};
-      },
-    }
-  },
-
-  methods: {
-    updateType(type) {
-      if (typeof this.value.spec.resourceQuota?.limit[this.type] !== 'undefined') {
-        this.$delete(this.value.spec.resourceQuota.limit, this.type);
-      }
-      if (typeof this.value.spec.namespaceDefaultResourceQuota?.limit[this.type] !== 'undefined') {
-        this.$delete(this.value.spec.namespaceDefaultResourceQuota.limit, this.type);
-      }
-
-      this.$emit('type-change', type);
-    },
-
-    updateQuotaLimit(prop, type, val) {
-      if (!this.value.spec[prop]) {
-        Vue.set(this.value.spec, prop, { limit: { } });
-      }
-
-      Vue.set(this.value.spec[prop].limit, type, val);
-    }
-  },
-};
-</script>
-<template>
-  <div
-    v-if="typeOption"
-    class="row"
-  >
-    <Select
-      class="mr-10"
-      :mode="mode"
-      :value="type"
-      :options="types"
-      data-testid="projectrow-type-input"
-      @input="updateType($event)"
-    />
-    <UnitInput
-      :value="resourceQuotaLimit[type]"
-      class="mr-10"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-project-quota-input"
-      @input="updateQuotaLimit('resourceQuota', type, $event)"
-    />
-    <UnitInput
-      :value="namespaceDefaultResourceQuotaLimit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-namespace-quota-input"
-      @input="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
-    />
-  </div>
-</template>
-
-<style lang='scss' scoped>
-  .row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-  }
-</style>
+<script>
+import Select from '@shell/components/form/Select';
+import UnitInput from '@shell/components/form/UnitInput';
+import { ROW_COMPUTED } from './shared';
+
+export default {
+  components: { Select, UnitInput },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    types: {
+      type:    Array,
+      default: () => []
+    },
+    type: {
+      type:    String,
+      default: ''
+    },
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  computed: {
+    ...ROW_COMPUTED,
+
+    resourceQuotaLimit: {
+      get() {
+        return this.value.spec.resourceQuota?.limit || {};
+      },
+    },
+
+    namespaceDefaultResourceQuotaLimit: {
+      get() {
+        return this.value.spec.namespaceDefaultResourceQuota?.limit || {};
+      },
+    }
+  },
+
+  methods: {
+    updateType(type) {
+      if (typeof this.value.spec.resourceQuota?.limit[this.type] !== 'undefined') {
+        delete this.value.spec.resourceQuota.limit[this.type];
+      }
+      if (typeof this.value.spec.namespaceDefaultResourceQuota?.limit[this.type] !== 'undefined') {
+        delete this.value.spec.namespaceDefaultResourceQuota.limit[this.type];
+      }
+
+      this.$emit('type-change', type);
+    },
+
+    updateQuotaLimit(prop, type, val) {
+      if (!this.value.spec[prop]) {
+        this.value.spec[prop] = { limit: { } };
+      }
+
+      this.value.spec[prop].limit[type] = val;
+    }
+  },
+};
+</script>
+<template>
+  <div
+    v-if="typeOption"
+    class="row"
+  >
+    <Select
+      :value="type"
+      class="mr-10"
+      :mode="mode"
+      :options="types"
+      data-testid="projectrow-type-input"
+      @update:value="updateType($event)"
+    />
+    <UnitInput
+      :value="resourceQuotaLimit[type]"
+      class="mr-10"
+      :mode="mode"
+      :placeholder="typeOption.placeholder"
+      :increment="typeOption.increment"
+      :input-exponent="typeOption.inputExponent"
+      :base-unit="typeOption.baseUnit"
+      :output-modifier="true"
+      data-testid="projectrow-project-quota-input"
+      @update:value="updateQuotaLimit('resourceQuota', type, $event)"
+    />
+    <UnitInput
+      :value="namespaceDefaultResourceQuotaLimit[type]"
+      :mode="mode"
+      :placeholder="typeOption.placeholder"
+      :increment="typeOption.increment"
+      :input-exponent="typeOption.inputExponent"
+      :base-unit="typeOption.baseUnit"
+      :output-modifier="true"
+      data-testid="projectrow-namespace-quota-input"
+      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+  }
+</style>

package/components/form/ResourceSelector.vue

@@ -82,8 +82,8 @@ export default {
       set(selectorExpressions) {
         const { matchLabels, matchExpressions } = simplify(selectorExpressions);
 
-        this.$set(this.value, 'matchLabels', matchLabels);
-        this.$set(this.value, 'matchExpressions', matchExpressions);
+        this.value['matchLabels'] = matchLabels;
+        this.value['matchExpressions'] = matchExpressions;
       }
     },
   },
@@ -113,7 +113,7 @@ export default {
     <div class="row">
       <div class="col span-12">
         <MatchExpressions
-          v-model="selectorExpressions"
+          v-model:value="selectorExpressions"
           :mode="mode"
           :show-remove="false"
           :type="type"

package/components/form/ResourceTabs/index.vue

@@ -83,7 +83,7 @@ export default {
     };
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.$store.dispatch('cluster/forgetType', EVENT);
   },
 

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,
@@ -199,6 +203,9 @@ export default {
       } else {
         return undefined;
       }
+    },
+    canPaginate() {
+      return false;
     }
   }
 };
@@ -215,6 +222,7 @@ export default {
       [status]: status,
       taggable: $attrs.taggable,
       taggable: $attrs.multiple,
+      [$attrs.class]: $attrs.class
     }"
     @focus="focusSearch"
   >
@@ -237,8 +245,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 +260,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 +288,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,13 +312,13 @@ 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;
       }