refactor: update slots syntax to be compatibile with vue.js version 3

woothu · woothu · commit bbabc4557e7a · 2019-03-05T12:59:33.000+01:00
diff --git a/src/components/Form/CFormCheckbox.vue b/src/components/Form/CFormCheckbox.vue
@@ -1,26 +1,30 @@
 <template>
   <CFormGroup v-bind="{validFeedback, invalidFeedback, tooltipFeedback,
                        description, class: computedClasses}">
-    <input slot="input"
-           v-bind="$attrs"
-           :id="safeId"
-           :type="type"
-           :class="inputClasses"
-           :value="value"
-           :checked="state"
-           @change="onChange($event)"
-    />
+    <template #input>
+      <input
+        v-bind="$attrs"
+        :id="safeId"
+        :type="type"
+        :class="inputClasses"
+        :value="value"
+        :checked="state"
+        @change="onChange($event)"
+      />
+    </template>
 
 
-    <template slot="labelAfterInput">
+    <template #labelAfterInput>
       <slot name="labelAfterInput">
-        <label v-if="label" :for="safeId" :class="labelClasses">{{label}}</label>
+        <label v-if="label" :for="safeId" :class="labelClasses">
+          {{label}}
+        </label>
       </slot>
     </template>
 
 
     <template v-for="slot in ['label', 'prepend', 'append', 'validFeedback', 'invalidFeedback','description']"
-              :slot="slot"
+              #[slot]
     >
       <slot :name="slot">
       </slot>
diff --git a/src/components/Form/CFormFile.vue b/src/components/Form/CFormFile.vue
@@ -3,14 +3,14 @@
                        tooltipFeedback, description,
                        wrapperClasses, class: computedClasses}"
   >
-    <template slot="label">
+    <template #label>
       <slot name="label">
         <label v-if="label" :for="safeId" :class="labelClasses">{{label}}</label>
       </slot>
     </template>
 
 
-    <template slot="input">
+    <template #input>
       <input v-bind="$attrs"
              :id="safeId"
              :class="inputClasses"
@@ -26,7 +26,7 @@
 
     <template v-for="slot in ['labelAfterInput','validFeedback',
                               'invalidFeedback','description']"
-              :slot="slot"
+              #[slot]
     >
       <slot :name="slot"></slot>
     </template>
diff --git a/src/components/Form/CFormInput.vue b/src/components/Form/CFormInput.vue
@@ -3,25 +3,28 @@
                        invalidFeedback, tooltipFeedback, description,
                        wrapperClasses, class: computedClasses}"
   >
-    <template slot="label">
+    <template #label>
       <slot name="label">
         <label v-if="label" :for="safeId" :class="labelClasses" v-html="label"></label>
       </slot>
     </template>
-    <input slot="input"
-           v-bind="$attrs"
-           :id="safeId"
-           :type="type"
-           :class="inputClasses"
-           :readonly="readonly || plaintext"
-           :value="state"
-           @input="onInput($event)"
-           @change="onChange($event)"
-    />
+    <template #input>
+      <input
+        v-bind="$attrs"
+        :id="safeId"
+        :type="type"
+        :class="inputClasses"
+        :readonly="readonly || plaintext"
+        :value="state"
+        @input="onInput($event)"
+        @change="onChange($event)"
+      />
+    </template>
+
 
     <template v-for="slot in ['prepend', 'append', 'labelAfterInput',
                               'validFeedback', 'invalidFeedback','description']"
-              :slot="slot"
+              #[slot]
     >
       <slot :name="slot">
       </slot>
diff --git a/src/components/Form/CFormSelect.vue b/src/components/Form/CFormSelect.vue
@@ -3,43 +3,44 @@
                        invalidFeedback, tooltipFeedback, description,
                        wrapperClasses, class: computedClasses}"
   >
-    <template slot="label">
+    <template #label>
       <slot name="label">
         <label v-if="label" :for="safeId" :class="labelClasses">{{label}}</label>
       </slot>
     </template>
 
