@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/form/KeyValue.vue

@@ -306,7 +306,7 @@ export default {
   },
   watch: {
     /**
-     * KV works with v-model=value
+     * KV works with v-model:value=value
      * value is transformed into this.rows (base64 decode, mark supported etc)
      * on input, this.update constructs a new value from this.rows and emits
      * if the parent component changes value, KV needs to re-compute this.rows
@@ -428,7 +428,7 @@ export default {
         return (row.value.length || row.key.length);
       });
 
-      this.$set(this, 'rows', cleaned);
+      this['rows'] = cleaned;
     },
     onFileSelected(file) {
       const { name, value } = this.fileModifier(file.name, file.value);
@@ -513,7 +513,7 @@ export default {
       }
       this.lastUpdated = out;
 
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
     onPaste(index, event) {
       const text = event.clipboardData.getData('text/plain');
@@ -566,7 +566,7 @@ export default {
      * Set focus on CodeMirror fields
      */
     onFocusMarkdownMultiline(idx, value) {
-      this.$set(this.codeMirrorFocus, idx, value);
+      this.codeMirrorFocus[idx] = value;
     },
     onValueFileSelected(idx, file) {
       const { name, value } = file;
@@ -616,8 +616,8 @@ export default {
           {{ _valueLabel }}
         </label>
         <label
-          v-for="c in extraColumns"
-          :key="c"
+          v-for="(c, i) in extraColumns"
+          :key="i"
         >
           <slot :name="'label:'+c">{{ c }}</slot>
         </label>
@@ -639,10 +639,10 @@ export default {
       <template
         v-for="(row,i) in filteredRows"
         v-else
+        :key="i"
       >
         <!-- Key -->
         <div
-          :key="i+'key'"
           class="kv-item key"
         >
           <slot
@@ -657,14 +657,14 @@ export default {
             <Select
               v-if="keyOptions"
               ref="key"
-              v-model="row[keyName]"
+              v-model:value="row[keyName]"
               :searchable="true"
               :disabled="disabled || isProtected(row.key)"
               :clearable="false"
               :taggable="keyTaggable"
               :options="calculateOptions(row[keyName])"
               :data-testid="`select-kv-item-key-${i}`"
-              @input="queueUpdate"
+              @update:value="queueUpdate"
             />
             <input
               v-else
@@ -681,7 +681,6 @@ export default {
 
         <!-- Value -->
         <div
-          :key="i+'value'"
           :data-testid="`kv-item-value-${i}`"
           class="kv-item value"
         >
@@ -717,7 +716,7 @@ export default {
               />
               <TextAreaAutoGrow
                 v-else-if="valueMultiline"
-                v-model="row[valueName]"
+                v-model:value="row[valueName]"
                 data-testid="value-multiline"
                 :class="{'conceal': valueConcealed}"
                 :disabled="disabled || isProtected(row.key)"
@@ -725,7 +724,7 @@ export default {
                 :placeholder="_valuePlaceholder"
                 :min-height="40"
                 :spellcheck="false"
-                @input="queueUpdate"
+                @update:value="queueUpdate"
               />
               <input
                 v-else
@@ -750,8 +749,8 @@ export default {
           </slot>
         </div>
         <div
-          v-for="c in extraColumns"
-          :key="i + c"
+          v-for="(c, j) in extraColumns"
+          :key="`${i}-${j}`"
           class="kv-item extra"
         >
           <slot

package/components/form/LabeledSelect.vue

@@ -13,8 +13,17 @@ import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSe
 export default {
   name: 'LabeledSelect',
 
+  inheritAttrs: false,
+
   components: { LabeledTooltip },
-  mixins:     [CompactInput, LabeledFormElement, VueSelectOverrides, LabeledSelectPagination],
+  mixins:     [
+    CompactInput,
+    LabeledFormElement,
+    VueSelectOverrides,
+    LabeledSelectPagination
+  ],
+
+  emits: ['on-open', 'on-close', 'selecting', 'update:validation'],
 
   props: {
     appendToBody: {
@@ -240,17 +249,20 @@ export default {
   <div
     ref="select"
     class="labeled-select"
-    :class="{
-      disabled: isView || disabled,
-      focused,
-      [mode]: true,
-      [status]: status,
-      taggable: $attrs.taggable,
-      taggable: $attrs.multiple,
-      hoverable: hoverTooltip,
-      'compact-input': isCompact,
-      'no-label': !hasLabel,
-    }"
+    :class="[
+      $attrs.class,
+      {
+        disabled: isView || disabled,
+        focused,
+        [mode]: true,
+        [status]: status,
+        taggable: $attrs.taggable,
+        taggable: $attrs.multiple,
+        hoverable: hoverTooltip,
+        'compact-input': isCompact,
+        'no-label': !hasLabel
+      }
+    ]"
     @click="focusSearch"
     @focus="focusSearch"
   >
@@ -290,9 +302,10 @@ export default {
       :filterable="isFilterable"
       :searchable="isSearchable"
       :selectable="selectable"
-      :value="value != null && !loading ? value : ''"
+      :modelValue="value != null && !loading ? value : ''"
       :dropdown-should-open="dropdownShouldOpen"
-      v-on="$listeners"
+
+      @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
       @search="onSearch"
@@ -338,7 +351,8 @@ export default {
       </template>
       <!-- Pass down templates provided by the caller -->
       <template
-        v-for="(_, slot) of $scopedSlots"
+        v-for="(_, slot) of $slots"
+        :key="slot"
         #[slot]="scope"
       >
         <slot
@@ -347,28 +361,29 @@ export default {
         />
       </template>
 
-      <div
-        v-if="canPaginate && totalResults"
-        slot="list-footer"
-        class="pagination-slot"
-      >
-        <div class="load-more">
-          <i
-            v-if="paginating"
-            class="icon icon-spinner icon-spin"
-          />
-          <div v-else>
-            <a
-              v-if="canLoadMore"
-              @click="loadMore"
-            > {{ t('labelSelect.pagination.more') }}</a>
+      <template #list-footer>
+        <div
+          v-if="canPaginate && totalResults"
+          class="pagination-slot"
+        >
+          <div class="load-more">
+            <i
+              v-if="paginating"
+              class="icon icon-spinner icon-spin"
+            />
+            <div v-else>
+              <a
+                v-if="canLoadMore"
+                @click="loadMore"
+              > {{ t('labelSelect.pagination.more') }}</a>
+            </div>
           </div>
-        </div>
 
-        <div class="count">
-          {{ optionCounts }}
+          <div class="count">
+            {{ optionCounts }}
+          </div>
         </div>
-      </div>
+      </template>
       <template #no-options="{ search }">
         <div class="no-options-slot">
           <div
@@ -414,7 +429,7 @@ export default {
   padding-bottom: 1px;
 
   &.no-label.compact-input {
-    ::v-deep .vs__actions:after {
+    :deep() .vs__actions:after {
       top: -2px;
     }
 
@@ -427,7 +442,7 @@ export default {
     height: $input-height;
     padding-top: 4px;
 
-    ::v-deep .vs__actions:after {
+    :deep() .vs__actions:after {
       top: 0;
     }
   }
@@ -463,21 +478,21 @@ export default {
 
   &.taggable.compact-input {
     min-height: $unlabeled-input-height;
-    ::v-deep .vs__selected-options {
+    :deep() .vs__selected-options {
       padding-top: 8px !important;
     }
   }
 
   &.taggable:not(.compact-input) {
     min-height: $input-height;
-    ::v-deep .vs__selected-options {
+    :deep() .vs__selected-options {
       // Need to adjust margin when there is a label in the control to add space between the label and the tags
       margin-top: 0px;
     }
   }
 
   &:not(.taggable) {
-    ::v-deep .vs__selected-options {
+    :deep() .vs__selected-options {
       // Ensure whole select is clickable to close the select when open
       .vs__selected {
         width: 100%;
@@ -486,7 +501,7 @@ export default {
   }
 
   &.taggable {
-    ::v-deep .vs__selected-options {
+    :deep() .vs__selected-options {
       padding: 3px 0;
       .vs__selected {
         border-color: var(--accent-btn);
@@ -511,30 +526,30 @@ export default {
     }
   }
 
-  ::v-deep .vs__selected-options {
+  :deep() .vs__selected-options {
     margin-top: -5px;
   }
 
-  ::v-deep .v-select:not(.vs--single) {
+  :deep() .v-select:not(.vs--single) {
     .vs__selected-options {
       padding: 5px 0;
     }
   }
 
-  ::v-deep .vs__actions {
+  :deep() .vs__actions {
     &:after {
       position: relative;
       top: -10px;
     }
   }
 
-  ::v-deep .v-select.vs--open {
+  :deep() .v-select.vs--open {
     .vs__dropdown-toggle {
       color: var(--outline) !important;
     }
   }
 
-  ::v-deep &.disabled {
+  :deep() &.disabled {
     .labeled-container,
     .vs__dropdown-toggle,
     input,
@@ -543,7 +558,7 @@ export default {
     }
   }
 
-  .no-label ::v-deep {
+  .no-label :deep() {
     &.v-select:not(.vs--single) {
       min-height: 33px;
     }

package/components/form/Labels.vue

@@ -84,7 +84,7 @@ export default {
           </h3>
           <ToggleSwitch
             v-if="value.hasSystemLabels"
-            v-model="toggler"
+            v-model:value="toggler"
             name="label-system-toggle"
             :on-label="t('labels.labels.show')"
           />
@@ -107,7 +107,7 @@ export default {
                 :mode="mode"
                 :read-allowed="false"
                 :value-can-be-empty="true"
-                @input="value.setLabels($event)"
+                @update:value="value.setLabels($event)"
               />
             </template>
           </slot>
@@ -130,7 +130,7 @@ export default {
         :title-protip="annotationTitleTooltip"
         :read-allowed="false"
         :value-can-be-empty="true"
-        @input="value.setAnnotations($event)"
+        @update:value="value.setAnnotations($event)"
       />
     </div>
   </div>

package/components/form/LifecycleHooks.vue

@@ -1,6 +1,4 @@
 <script>
-import Vue from 'vue';
-
 import HookOption from '@shell/components/form/HookOption';
 import { _VIEW } from '@shell/config/query-params';
 import { isEmpty } from '@shell/utils/object';
@@ -48,13 +46,13 @@ export default {
         const val = out[prop];
 
         if (val === '' || typeof val === 'undefined' || val === null || isEmpty(val)) {
-          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);
     },
   }
 };
@@ -67,7 +65,7 @@ export default {
         {{ t('workload.container.lifecycleHook.postStart.label') }}
       </h3>
       <HookOption
-        v-model="postStart"
+        v-model:value="postStart"
         :mode="mode"
         @input="update"
       />
@@ -78,7 +76,7 @@ export default {
         {{ t('workload.container.lifecycleHook.preStop.label') }}
       </h3>
       <HookOption
-        v-model="preStop"
+        v-model:value="preStop"
         :mode="mode"
         @input="update"
       />

package/components/form/MatchExpressions.vue

@@ -228,9 +228,9 @@ export default {
         }).filter((x) => !!x);
 
         if ( isArray(this.value) || this.matchingSelectorDisplay ) {
-          this.$emit('input', out);
+          this.$emit('update:value', out);
         } else {
-          this.$emit('input', simplify(out));
+          this.$emit('update:value', simplify(out));
         }
       });
     }
@@ -270,7 +270,7 @@ export default {
     </div>
     <div
       v-for="(row, index) in rules"
-      :key="row.id"
+      :key="index"
       class="match-expression-row"
       :class="{'view':isView, 'mb-10': index !== rules.length - 1, 'match-expression-row-matching': matchingSelectorDisplay}"
     >
@@ -284,7 +284,7 @@ export default {
         </div>
         <LabeledSelect
           v-else
-          v-model="row.matching"
+          v-model:value="row.matching"
           :mode="mode"
           :options="matchingSelectOptions"
           :data-testid="`input-match-type-field-control-${index}`"
@@ -306,7 +306,7 @@ export default {
         >
         <LabeledSelect
           v-else
-          v-model="row.key"
+          v-model:value="row.key"
           :mode="mode"
           :options="keysSelectOptions"
           :data-testid="`input-match-expression-key-control-select-${index}`"
@@ -320,14 +320,14 @@ export default {
         </div>
         <Select
           v-else
-          v-model="row.operator"
+          v-model:value="row.operator"
           class="operator single"
           :options="ops"
           :clearable="false"
           :reduce="opt=>opt.value"
           :mode="mode"
           :data-testid="`input-match-expression-operator-control-${index}`"
-          @input="update"
+          @update:value="update"
         />
       </div>
 

package/components/form/Members/ClusterMembershipEditor.vue

@@ -56,7 +56,6 @@ export default {
     :type="NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING"
     :mode="mode"
     parent-key="clusterId"
-    :parent-id="parentId"
-    v-on="$listeners"
+    :parent-id="parentId"
   />
 </template>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -177,7 +177,7 @@ export default {
     },
     customPermissionsUpdate() {
       return this.customPermissions.reduce((acc, customPermissionsItem) => {
-        const lockedExist = this.roleTemplates.find((roleTemplateItem) => roleTemplateItem.displayName === customPermissionsItem.label);
+        const lockedExist = this.roleTemplates.find((roleTemplateItem) => roleTemplateItem.id === customPermissionsItem.key);
 
         if (lockedExist.locked) {
           customPermissionsItem['locked'] = true;
@@ -202,7 +202,7 @@ export default {
     },
 
     onAdd(principalId) {
-      this.$set(this, 'principalId', principalId);
+      this['principalId'] = principalId;
       this.updateBindings();
     },
 
@@ -218,7 +218,7 @@ export default {
 
         const bindings = await Promise.all(bindingPromises);
 
-        this.$emit('input', bindings);
+        this.$emit('update:value', bindings);
       }
     }
   },
@@ -258,7 +258,7 @@ export default {
       </template>
       <template v-slot:body>
         <RadioGroup
-          v-model="permissionGroup"
+          v-model:value="permissionGroup"
           :options="options"
           name="permission-group"
         />
@@ -268,11 +268,11 @@ export default {
           :class="{'two-column': useTwoColumnsForCustom}"
         >
           <div
-            v-for="permission in customPermissionsUpdate"
-            :key="permission.key"
+            v-for="(permission, i) in customPermissionsUpdate"
+            :key="i"
           >
             <Checkbox
-              v-model="permission.value"
+              v-model:value="permission.value"
               :disabled="permission.locked"
               class="mb-5"
               :label="permission.label"
@@ -291,7 +291,7 @@ export default {
 <style lang="scss" scoped>
 $detailSize: 11px;
 
-::v-deep .type-description {
+:deep() .type-description {
     font-size: $detailSize;
 }
 
@@ -305,7 +305,7 @@ label.radio {
   &.two-column {
     grid-template-columns: 1fr 1fr;
   }
-  ::v-deep .checkbox-label {
+  :deep() .checkbox-label {
     margin-right: 0;
   }
 }

package/components/form/Members/MembershipEditor.vue

@@ -72,7 +72,7 @@ export default {
     const bindings = allBindings
       .filter((b) => normalizeId(get(b, this.parentKey)) === normalizeId(this.parentId));
 
-    this.$set(this, 'lastSavedBindings', [...bindings]);
+    this['lastSavedBindings'] = [...bindings];
 
     // Add the current user as the project owner. This will get created by default
     if (this.mode === _CREATE && bindings.length === 0 && this.defaultBindingHandler) {
@@ -82,7 +82,7 @@ export default {
       bindings.push(defaultBinding);
     }
 
-    this.$set(this, 'bindings', bindings);
+    this['bindings'] = bindings;
   },
 
   data() {
@@ -150,7 +150,7 @@ export default {
     },
 
     onAddMember(bindings) {
-      this.$set(this, 'bindings', [...this.bindings, ...bindings]);
+      this['bindings'] = [...this.bindings, ...bindings];
     },
   }
 };
@@ -159,7 +159,7 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <ArrayList
     v-else
-    v-model="bindings"
+    v-model:value="bindings"
     :mode="mode"
     :show-header="true"
   >
@@ -179,7 +179,6 @@ export default {
       <div class="columns row">
         <div class="col span-6">
           <Principal
-            :key="row.value.principalId"
             :value="row.value.principalId"
           />
         </div>

package/components/form/Members/ProjectMembershipEditor.vue

@@ -58,7 +58,6 @@ export default {
     :type="NORMAN.PROJECT_ROLE_TEMPLATE_BINDING"
     :mode="mode"
     parent-key="projectId"
-    :parent-id="parentId"
-    v-on="$listeners"
+    :parent-id="parentId"
   />
 </template>

package/components/form/NameNsDescription.vue

@@ -1,5 +1,4 @@
 <script>
-import Vue from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
@@ -322,14 +321,14 @@ export default {
       if (this.nameKey) {
         set(this.value, this.nameKey, val);
       } else {
-        this.$set(this.value.metadata, 'name', val);
+        this.value.metadata['name'] = val;
       }
-      this.$emit('change');
+      this.$emit('update:value', this.value);
     },
 
     namespace(val) {
       this.updateNamespace(val);
-      this.$emit('change');
+      this.$emit('update:value', this.value);
     },
 
     description(val) {
@@ -338,7 +337,7 @@ export default {
       } else {
         this.value.setAnnotation(DESCRIPTION, val);
       }
-      this.$emit('change');
+      this.$emit('update:value', this.value);
     },
   },
 
@@ -387,7 +386,7 @@ export default {
           true,
         );
         this.$emit('isNamespaceNew', true);
-        Vue.nextTick(() => this.$refs.namespace.focus());
+        this.$nextTick(() => this.$refs.namespace.focus());
       } else {
         this.createNamespace = false;
         this.$store.dispatch(
@@ -410,7 +409,7 @@ export default {
     >
       <LabeledInput
         ref="namespace"
-        v-model="namespace"
+        v-model:value="namespace"
         :label="t('namespace.label')"
         :placeholder="t('namespace.createNamespace')"
         :disabled="namespaceReallyDisabled"
@@ -436,7 +435,7 @@ export default {
     >
       <LabeledSelect
         v-show="!createNamespace"
-        v-model="namespace"
+        v-model:value="namespace"
         :clearable="true"
         :options="options"
         :disabled="namespaceReallyDisabled"
@@ -459,7 +458,7 @@ export default {
       <LabeledInput
         ref="name"
         key="name"
-        v-model="name"
+        v-model:value="name"
         :label="t(nameLabel)"
         :placeholder="t(namePlaceholder)"
         :disabled="nameReallyDisabled"
@@ -479,7 +478,7 @@ export default {
     >
       <LabeledInput
         key="description"
-        v-model="description"
+        v-model:value="description"
         :mode="mode"
         :disabled="descriptionDisabled"
         :label="t(descriptionLabel)"
@@ -490,8 +489,8 @@ export default {
     </div>
 
     <div
-      v-for="slot in extraColumns"
-      :key="slot"
+      v-for="(slot, i) in extraColumns"
+      :key="i"
       :class="{ col: true, [colSpan]: true }"
     >
       <slot :name="slot" />
@@ -524,7 +523,7 @@ button {
     max-height: $input-height;
   }
 
-  .namespace-select ::v-deep {
+  .namespace-select :deep() {
     .labeled-select {
       min-width: 40%;