Updating to element-ui 2.0

Modules/Media/Assets/js/components/MediaList.vue

@@ -36,7 +36,7 @@
                                 </el-button-group>
                             </div>
                             <div class="search el-col el-col-5">
-                                <el-input icon="search" @change="performSearch" v-model="searchQuery">
+                                <el-input prefix-icon="el-icon-search" @keyup.native="performSearch" v-model="searchQuery">
                                 </el-input>
                             </div>
                         </div>
@@ -105,7 +105,7 @@
                                                         v-if="scope.row.is_folder && canEditFolders">
                                                     <i class="fa fa-pencil"></i>
                                                 </el-button>
-                                                <delete-button :slot-scope="scope" :rows="data"></delete-button>
+                                                <delete-button :scope="scope" :rows="data"></delete-button>
                                             </el-button-group>
                                         </div>
                                     </div>
@@ -231,11 +231,11 @@
                 this.tableIsLoading = true;
                 this.queryServer({ order_by: event.prop, order: event.order });
             },
-            performSearch(query) {
-                console.log(`searching:${query}`);
+            performSearch: _.debounce(function (query) {
+                console.log(`searching:${query.target.value}`);
                 this.tableIsLoading = true;
-                this.queryServer({ search: query });
-            },
+                this.queryServer({ search: query.target.value });
+            }, 300),
             enterFolder(scope) {
                 this.tableIsLoading = true;
                 this.queryServer({ folder_id: scope.row.id });

Modules/Media/Assets/js/components/MoveMediaDialog.vue

 <template>
     <div>
-        <el-dialog title="Move Media" :visible.sync="dialogFormVisible" size="tiny" class="move-media-dialog"  @open="fetchFolders">
+        <el-dialog title="Move Media" :visible.sync="dialogFormVisible" width="30%" class="move-media-dialog"  @open="fetchFolders">
             <el-form v-loading.body="loading" @submit.native.prevent="onSubmit()">
                 <el-form-item label="To" :class="{'el-form-item is-error': form.errors.has('destinationFolder') }">
                     <el-select v-model="destinationFolder" placeholder="Select">
@@ -17,7 +17,7 @@
                          v-text="form.errors.first('destinationFolder')"></div>
                 </el-form-item>
             </el-form>
-            <span slot-scope="footer" class="dialog-footer">
+            <span slot="footer" class="dialog-footer">
                 <el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
                 <el-button type="warning" @click="onSubmit()">{{ trans('core.move') }}</el-button>
             </span>

Modules/Media/Assets/js/components/NewFolder.vue

 <template>
     <div>
         <el-button type="success" class="new-folder" @click="dialogFormVisible = true">
-            <i class="el-icon-fa-plus"></i> {{ trans('folders.create resource') }}
+            <i class="fa fa-plus"></i> {{ trans('folders.create resource') }}
         </el-button>
 
-        <el-dialog :title="trans('folders.create resource')" :visible.sync="dialogFormVisible" size="tiny">
+        <el-dialog :title="trans('folders.create resource')" :visible.sync="dialogFormVisible" width="30%">
             <el-form :model="folder" v-loading.body="loading" @submit.native.prevent="onSubmit()">
                 <el-form-item :label="trans('folders.folder name')" :class="{'el-form-item is-error': form.errors.has('name') }">
                     <el-input v-model="folder.name" auto-complete="off" autofocus></el-input>
@@ -12,10 +12,10 @@
                          v-text="form.errors.first('name')"></div>
                 </el-form-item>
             </el-form>
-            <span slot-scope="footer" class="dialog-footer">
-            <el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
-            <el-button type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button>
-          </span>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
+                <el-button type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button>
+            </span>
         </el-dialog>
 
     </div>

Modules/Media/Assets/js/components/RenameFolder.vue

 <template>
     <div>
-        <el-dialog title="Rename Folder" :visible.sync="dialogFormVisible" size="tiny">
+        <el-dialog title="Rename Folder" :visible.sync="dialogFormVisible" width="30%">
             <el-form :model="folder" v-loading.body="loading" @submit.native.prevent="onSubmit()">
                 <el-form-item label="Folder name" :class="{'el-form-item is-error': form.errors.has('name') }">
                     <el-input v-model="folder.name" auto-complete="off" autofocus></el-input>
@@ -8,7 +8,7 @@
                          v-text="form.errors.first('name')"></div>
                 </el-form-item>
             </el-form>
-            <span slot-scope="footer" class="dialog-footer">
+            <span slot="footer" class="dialog-footer">
             <el-button @click="closeDialog">{{ trans('core.button.cancel') }}</el-button>
             <el-button type="primary" @click="onSubmit()">{{ trans('core.confirm') }}</el-button>
           </span>

Modules/Media/Assets/js/components/SingleMedia.vue

@@ -16,12 +16,12 @@
 
         <el-dialog
                 :visible.sync="dialogVisible"
-                size="full"
+                fullscreen
                 :before-close="handleClose">
 
             <media-list single-modal :event-name="this.eventName"></media-list>
 
-            <span slot-scope="footer" class="dialog-footer">
+            <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">{{ trans('core.button.cancel') }}</el-button>
             </span>
         </el-dialog>

Modules/Media/Assets/js/components/UploadButton.vue

@@ -8,7 +8,7 @@
             :http-request="uploadFile"
             :multiple="true"
             style="display: inline-block; margin-right: 10px;">
-        <el-button size="small" type="primary" style="padding: 11px 9px;" :loading="fileIsUploading">{{ trans('media.upload file') }}</el-button>
+        <el-button size="small" type="primary" style="padding: 13px 9px;" :loading="fileIsUploading">{{ trans('media.upload file') }}</el-button>
     </el-upload>
 </template>
 

Modules/Page/Assets/js/components/PageTable.vue

@@ -17,7 +17,7 @@
                                 <a class="btn btn-default btn-flat" @click.prevent="goToEdit(scope)"><i
                                         class="fa fa-pencil"></i></a>
 
-                                <delete-button :slot-scope="scope" :rows="data" :translations="translations">
+                                <delete-button :scope="scope" :rows="data" :translations="translations">
                                 </delete-button>
                             </template>
                         </el-table-column>

Modules/Page/Assets/js/components/PageTableServerSide.vue

@@ -23,7 +23,7 @@
                                         <el-button type="primary">
                                             {{ trans('core.table.actions') }}<i class="el-icon-caret-bottom el-icon--right"></i>
                                         </el-button>
-                                        <el-dropdown-menu slot-slot-scope="dropdown">
+                                        <el-dropdown-menu slot="dropdown">
                                             <el-dropdown-item command="mark-online">{{ trans('core.mark as online') }}</el-dropdown-item>
                                             <el-dropdown-item command="mark-offline">{{ trans('core.mark as offline') }}</el-dropdown-item>
                                         </el-dropdown-menu>
@@ -35,7 +35,7 @@
                                     </router-link>
                                 </div>
                                 <div class="search el-col el-col-5">
-                                    <el-input icon="search" @change="performSearch" v-model="searchQuery">
+                                    <el-input prefix-icon="el-icon-search" @keyup.native="performSearch" v-model="searchQuery">
                                     </el-input>
                                 </div>
                             </div>
@@ -54,7 +54,7 @@
                                 </el-table-column>
                                 <el-table-column :label="trans('pages.status')" width="100">
                                     <template slot-scope="scope">
-                                        <i class="el-icon-fa-circle" :class="(scope.row.translations.status === true) ? 'text-success':'text-danger'"></i>
+                                        <i class="fa fa-circle" :class="(scope.row.translations.status === true) ? 'text-success':'text-danger'"></i>
                                     </template>
                                 </el-table-column>
                                 <el-table-column prop="id" label="Id" width="75" sortable="custom">
@@ -79,7 +79,7 @@
                                     <template slot-scope="scope">
                                         <el-button-group>
                                             <edit-button :to="{name: 'admin.page.page.edit', params: {pageId: scope.row.id}}"></edit-button>
-                                            <delete-button :slot-scope="scope" :rows="data"></delete-button>
+                                            <delete-button :scope="scope" :rows="data"></delete-button>
                                         </el-button-group>
                                     </template>
                                 </el-table-column>
@@ -176,11 +176,11 @@
                 this.tableIsLoading = true;
                 this.queryServer({ order_by: event.prop, order: event.order });
             },
