@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/form/LabeledSelect.vue

@@ -14,7 +14,14 @@ export default {
   name: 'LabeledSelect',
 
   components: { LabeledTooltip },
-  mixins:     [CompactInput, LabeledFormElement, VueSelectOverrides, LabeledSelectPagination],
+  mixins:     [
+    CompactInput,
+    LabeledFormElement,
+    VueSelectOverrides,
+    LabeledSelectPagination
+  ],
+
+  emits: ['on-open', 'on-close', 'selecting', 'update:validation'],
 
   props: {
     appendToBody: {
@@ -290,9 +297,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 +346,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 +356,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 +424,7 @@ export default {
   padding-bottom: 1px;
 
   &.no-label.compact-input {
-    ::v-deep .vs__actions:after {
+    :deep() .vs__actions:after {
       top: -2px;
     }
 
@@ -427,7 +437,7 @@ export default {
     height: $input-height;
     padding-top: 4px;
 
-    ::v-deep .vs__actions:after {
+    :deep() .vs__actions:after {
       top: 0;
     }
   }
@@ -463,21 +473,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 +496,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 +521,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 +553,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%;
 

package/components/form/Networking.vue

@@ -137,7 +137,7 @@ export default {
         hostNetwork: this.networkMode.value
       };
 
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     }
   }
 };
@@ -149,23 +149,23 @@ export default {
       <div class="row mb-20">
         <div class="col span-6">
           <LabeledSelect
-            v-model="networkMode"
+            v-model:value="networkMode"
             :mode="mode"
             :options="networkModeChoices"
             :label="t('workload.networking.networkMode.label')"
             :placeholder="t('workload.networking.networkMode.placeholder')"
-            @input="update"
+            @update:value="update"
           />
         </div>
 
         <div class="col span-6">
           <LabeledSelect
-            v-model="dnsPolicy"
+            v-model:value="dnsPolicy"
             :mode="mode"
             :options="dnsPolicyChoices"
             :label="t('workload.networking.dnsPolicy.label')"
             :placeholder="t('workload.networking.dnsPolicy.placeholder')"
-            @input="update"
+            @update:value="update"
           />
         </div>
       </div>
@@ -173,20 +173,20 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="hostname"
+            v-model:value="hostname"
             :mode="mode"
             :label="t('workload.networking.hostname.label')"
             :placeholder="t('workload.networking.hostname.placeholder')"
-            @input="update"
+            @update:value="update"
           />
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="subdomain"
+            v-model:value="subdomain"
             :mode="mode"
             :label="t('workload.networking.subdomain.label')"
             :placeholder="t('workload.networking.subdomain.placeholder')"
-            @input="update"
+            @update:value="update"
           />
         </div>
       </div>
@@ -199,25 +199,25 @@ export default {
         <div class="col span-6">
           <ArrayList
             key="dnsNameservers"
-            v-model="nameservers"
+            v-model:value="nameservers"
             :title="t('workload.networking.nameservers.label')"
             :value-placeholder="t('workload.networking.nameservers.placeholder')"
             :add-label="t('workload.networking.nameservers.add')"
             :mode="mode"
             :protip="false"
-            @input="update"
+            @update:value="update"
           />
         </div>
         <div class="col span-6">
           <ArrayList
             key="dnsSearches"
-            v-model="searches"
+            v-model:value="searches"
             :title="t('workload.networking.searches.label')"
             :value-placeholder="t('workload.networking.searches.placeholder')"
             :add-label="t('workload.networking.searches.add')"
             :mode="mode"
             :protip="false"
-            @input="update"
+            @update:value="update"
           />
         </div>
       </div>
@@ -227,7 +227,7 @@ export default {
     <div class="mt-20">
       <div class="row">
         <KeyValue
-          v-model="options"
+          v-model:value="options"
           :key-label="t('generic.name')"
           key-name="name"
           :mode="mode"
@@ -236,7 +236,7 @@ export default {
           :read-allowed="false"
           :as-map="false"
           :value-label="t('generic.value')"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -246,7 +246,7 @@ export default {
       <div class="col span-12">
         <KeyValue
           key="hostAliases"
-          v-model="hostAliases"
+          v-model:value="hostAliases"
           :mode="mode"
           :title="t('workload.networking.hostAliases.label')"
           :protip="t('workload.networking.hostAliases.tip')"
@@ -259,7 +259,7 @@ export default {
           :value-label="t('workload.networking.hostAliases.valueLabel')"
           :value-placeholder="t('workload.networking.hostAliases.valuePlaceholder')"
           :add-label="t('workload.networking.hostAliases.add')"
-          @input="updateHostAliases"
+          @update:value="updateHostAliases"
         >
           <template #title>
             <h3>{{ t('workload.networking.hostAliases.label') }}</h3>