@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/AssignTo.vue

@@ -4,6 +4,7 @@ import { FLEET, NORMAN } from '@shell/config/types';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import KeyValue from '@shell/components/form/KeyValue';
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import { exceptionToErrorsArray } from '@shell/utils/error';
@@ -16,6 +17,7 @@ export default {
     KeyValue,
     AsyncButton,
     Banner,
+    AppModal
   },
 
   data() {
@@ -119,42 +121,41 @@ export default {
       v-if="loaded"
       :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        v-clean-html="t('assignTo.title', {count: resourceCount}, true)"
-        class="text-default-text"
-      />
-
-      <div
-        slot="body"
-        class="pl-10 pr-10"
-      >
-        <form>
-          <LabeledSelect
-            v-model="moveTo"
-            :label="t('assignTo.workspace')"
-            :options="workspaceOptions"
-            placement="bottom"
-          />
-
-          <KeyValue
-            key="labels"
-            v-model="labels"
-            class="mt-20"
-            :add-label="t('labels.addSetLabel')"
-            :read-allowed="false"
-          />
-
-          <Banner
-            v-for="(err, i) in errors"
-            :key="i"
-            color="error"
-            :label="err"
-          />
-        </form>
-      </div>
-
-      <div slot="actions">
+      <template #title>
+        <h4
+          v-clean-html="t('assignTo.title', {count: resourceCount}, true)"
+          class="text-default-text"
+        />
+      </template>
+      <template #body>
+        <div class="pl-10 pr-10">
+          <form>
+            <LabeledSelect
+              v-model:value="moveTo"
+              :label="t('assignTo.workspace')"
+              :options="workspaceOptions"
+              placement="bottom"
+            />
+
+            <KeyValue
+              key="labels"
+              v-model:value="labels"
+              class="mt-20"
+              :add-label="t('labels.addSetLabel')"
+              :read-allowed="false"
+            />
+
+            <Banner
+              v-for="(err, i) in errors"
+              :key="i"
+              color="error"
+              :label="err"
+            />
+          </form>
+        </div>
+      </template>
+
+      <template #actions>
         <button
           class="btn role-secondary"
           @click="close"
@@ -166,7 +167,7 @@ export default {
           mode="apply"
           @click="apply"
         />
-      </div>
+      </template>
     </Card>
   </app-modal>
 </template>

package/components/AsyncButton.vue

@@ -126,6 +126,8 @@ export default defineComponent({
     return { timer };
   },
 
+  emits: ['click'],
+
   data() {
     return { phase: this.currentPhase };
   },
@@ -218,19 +220,14 @@ export default defineComponent({
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.timer) {
       clearTimeout(this.timer);
     }
   },
 
   methods: {
-    clicked($event: MouseEvent) {
-      if ($event) {
-        $event.stopPropagation();
-        $event.preventDefault();
-      }
-
+    clicked() {
       if ( this.isDisabled ) {
         return;
       }

package/components/ButtonDropdown.vue

@@ -191,9 +191,9 @@ export default {
     :selectable="selectable"
     @search:blur="onBlur"
     @search:focus="onFocus"
-    @input="$emit('click-action', $event)"
+    @update:value="$emit('click-action', $event)"
   >
-    <template slot="no-options">
+    <template #no-options>
       <slot name="no-options" />
     </template>
 
@@ -210,7 +210,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
@@ -224,7 +225,7 @@ export default {
 
 <style lang='scss' scoped>
 .button-dropdown.btn-sm {
-  ::v-deep > .vs__dropdown-toggle {
+  :deep() > .vs__dropdown-toggle {
     .vs__actions {
       &:after {
         font-size: 1.6rem;
@@ -233,7 +234,7 @@ export default {
   }
 }
 .button-dropdown.btn-lg {
-  ::v-deep > .vs__dropdown-toggle {
+  :deep() > .vs__dropdown-toggle {
     .vs__actions {
       &:after {
         font-size: 2.6rem;
@@ -247,28 +248,28 @@ export default {
   color: var(--link);
   padding: 0;
 
-  &.vs--open ::v-deep {
+  &.vs--open :deep() {
     outline: none;
     box-shadow: none;
   }
 
   &:hover {
-    ::v-deep .vs__dropdown-toggle .vs__actions,
-    ::v-deep .vs__selected-options {
+    :deep() .vs__dropdown-toggle .vs__actions,
+    :deep() .vs__selected-options {
       background: var(--accent-btn-hover);
     }
-    ::v-deep .vs__selected-options .vs__selected button {
+    :deep() .vs__selected-options .vs__selected button {
       background-color: transparent;
       color: var(--accent-btn-hover-text);
     }
-    ::v-deep .vs__dropdown-toggle .vs__actions {
+    :deep() .vs__dropdown-toggle .vs__actions {
       &:after {
         color: var(--accent-btn-hover-text);
       }
     }
   }
 
-  ::v-deep > .vs__dropdown-toggle {
+  :deep() > .vs__dropdown-toggle {
     width: 100%;
     display: grid;
     grid-template-columns: 75% 25%;
@@ -284,7 +285,7 @@ export default {
     }
   }
 
-  ::v-deep .vs__selected-options {
+  :deep() .vs__selected-options {
     .vs__selected {
       margin: unset;
       border: none;
@@ -305,7 +306,7 @@ export default {
     }
   }
 
-  ::v-deep .vs__dropdown-menu {
+  :deep() .vs__dropdown-menu {
     min-width: unset;
     width: fit-content;
   }

package/components/ButtonGroup.vue

@@ -61,7 +61,7 @@ export default {
 
   methods: {
     change(value) {
-      this.$emit('input', value);
+      this.$emit('update:value', value);
     }
   }
 };

package/components/Carousel.vue

@@ -111,7 +111,7 @@ export default {
     },
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.autoScrollSlideInterval) {
       clearInterval(this.autoScrollSlideInterval);
     }

package/components/Certificates.vue

@@ -118,7 +118,7 @@ export default defineComponent({
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // We're fetching secrets with a filter, clear it so as to not clash with other contexts
     this.$store.dispatch('cluster/forgetType', SECRET);
   },

package/components/ChartReadme.vue

@@ -31,7 +31,7 @@ export default {
     <div class="chart-readmes">
       <Markdown
         v-if="appReadme"
-        v-model="appReadme"
+        v-model:value="appReadme"
         class="md md-desc mb-20"
         @loaded="appReadmeLoaded = true"
       />
@@ -43,7 +43,7 @@ export default {
       </h1>
       <Markdown
         v-if="readme"
-        v-model="readme"
+        v-model:value="readme"
         class="md md-desc"
         @loaded="readmeLoaded = true"
       />
@@ -63,7 +63,7 @@ export default {
     max-width: 100%;
     line-height: 1.6;
 
-    ::v-deep {
+    :deep() {
       * + H1,
       * + H2,
       * + H3,
@@ -74,7 +74,7 @@ export default {
       }
     }
 
-    ::v-deep code {
+    :deep() code {
       font-size: 13.5px;
       white-space: break-spaces;
       word-wrap: break-word;
@@ -83,16 +83,16 @@ export default {
       border: 0;
     }
 
-    ::v-deep pre {
+    :deep() pre {
       white-space: break-spaces;
       word-break: break-word;
     }
 
-    ::v-deep  > h1:first-of-type {
+    :deep()  > h1:first-of-type {
       display: none;
     }
 
-    ::v-deep p {
+    :deep() p {
       margin-bottom: 0.5em;
     }
   }

package/components/CodeMirror.vue

@@ -173,7 +173,7 @@ export default {
           </div>
         </div>
       </div>
-      <codemirror
+      <Codemirror
         ref="codeMirrorRef"
         :value="value"
         :options="combinedOptions"
@@ -194,7 +194,7 @@ export default {
 <style lang="scss">
   $code-mirror-animation-time: 0.1s;
 
-  .code-mirror {
+  .codemirror-container {
     z-index: 0;
 
     // Keyboard mapping overlap

package/components/CommunityLinks.vue

@@ -103,8 +103,8 @@ export default {
         </h2>
       </template>
       <div
-        v-for="link in options"
-        :key="link.label"
+        v-for="(link, i) in options"
+        :key="i"
         class="support-link"
       >
         <router-link

package/components/ConsumptionGauge.vue

@@ -114,7 +114,7 @@ export default {
     </div>
     <div class="mt-10">
       <PercentageBar
-        :value="percentageBarValue"
+        :modelValue="percentageBarValue"
         :color-stops="colorStops"
       />
     </div>

package/components/ContainerResourceLimit.vue

@@ -97,7 +97,7 @@ export default {
         limitsGpu
       } = this;
 
-      this.$emit('input', cleanUp({
+      this.$emit('update:value', cleanUp({
         limitsCpu,
         limitsMemory,
         requestsCpu,
@@ -178,7 +178,7 @@ export default {
     <div class="row mb-20">
       <span class="col span-6">
         <UnitInput
-          v-model="requestsCpu"
+          v-model:value="requestsCpu"
           :placeholder="t('containerResourceLimit.cpuPlaceholder')"
           :label="t('containerResourceLimit.requestsCpu')"
           :mode="mode"
@@ -186,12 +186,12 @@ export default {
           :output-modifier="true"
           :base-unit="t('suffix.cpus')"
           data-testid="cpu-reservation"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
       <span class="col span-6">
         <UnitInput
-          v-model="requestsMemory"
+          v-model:value="requestsMemory"
           :placeholder="t('containerResourceLimit.memPlaceholder')"
           :label="t('containerResourceLimit.requestsMemory')"
           :mode="mode"
@@ -199,7 +199,7 @@ export default {
           :increment="1024"
           :output-modifier="true"
           data-testid="memory-reservation"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
     </div>
@@ -207,7 +207,7 @@ export default {
     <div class="row mb-20">
       <span class="col span-6">
         <UnitInput
-          v-model="limitsCpu"
+          v-model:value="limitsCpu"
           :placeholder="t('containerResourceLimit.cpuPlaceholder')"
           :label="t('containerResourceLimit.limitsCpu')"
           :mode="mode"
@@ -215,12 +215,12 @@ export default {
           :output-modifier="true"
           :base-unit="t('suffix.cpus')"
           data-testid="cpu-limit"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
       <span class="col span-6">
         <UnitInput
-          v-model="limitsMemory"
+          v-model:value="limitsMemory"
           :placeholder="t('containerResourceLimit.memPlaceholder')"
           :label="t('containerResourceLimit.limitsMemory')"
           :mode="mode"
@@ -228,7 +228,7 @@ export default {
           :increment="1024"
           :output-modifier="true"
           data-testid="memory-limit"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
     </div>
@@ -238,13 +238,13 @@ export default {
     >
       <span class="col span-6">
         <UnitInput
-          v-model="limitsGpu"
+          v-model:value="limitsGpu"
           :placeholder="t('containerResourceLimit.gpuPlaceholder')"
           :label="t('containerResourceLimit.limitsGpu')"
           :mode="mode"
           :base-unit="t('suffix.gpus')"
           data-testid="gpu-limit"
-          @input="updateLimits"
+          @update:value="updateLimits"
         />
       </span>
     </div>

package/components/CountGauge.vue

@@ -78,7 +78,7 @@ export default {
     :class="{clickable}"
     :primary-color-var="primaryColorVar"
     :plain="plain"
-    @click.native="visitLocation()"
+    @click="visitLocation()"
   >
     <div
       v-if="graphical"

package/components/CreateDriver.vue

@@ -36,7 +36,7 @@ export default {
   <div>
     <div class="row mb-20">
       <LabeledInput
-        v-model.trim="value.url"
+        v-model:value.trim="value.url"
         :label="t('drivers.add.downloadUrl.label')"
         :placeholder="t('drivers.add.downloadUrl.placeholder', null, true)"
         :tooltip="t('drivers.add.downloadUrl.tooltip', null, true)"
@@ -48,7 +48,7 @@ export default {
     </div>
     <div class="row mb-20">
       <LabeledInput
-        v-model.trim="value.checksum"
+        v-model:value.trim="value.checksum"
         :label="t('drivers.add.checksum.label')"
         :tooltip="t('drivers.add.checksum.tooltip', null, true)"
         :mode="mode"
@@ -58,7 +58,7 @@ export default {
     </div>
     <div class="row mb-20">
       <LabeledInput
-        v-model.trim="value.uiUrl"
+        v-model:value.trim="value.uiUrl"
         :label="t('drivers.add.customUiUrl.label')"
         :tooltip="t('drivers.add.customUiUrl.tooltip', null, true)"
         :placeholder="t('drivers.add.customUiUrl.placeholder', null, true)"
@@ -69,7 +69,7 @@ export default {
     </div>
     <div class="col span-6">
       <ArrayList
-        v-model="value.whitelistDomains"
+        v-model:value="value.whitelistDomains"
         :protip="false"
         :mode="mode"
         :title="t('drivers.add.whitelist')"

package/components/CruResource.vue

@@ -53,7 +53,7 @@ export default {
     },
 
     resource: {
-      type:     Object,
+      type:     [String, Object],
       required: true
     },
 
@@ -275,7 +275,7 @@ export default {
     this.$store.dispatch('cru-resource/setCreateNamespace', false);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.$store.dispatch('cru-resource/setCreateNamespace', false);
   },
 
@@ -416,6 +416,10 @@ export default {
       if (this.preventEnterSubmit) {
         event.preventDefault();
       }
+    },
+
+    shouldProvideSlot(slot) {
+      return slot !== 'default' && typeof this.$slots[slot] === 'function';
     }
   },
 
@@ -443,6 +447,7 @@ export default {
     </p>
     <component
       :is="(isView? 'div' : 'form')"
+      :value="resource"
       data-testid="cru-form"
       class="create-resource-container cru__form"
       @submit.prevent
@@ -473,8 +478,8 @@ export default {
           :subtypes="subtypes"
         >
           <div
-            v-for="subtype in subtypes"
-            :key="subtype.id"
+            v-for="(subtype, i) in subtypes"
+            :key="i"
             class="subtype-banner"
             :class="{ selected: subtype.id === _selectedSubtype }"
             :data-testid="`subtype-banner-item-${subtype.id}`"
@@ -564,7 +569,10 @@ export default {
               #stepContainer="{activeStep}"
               class="step-container"
             >
-              <template v-for="step in steps">
+              <template
+                v-for="(step, i) in steps"
+                :key="i"
+              >
                 <div
                   v-if="step.name === activeStep.name || step.hidden"
                   :key="step.name"
@@ -589,13 +597,15 @@ export default {
                 >
                   <!-- Pass down templates provided by the caller -->
                   <template
-                    v-for="(_, slot) of $scopedSlots"
-                    v-slot:[slot]="scope"
+                    v-for="(_, slot) of $slots"
+                    :key="slot"
                   >
-                    <slot
-                      :name="slot"
-                      v-bind="scope"
-                    />
+                    <template v-if="shouldProvideSlot(slot)">
+                      <slot
+                        :name="slot"
+                        v-bind="{ ...$slots[slot]() }"
+                      />
+                    </template>
                   </template>
                   <div class="controls-steps">
                     <button
@@ -670,17 +680,21 @@ export default {
           >
             <!-- Pass down templates provided by the caller -->
             <template
-              v-for="(_, slot) of $scopedSlots"
-              v-slot:[slot]="scope"
+              v-for="(_, slot) of $slots"
+              :key="slot"
             >
-              <slot
-                :name="slot"
-                v-bind="scope"
-              />
+              <template v-if="shouldProvideSlot(slot)">
+                <slot
+                  :name="slot"
+                  v-bind="{ ...$slots[slot]() }"
+                />
+              </template>
             </template>
-
-            <template #default>
-              <div v-if="!isView">
+            <template
+              v-if="!isView"
+              #default
+            >
+              <div>
                 <button
                   v-if="showYaml"
                   :data-testid="componentTestid + '-yaml'"

package/components/DashboardMetrics.vue

@@ -59,7 +59,7 @@ export default {
   >
     <div class="graph-options mb-10">
       <DashboardOptions
-        v-model="graphOptions"
+        v-model:value="graphOptions"
         :has-summary-and-detail="hasSummaryAndDetail"
       />
     </div>
@@ -100,7 +100,7 @@ export default {
 
 <style lang="scss" scoped>
 .dashboard-metrics {
-  & ::v-deep {
+  & :deep() {
     .external-link {
       position: absolute;
       left: 200px;
@@ -114,7 +114,7 @@ export default {
 }
 
 .dashboard-metrics.external-link-pull-left {
-  & ::v-deep {
+  & :deep() {
     .external-link {
       position: absolute;
       left: 10px;

package/components/DashboardOptions.vue

@@ -104,7 +104,7 @@ export default {
   <div class="graph-options">
     <div v-if="hasSummaryAndDetail">
       <ButtonGroup
-        v-model="value.type"
+        v-model:value="value.type"
         :options="detailSummaryOptions"
       />
     </div>
@@ -113,12 +113,12 @@ export default {
     </div>
     <div class="range-refresh">
       <LabeledSelect
-        v-model="value.range"
+        v-model:value="value.range"
         :options="rangeOptions"
         :label="t('graphOptions.range')"
       />
       <LabeledSelect
-        v-model="value.refreshRate"
+        v-model:value="value.refreshRate"
         :options="refreshOptions"
         :label="t('graphOptions.refresh')"
       />

package/components/DetailTop.vue

@@ -213,8 +213,8 @@ export default {
         class="details"
       >
         <div
-          v-for="detail in group"
-          :key="detail.label || detail.slotName"
+          v-for="(detail, i) in group"
+          :key="i"
           class="detail"
         >
           <span class="label">
@@ -241,7 +241,7 @@ export default {
         </span>
         <Tag
           v-for="(prop, key) in labels"
-          :key="key + prop"
+          :key="key"
         >
           <i
             v-if="internalIcons[key]"