-            performSearch(query) {
-                console.log(`searching:${query}`);
+            performSearch: _.debounce(function (query) {
+                console.log(`searching:${query.target.value}`);
                 this.tableIsLoading = true;
-                this.queryServer({ search: query });
-            },
+                this.queryServer({ search: query.target.value });
+            }, 300),
             handleExtraActions(action) {
                 const pageIds = _.map(this.selectedPages, elem => elem.id);
                 axios.get(route('api.page.page.mark-status', { action, pageIds: JSON.stringify(pageIds) }))

Modules/User/Assets/js/components/RoleTable.vue

@@ -27,7 +27,7 @@
                                     </router-link>
                                 </div>
                                 <div class="search el-col el-col-5">
-                                    <el-input icon="search" @change="performSearch" v-model="searchQuery">
+                                    <el-input icon="search" @keyup.native="performSearch" v-model="searchQuery">
                                     </el-input>
                                 </div>
                             </div>
@@ -63,7 +63,7 @@
                                         <el-button-group>
                                             <edit-button
                                                     :to="{name: 'admin.user.roles.edit', params: {roleId: scope.row.id}}"></edit-button>
-                                            <delete-button :slot-scope="scope" :rows="data"></delete-button>
+                                            <delete-button :scope="scope" :rows="data"></delete-button>
                                         </el-button-group>
                                     </template>
                                 </el-table-column>
@@ -151,11 +151,11 @@
                 this.tableIsLoading = true;
                 this.queryServer({ order_by: event.prop, order: event.order });
             },
