Front - Migrate to bootstrap-vue ^2.0.0

Author: Colin Yang

frontend/tinywebdb-php-vue/src/components/manage/All.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseCard>
-    <template slot="header">
+    <template #header>
       <div>
         <b-input-group>
           <div class="vertical-auto-margin">标签 -</div>

frontend/tinywebdb-php-vue/src/components/manage/Backup.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseCard>
-    <template slot="header">备份/恢复</template>
+    <template #header>备份/恢复</template>
     <div>
       <span style="font-size:15.5px"><b>数据导出</b></span>
       <hr />

frontend/tinywebdb-php-vue/src/components/manage/Init.vue

@@ -1,8 +1,8 @@
 <template>
   <b-jumbotron bg-variant="light">
-    <template slot="header">欢迎使用TPV</template>
+    <template #header>欢迎使用TPV</template>
 
-    <template slot="lead">
+    <template #lead>
       TPV（Tinywebdb-PHP-Vue），是一个高度可拓展的tinywebdb开源管理系统，由ColinTree主要负责开发和维护，具体见<b-link target="_blank" :href="$root.REPO_URL">TPV源码</b-link>
     </template>
 
@@ -13,7 +13,7 @@
     <b-form @submit.prevent="$refs.submit_btn.onClick()">
       <b-form-group label-cols="2" label="后台密码" label-for="pwd">
         <b-input id="pwd" type="password" autocomplete="new-password" v-model="pass" :state="pwdState" />
-        <template slot="description">
+        <template #description>
           <span :style="{ color: pwdTooShort ? 'red' : 'green' }">长度大于8位</span>
           <span :style="{ color: pwdInvalid ? 'red' : 'green' }">由数字、字母（区分大小写）、标点符号组成，且至少包含数字，字母，标点符号中的两种</span>
         </template>
@@ -51,7 +51,7 @@ export default {
     },
     pwd2State () {
       if (this.pass === '') {
-        return undefined
+        return null
       }
       return this.pass === this.pass2
     }

frontend/tinywebdb-php-vue/src/components/manage/Login.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseCard>
-    <template slot="header" v-text="'登录后台'" />
+    <template #header v-text="'登录后台'" />
     <b-form @submit.prevent="$refs.login_button.onClick()">
       <b-form-group :state="state" :valid-feedback="feedback" :invalid-feedback="feedback">
         <b-input-group prepend="后台密码" class="mt-2">

frontend/tinywebdb-php-vue/src/components/manage/Search.vue

@@ -7,7 +7,7 @@
       </b-input-group-append>
     </b-input-group>
     <b-card style="display:flex">
-      <template slot="header">
+      <template #header>
         <b-form-group>
           <b-checkbox v-model="ignoreCase">忽略大小写</b-checkbox>
         </b-form-group>

frontend/tinywebdb-php-vue/src/components/manage/Setting.vue

@@ -1,13 +1,13 @@
 <template>
   <BaseCard>
-    <template slot="header">设置</template>
+    <template #header>设置</template>
 
     <div v-if="loaded === true">
       <div class="setting-header">标签浏览页·分类列表</div>
       <b-form @submit.prevent="$refs.all_category_button.onClick()">
         <b-form-group>
           <b-input v-model="all_category.value" />
-          <template slot="description">
+          <template #description>
             使用井号#分隔每一项（重复项会被隐藏）<br>
             例如：默认显示全部，可选显示“student_”或者“teacher_”开头的标签，则应当这么填：
             <b-link @click="all_category.value = '#student_#teacher_'">#student_#teacher_（点击预览）</b-link>

frontend/tinywebdb-php-vue/src/components/manage/functional/DataTable.vue

@@ -37,19 +37,19 @@
         <strong>加载中……</strong>
       </div>
 
-      <template slot="HEAD_checkbox">
+      <template #head(checkbox)>
         <b-checkbox @change="onSelectAll" v-model="selectAll" /><!-- don't use @input ! -->
       </template>
 
-      <template slot="checkbox" slot-scope="row">
+      <template #cell(checkbox)="row">
         <b-checkbox v-if="!row.item.deleted" v-model="row.item.selected" />
       </template>
 
-      <template slot="keyNVal" slot-scope="row">
+      <template #cell(keyNVal)="row">
         <span v-html="itemToHtml(row.index)" />
       </template>
 
-      <template slot="operations" slot-scope="row">
+      <template #cell(operations)="row">
         <b-button
             v-if="!row.item.deleted"
             variant="primary"

frontend/tinywebdb-php-vue/src/components/manage/functional/SettingGroup.vue

@@ -11,7 +11,7 @@
         :valid-feedback="childConfig['valid-feedback'] || null"
         :invalid-feedback="childConfig['invalid-feedback'] || null">
 
-      <template slot="label">
+      <template #label>
         <span v-text="childConfig.label || ''" />
         <b-link
             v-if="childConfig['disable-via-value'] === true"
@@ -35,7 +35,7 @@
           :placeholder="childConfig.placeholder || ''"
           :disabled="childConfig['disable-via-value'] === true && value[childName] === 'disabled'" />
 
-      <template slot="description">
+      <template #description>
         <div
             v-show="childConfig['disable-via-value'] !== true || value[childName] !== 'disabled'"
             v-html="replaceAll(childConfig.description || '', '{{value}}', value[childName] || childConfig.placeholder || '')" />

frontend/tinywebdb-php-vue/src/components/root/BaseCard.vue

@@ -4,7 +4,7 @@
       <slot name="header" />
     </h6>
     <slot/>
-    <template slot="footer">
+    <template #footer>
       <slot name="footer" />
     </template>
   </b-card>