-
-    <select slot="input"
-            v-bind="$attrs"
-            :id="safeId"
-            :class="inputClasses"
-            :value="String(state)"
-            @input="onSelect($event)"
-    >
-      <option v-if="placeholder" value="" selected disabled hidden>{{placeholder}}</option>
-      <template v-for="(option, key) in options">
-        <option v-if="typeof option === 'object'"
-                :value="String(option.value)"
-                :disabled="option.disabled"
-                :data-key="key"
-                :key="key"
-        >
-          {{option.text || option.value}}
-        </option>
-        <option v-else
-                :value="String(option)"
-                :data-key="key"
-                :key="key"
-        >
-          {{option}}
-        </option>
-      </template>
-    </select>
+    <template #input>
+      <select
+        v-bind="$attrs"
+        :id="safeId"
+        :class="inputClasses"
+        :value="String(state)"
+        @input="onSelect($event)"
+      >
+        <option v-if="placeholder" value="" selected disabled hidden>{{placeholder}}</option>
+        <template v-for="(option, key) in options">
+          <option v-if="typeof option === 'object'"
+                  :value="String(option.value)"
+                  :disabled="option.disabled"
+                  :data-key="key"
+                  :key="key"
+          >
+            {{option.text || option.value}}
+          </option>
+          <option v-else
+                  :value="String(option)"
+                  :data-key="key"
+                  :key="key"
+          >
+            {{option}}
+          </option>
+        </template>
+      </select>
+    </template>
 
 
     <template v-for="slot in ['prepend', 'append', 'labelAfterInput', 'validFeedback', 'invalidFeedback', 'description']"
-              :slot="slot"
+              #[slot]
     >
       <slot :name="slot">
       </slot>
diff --git a/src/components/Form/CFormTextarea.vue b/src/components/Form/CFormTextarea.vue
@@ -3,23 +3,25 @@
                        invalidFeedback, tooltipFeedback, description,
                        wrapperClasses, class: computedClasses}"
   >
-    <template slot="label">
+    <template #label>
       <slot name="label">
         <label v-if="label" :for="safeId" :class="labelClasses">{{label}}</label>
       </slot>
     </template>
-    <textarea slot="input"
-              v-bind="$attrs"
-              :id="safeId"
-              :class="inputClasses"
-              :readonly="readonly || plaintext"
-              :value="state"
-              @input="onInput($event)"
-              @change="onChange($event)"
-    />
+    <template #input>
+      <textarea
+        v-bind="$attrs"
+        :id="safeId"
+        :class="inputClasses"
+        :readonly="readonly || plaintext"
+        :value="state"
+        @input="onInput($event)"
+        @change="onChange($event)"
+      />
+    </template>
 
     <template v-for="slot in ['prepend', 'append', 'labelAfterInput', 'validFeedback', 'invalidFeedback','description']"
-              :slot="slot"
+              #[slot]
     >
       <slot :name="slot">
       </slot>
diff --git a/src/components/Header/HeaderDropdown.vue b/src/components/Header/HeaderDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <b-nav-item-dropdown :right="right" :no-caret="noCaret">
-    <template slot="button-content">
+    <template #buttonContent>
       <slot name="header">
         &#10068;
       </slot>
diff --git a/src/components/Sidebar/SidebarNav.vue b/src/components/Sidebar/SidebarNav.vue
@@ -95,7 +95,7 @@ export default {
     }
   },
   mounted () {
-    console.error(this.$options._componentTag + ' component is deprecated and will be replaced in coreui-vue 3.0 version, please import C - prefixed version')
+    console.error(this.$options._componentTag + ' component is deprecated and will be removed in 3.0 version')
   }
 }
 </script>
diff --git a/src/components/Widgets/docs/CWidget04.md b/src/components/Widgets/docs/CWidget04.md
@@ -33,8 +33,8 @@ You can also customize icon by utilizing slot named "icon"
            rightFooter="time"
            leftHeader="17"
            leftFooter="percentage">
-  <i slot="icon"
-     class="fa fa-battery-1"
-  ></i>
+  <template #icon>
+    <i class="fa fa-battery-1"></i>
+  </template>
 </CWidget04>
 ```
diff --git a/src/components/Widgets/docs/CWidget06.md b/src/components/Widgets/docs/CWidget06.md
@@ -12,16 +12,18 @@ text   | `'text:string'`
 <CWidget06 variant="info"
            header="9.823"
            text="Members online">
-  <b-dropdown slot="dropdown"
-              class="float-right"
-              variant="transparent p-0"
-              right>
-    <i slot="button-content"
-       class="icon-settings"
-    ></i>
-    <b-dropdown-item>Action</b-dropdown-item>
-  </b-dropdown>
+  <template #dropdown>
+    <CDropdown
+      class="float-right"
+      variant="transparent p-0"
+      right
+    >
+      <template #buttonContent>
+        <i class="icon-settings"></i>
+      </template>
+      <CDropdownItem>Action</CDropdownItem>
+    </CDropdown>
+  </template>
   <CSimpleBarChart label="Members"/>
-
 </CWidget06>
 ```

Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,7 @@ export default {`
`95`	`95`	`}`
`96`	`96`	`},`
`97`	`97`	`mounted () {`
`98`		`- console.error(this.$options._componentTag + ' component is deprecated and will be replaced in coreui-vue 3.0 version, please import C - prefixed version')`
	`98`	`+ console.error(this.$options._componentTag + ' component is deprecated and will be removed in 3.0 version')`
`99`	`99`	`}`
`100`	`100`	`}`
`101`	`101`	`</script>`