-            performSearch(query) {
-                console.log(`searching:${query}`);
+            performSearch: _.debounce(function (query) {
+                console.log(`searching:${query.target.value}`);
                 this.tableIsLoading = true;
-                this.queryServer({ search: query });
-            },
+                this.queryServer({ search: query.target.value });
+            }, 300),
             goToEdit(scope) {
                 this.$router.push({ name: 'admin.user.roles.edit', params: { roleId: scope.row.id } });
             },

Modules/User/Assets/js/components/UserTable.vue

@@ -27,7 +27,7 @@
                                     </router-link>
                                 </div>
                                 <div class="search el-col el-col-5">
-                                    <el-input icon="search" @change="performSearch" v-model="searchQuery">
+                                    <el-input icon="search" @keyup.native="performSearch" v-model="searchQuery">
                                     </el-input>
                                 </div>
                             </div>
@@ -70,7 +70,7 @@
                                         <el-button-group>
                                             <edit-button
                                                     :to="{name: 'admin.user.users.edit', params: {userId: scope.row.id}}"></edit-button>
-                                            <delete-button :slot-scope="scope" :rows="data"></delete-button>
+                                            <delete-button :scope="scope" :rows="data"></delete-button>
                                         </el-button-group>
                                     </template>
                                 </el-table-column>
@@ -158,11 +158,11 @@
                 this.tableIsLoading = true;
                 this.queryServer({ order_by: event.prop, order: event.order });
             },
-            performSearch(query) {
-                console.log(`searching:${query}`);
+            performSearch: _.debounce(function (query) {
+                console.log(`searching:${query.target.value}`);
                 this.tableIsLoading = true;
-                this.queryServer({ search: query });
-            },
+                this.queryServer({ search: query.target.value });
+            }, 300),
             goToEdit(scope) {
                 this.$router.push({ name: 'admin.user.users.edit', params: { userId: scope.row.id } });
             },

package.json

@@ -25,7 +25,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
-    "element-ui": "^1.4.8",
+    "element-ui": "^2.0.1",
     "font-awesome": "^4.7.0",
     "form-backend-validation": "^2.0.2",
     "lodash": "^4.17.4",

resources/assets/sass/app.scss

 // Element UI
-@import "~element-ui/lib/theme-default/index.css";
+@import "~element-ui/lib/theme-chalk/index.css";
 
-$fa-font-path: "~font-awesome/fonts";
-$fa-css-prefix: el-icon-fa;
-@import "~font-awesome/scss/font-awesome";
-[class^="el-icon-fa"], [class*=" el-icon-fa"] {
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome!important;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-};
+.el-form-item__label {
+  line-height: normal;
+}
+.el-table td, .el-table th {
+  padding: 5px 0;
+}