@rancher/shell 2.0.0 → 3.0.0-rc.1

package/edit/constraints.gatekeeper.sh.constraint/MatchKinds.vue

@@ -37,13 +37,13 @@ export default {
       add-label="Add Rule"
       :mode="mode"
       :default-add-value="defaultAddValue"
-      @input="(e) => $emit('input', e)"
+      @update:value="(e) => $emit('update:value', e)"
     >
       <template #default="props">
         <div class="row">
           <div class="api-groups col span-6">
             <ArrayList
-              v-model="props.row.value.apiGroups"
+              v-model:value="props.row.value.apiGroups"
               :protip="false"
               :show-header="true"
               value-label="ApiGroups"
@@ -54,7 +54,7 @@ export default {
           </div>
           <div class="kinds col span-6">
             <ArrayList
-              v-model="props.row.value.kinds"
+              v-model:value="props.row.value.kinds"
               :protip="false"
               :show-header="true"
               value-label="Kinds"

package/edit/constraints.gatekeeper.sh.constraint/NamespaceList.vue

@@ -71,6 +71,6 @@ export default {
     :label="label"
     :tooltip="tooltip"
     :hover-tooltip="!!tooltip"
-    @input="(e) => $emit('input', e)"
+    @update:value="(e) => $emit('update:value', e)"
   />
 </template>

package/edit/constraints.gatekeeper.sh.constraint/Scope.vue

@@ -45,6 +45,6 @@ export default {
     :value="value"
     :mode="mode"
     :options="SCOPE_OPTIONS"
-    @input="e=>$emit('input', e)"
+    @update:value="e=>$emit('update:value', e)"
   />
 </template>

package/edit/constraints.gatekeeper.sh.constraint/index.vue

@@ -1,5 +1,4 @@
 <script>
-import Vue from 'vue';
 import merge from 'lodash/merge';
 import { ucFirst } from '@shell/utils/string';
 import { isSimpleKeyValue } from '@shell/utils/object';
@@ -68,18 +67,18 @@ export default {
     };
 
     if (this.mode === _CREATE) {
-      this.$set(this.value, 'spec', merge(this.value.spec, emptySpec));
+      this.value['spec'] = merge(this.value.spec, emptySpec);
 
       if (!this.value.spec.match.scope) {
-        this.$set(this.value.spec.match, 'scope', SCOPE_OPTIONS[0].value);
+        this.value.spec.match['scope'] = SCOPE_OPTIONS[0].value;
       }
     } else {
-      this.$set(this.value.spec, 'match', this.value.spec.match || {});
-      this.$set(this.value.spec.match, 'kinds', this.value.spec.match.kinds || [{}]);
-      this.$set(this.value.spec.match, 'labelSelector', this.value.spec.match.labelSelector || {});
-      this.$set(this.value.spec.match.labelSelector, 'matchExpressions', this.value.spec.match.labelSelector.matchExpressions || []);
-      this.$set(this.value.spec.match, 'namespaceSelector', this.value.spec.match.namespaceSelector || {});
-      this.$set(this.value.spec.match.namespaceSelector, 'labelSelector', this.value.spec.match.namespaceSelector.labelSelector || []);
+      this.value.spec['match'] = this.value.spec.match || {};
+      this.value.spec.match['kinds'] = this.value.spec.match.kinds || [{}];
+      this.value.spec.match['labelSelector'] = this.value.spec.match.labelSelector || {};
+      this.value.spec.match.labelSelector['matchExpressions'] = this.value.spec.match.labelSelector.matchExpressions || [];
+      this.value.spec.match['namespaceSelector'] = this.value.spec.match.namespaceSelector || {};
+      this.value.spec.match.namespaceSelector['labelSelector'] = this.value.spec.match.namespaceSelector.labelSelector || [];
     }
 
     const parametersYaml = saferDump(this.value?.spec?.parameters);
@@ -176,7 +175,7 @@ export default {
   created() {
     this.registerBeforeHook(this.willSave, 'willSave');
     if (!this.value.save) {
-      this.$emit('input', merge(this.value, this.emptyDefaults));
+      this.$emit('update:value', merge(this.value, this.emptyDefaults));
     }
   },
 
@@ -197,12 +196,12 @@ export default {
      */
     purgeNamespacesField(value) {
       if (value?.spec?.match?.namespaces && (value.spec.match.namespaces.length === 0)) {
-        Vue.delete(value.spec.match, 'namespaces');
+        delete value.spec.match['namespaces'];
       }
     },
 
     updateType(type) {
-      this.$set(this.value, 'type', type);
+      this.value['type'] = type;
     },
     onTabChanged({ tab }) {
       // This is necessary to force the yamlEditor to adjust the size once it has space to fill.
@@ -211,7 +210,7 @@ export default {
       }
     },
     selectTemplateSubtype(subType) {
-      this.$set(this.value, 'kind', subType);
+      this.value['kind'] = subType;
       this.$emit('set-subtype', subType);
     },
     onScopeChange(newScope) {
@@ -252,7 +251,7 @@ export default {
         <div class="col span-12">
           <h3>Enforcement Action</h3>
           <RadioGroup
-            v-model="value.spec.enforcementAction"
+            v-model:value="value.spec.enforcementAction"
             name="enforcementAction"
             class="enforcement-action"
             :options="enforcementActionOptions"
@@ -273,9 +272,9 @@ export default {
           <div class="row">
             <div class="col span-6">
               <Scope
-                v-model="value.spec.match.scope"
+                v-model:value="value.spec.match.scope"
                 :mode="mode"
-                @input="onScopeChange($event)"
+                @update:value="onScopeChange($event)"
               />
             </div>
           </div>
@@ -285,7 +284,7 @@ export default {
           >
             <div class="col span-12">
               <NamespaceList
-                v-model="value.spec.match.namespaces"
+                v-model:value="value.spec.match.namespaces"
                 :label="t('gatekeeperConstraint.tab.namespaces.sub.namespaces')"
                 tooltip="If defined, a constraint will only apply to resources in a listed namespace."
                 :mode="mode"
@@ -300,7 +299,7 @@ export default {
           >
             <div class="col span-12">
               <NamespaceList
-                v-model="value.spec.match.excludedNamespaces"
+                v-model:value="value.spec.match.excludedNamespaces"
                 :label="t('gatekeeperConstraint.tab.namespaces.sub.excludedNamespaces')"
                 tooltip="If defined, a constraint will only apply to resources not in a listed namespace."
                 :mode="mode"
@@ -312,7 +311,7 @@ export default {
             <div class="col span-12">
               <h3>{{ t('gatekeeperConstraint.tab.namespaces.sub.namespaceSelector.title') }}</h3>
               <RuleSelector
-                v-model="value.spec.match.namespaceSelector.matchExpressions"
+                v-model:value="value.spec.match.namespaceSelector.matchExpressions"
                 add-label="Add Namespace Selector"
                 :mode="mode"
               />
@@ -327,7 +326,7 @@ export default {
           <div class="row">
             <div class="col span-12">
               <MatchKinds
-                v-model="value.spec.match.kinds"
+                v-model:value="value.spec.match.kinds"
                 :mode="mode"
               />
             </div>
@@ -336,7 +335,7 @@ export default {
             <div class="col span-12">
               <h3>{{ t('gatekeeperConstraint.tab.rules.sub.labelSelector.title') }}</h3>
               <RuleSelector
-                v-model="value.spec.match.labelSelector.matchExpressions"
+                v-model:value="value.spec.match.labelSelector.matchExpressions"
                 :add-label="t('gatekeeperConstraint.tab.rules.sub.labelSelector.addLabel')"
                 :mode="mode"
               />
@@ -350,7 +349,7 @@ export default {
         >
           <YamlEditor
             ref="yamlEditor"
-            v-model="parametersYaml"
+            v-model:value="parametersYaml"
             class="yaml-editor"
             :editor-mode="editorMode"
             @newObject="$set(value.spec, 'parameters', $event)"

package/edit/fleet.cattle.io.cluster.vue

@@ -80,9 +80,10 @@ export default {
     @cancel="done"
   >
     <NameNsDescription
-      v-model="value"
+      :value="value"
       :mode="mode"
       :namespaced="isNamespaced"
+      @update:value="$emit('input', $event)"
     />
 
     <hr class="mt-20 mb-20">

package/edit/fleet.cattle.io.clustergroup.vue

@@ -139,11 +139,12 @@ export default {
   >
     <NameNsDescription
       v-if="!isView"
-      v-model="value"
+      :value="value"
       :mode="mode"
       :namespaced="false"
       namespace-label="nameNsDescription.workspace.label"
       :namespace-type="FLEET_WORKSPACE"
+      @update:value="$emit('input', $event)"
     />
 
     <h2 v-t="'fleet.clusterGroup.selector.label'" />
@@ -151,7 +152,7 @@ export default {
       :mode="mode"
       :value="expressions"
       :show-remove="false"
-      @input="matchChanged($event)"
+      @update:value="matchChanged($event)"
     />
     <Banner
       v-if="matchingClusters"

package/edit/fleet.cattle.io.gitrepo.vue

@@ -1,5 +1,4 @@
 <script>
-import Vue from 'vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { mapGetters } from 'vuex';
 import {
@@ -83,7 +82,7 @@ export default {
     this.tlsMode = tls;
 
     if (this.value.spec.correctDrift === undefined) {
-      Vue.set(this.value.spec, 'correctDrift', { enabled: false });
+      this.value.spec['correctDrift'] = { enabled: false };
     }
 
     this.updateTargets();
@@ -460,7 +459,7 @@ export default {
     },
 
     stepOneReady() {
-      this.$set(this.addRepositorySteps[0], 'ready', this.stepOneRequires);
+      this.addRepositorySteps[0]['ready'] = this.stepOneRequires;
     },
 
     updateTls() {
@@ -523,9 +522,10 @@ export default {
     <template #stepRepoInfo>
       <NameNsDescription
         v-if="!isView"
-        v-model="value"
+        :value="value"
         :namespaced="false"
         :mode="mode"
+        @update:value="$emit('input', $event)"
         @change="onUpdateRepoName"
       />
 
@@ -546,7 +546,7 @@ export default {
       >
         <div class="col span-6">
           <LabeledInput
-            v-model="value.spec.repo"
+            v-model:value="value.spec.repo"
             :mode="mode"
             label-key="fleet.gitRepo.repo.label"
             :placeholder="t('fleet.gitRepo.repo.placeholder', null, true)"
@@ -563,7 +563,7 @@ export default {
             :text-value="refValue"
             :text-required="true"
             :options="[{label: t('fleet.gitRepo.ref.branch'), value: 'branch'}, {label: t('fleet.gitRepo.ref.revision'), value: 'revision'}]"
-            @input="changeRef($event)"
+            @update:value="changeRef($event)"
           />
         </div>
       </div>
@@ -578,7 +578,7 @@ export default {
         generate-name="gitrepo-auth-"
         label-key="fleet.gitRepo.auth.git"
         :cache-secrets="true"
-        @input="updateAuth($event, 'clientSecretName')"
+        @update:value="updateAuth($event, 'clientSecretName')"
         @inputauthval="updateCachedAuthVal($event, 'clientSecretName')"
       />
       <SelectOrCreateAuthSecret
@@ -593,7 +593,7 @@ export default {
         label-key="fleet.gitRepo.auth.helm"
         :pre-select="tempCachedValues.helmSecretName"
         :cache-secrets="true"
-        @input="updateAuth($event, 'helmSecretName')"
+        @update:value="updateAuth($event, 'helmSecretName')"
         @inputauthval="updateCachedAuthVal($event, 'helmSecretName')"
       />
 
@@ -606,7 +606,7 @@ export default {
           data-testid="gitrepo-helm-repo-url-regex"
         >
           <LabeledInput
-            v-model="value.spec.helmRepoURLRegex"
+            v-model:value="value.spec.helmRepoURLRegex"
             :mode="mode"
             label-key="fleet.gitRepo.helmRepoURLRegex"
           />
@@ -622,7 +622,7 @@ export default {
               :mode="mode"
               :value="tlsMode"
               :options="tlsOptions"
-              @input="updateTlsMode($event)"
+              @update:value="updateTlsMode($event)"
             />
           </div>
           <div
@@ -630,7 +630,7 @@ export default {
             class="col span-6"
           >
             <LabeledInput
-              v-model="caBundle"
+              v-model:value="caBundle"
               :mode="mode"
               type="multiline"
               label-key="fleet.gitRepo.caBundle.label"
@@ -643,7 +643,7 @@ export default {
       <h2 v-t="'fleet.gitRepo.resources.label'" />
       <div>
         <Checkbox
-          v-model="value.spec.correctDrift.enabled"
+          v-model:value="value.spec.correctDrift.enabled"
           data-testid="GitRepo-correctDrift-checkbox"
           class="check"
           type="checkbox"
@@ -659,7 +659,7 @@ export default {
       </div>
 
       <Checkbox
-        v-model="value.spec.keepResources"
+        v-model:value="value.spec.keepResources"
         class="check"
         type="checkbox"
         label-key="fleet.gitRepo.resources.keepResources"
@@ -673,7 +673,7 @@ export default {
       <div class="spacer" />
       <h2 v-t="'fleet.gitRepo.paths.label'" />
       <ArrayList
-        v-model="value.spec.paths"
+        v-model:value="value.spec.paths"
         data-testid="gitRepo-paths"
         :mode="mode"
         :initial-empty-row="false"
@@ -692,7 +692,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledSelect
-              v-model="targetMode"
+              v-model:value="targetMode"
               :options="targetOptions"
               option-key="value"
               :mode="mode"
@@ -718,7 +718,7 @@ export default {
           class="row mt-10"
         >
           <div class="col span-12">
-            <YamlEditor v-model="targetAdvanced" />
+            <YamlEditor v-model:value="targetAdvanced" />
           </div>
         </div>
 
@@ -733,7 +733,7 @@ export default {
       <div class="row mt-20">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.spec.serviceAccount"
+            v-model:value="value.spec.serviceAccount"
             :mode="mode"
             label-key="fleet.gitRepo.serviceAccount.label"
             placeholder-key="fleet.gitRepo.serviceAccount.placeholder"
@@ -741,7 +741,7 @@ export default {
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="value.spec.targetNamespace"
+            v-model:value="value.spec.targetNamespace"
             :mode="mode"
             label-key="fleet.gitRepo.targetNamespace.label"
             placeholder-key="fleet.gitRepo.targetNamespace.placeholder"

package/edit/helm.cattle.io.projecthelmchart.vue

@@ -44,7 +44,7 @@ export default {
 
   data() {
     if (!this.value.spec.values) {
-      this.$set(this.value.spec, 'values', {});
+      this.value.spec['values'] = {};
     }
 
     return {
@@ -121,7 +121,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <LabeledSelect
-          v-model="value.metadata.namespace"
+          v-model:value="value.metadata.namespace"
           :label="t('namespace.project.label')"
           :options="namespaces"
           required
@@ -129,7 +129,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.metadata.description"
+          v-model:value="value.metadata.description"
           :label="t('nameNsDescription.description.label')"
         />
       </div>
@@ -142,7 +142,7 @@ export default {
           :side-tabs="true"
         >
           <Questions
-            v-model="value.spec.values"
+            v-model:value="value.spec.values"
             tabbed="multiple"
             :target-namespace="value.metadata.namespace"
             :source="selectedNamespaceQuestions"

package/edit/k8s.cni.cncf.io.networkattachmentdefinition.vue

@@ -60,8 +60,9 @@ export default {
   >
     <NameNsDescription
       ref="nd"
-      v-model="value"
+      :value="value"
       :mode="mode"
+      @update:value="$emit('input', $event)"
     />
 
     <Tabbed
@@ -77,7 +78,7 @@ export default {
       >
         <KeyValue
           key="config"
-          v-model="config"
+          v-model:value="config"
           :mode="mode"
           :read-allowed="false"
           :value-multiline="false"

package/edit/logging-flow/Match.vue

@@ -50,7 +50,7 @@ export default {
 <template>
   <div>
     <KeyValue
-      v-model="value.labels"
+      v-model:value="value.labels"
       :title="value.select ? t('logging.flow.matches.pods.title.include') : t('logging.flow.matches.pods.title.exclude')"
       :mode="mode"
       :initial-empty-row="true"
@@ -68,7 +68,7 @@ export default {
     <div class="row">
       <div class="col span-12">
         <Select
-          v-model="value.hosts"
+          v-model:value="value.hosts"
           class="lg"
           :options="nodes"
           :placeholder="t('logging.flow.matches.nodes.placeholder')"
@@ -88,7 +88,7 @@ export default {
     <div class="row">
       <div class="col span-12">
         <LabeledSelect
-          v-model="value.container_names"
+          v-model:value="value.container_names"
           :mode="mode"
           :options="[]"
           :disabled="false"
@@ -111,7 +111,7 @@ export default {
       <div class="row">
         <div class="col span-12">
           <Select
-            v-model="value.namespaces"
+            v-model:value="value.namespaces"
             class="lg"
             :options="namespaces"
             :placeholder="t('logging.flow.matches.namespaces.placeholder')"

package/edit/logging-flow/index.vue

@@ -270,7 +270,7 @@ export default {
     },
 
     updateMatch(neu, idx) {
-      this.$set(this.matches, idx, neu);
+      this.matches[idx] = neu;
     },
 
     tabChanged({ tab }) {
@@ -302,11 +302,11 @@ export default {
     },
     willSave() {
       if (this.value.spec.filters && isEmpty(this.value.spec.filters)) {
-        this.$delete(this.value.spec, 'filters');
+        delete this.value.spec['filters'];
       }
 
       if (this.value.spec.match && this.isMatchEmpty(this.value.spec.match)) {
-        this.$delete(this.value.spec, 'match');
+        delete this.value.spec['match'];
       }
     },
     onYamlEditorReady(cm) {
@@ -339,9 +339,10 @@ export default {
   >
     <NameNsDescription
       v-if="!isView"
-      v-model="value"
+      :value="value"
       :mode="mode"
       :namespaced="value.type !== LOGGING.CLUSTER_FLOW"
+      @update:value="$emit('input', $event)"
     />
 
     <Tabbed
@@ -359,7 +360,7 @@ export default {
           :label="t('logging.flow.matches.banner')"
         />
         <ArrayListGrouped
-          v-model="matches"
+          v-model:value="matches"
           :add-label="t('ingress.rules.addRule')"
           :default-add-value="{}"
           :mode="mode"
@@ -373,7 +374,7 @@ export default {
               :nodes="nodeChoices"
               :is-cluster-flow="value.type === LOGGING.CLUSTER_FLOW"
               @remove="e=>removeMatch(props.row.i)"
-              @input="e=>updateMatch(e,props.row.i)"
+              @update:value="e=>updateMatch(e,props.row.i)"
             />
           </template>
           <template #add>
@@ -406,7 +407,7 @@ export default {
           color="info"
         />
         <LabeledSelect
-          v-model="globalOutputRefs"
+          v-model:value="globalOutputRefs"
           :label="t('logging.flow.clusterOutputs.label')"
           :options="clusterOutputChoices"
           :multiple="true"
@@ -426,7 +427,7 @@ export default {
         </LabeledSelect>
         <LabeledSelect
           v-if="value.type === LOGGING.FLOW"
-          v-model="localOutputRefs"
+          v-model:value="localOutputRefs"
           :label="t('logging.flow.outputs.label')"
           class="mt-10"
           :options="outputChoices"
@@ -454,7 +455,7 @@ export default {
       >
         <YamlEditor
           ref="yaml"
-          v-model="filtersYaml"
+          v-model:value="filtersYaml"
           :scrolling="false"
           :initial-yaml-values="initialFiltersYaml"
           :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
@@ -471,7 +472,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-::v-deep {
+:deep() {
   .icon-info {
     margin-top: -3px;
     margin-right: 4px;