Fix #1027 icon-pack prop for individual components

buefy · Oct 12, 2018 · 317ac96 · 317ac96
1 parent 1e36bdc
commit 317ac96
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 37 deletions.
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -67,19 +67,18 @@
     import Modal from '../modal/Modal'
     import config from '../../utils/config'
     import { removeElement } from '../../utils/helpers'
-    import BaseElementMixin from '../../utils/BaseElementMixin'
 
     export default {
         name: 'BDialog',
         components: {
             [Icon.name]: Icon
         },
         extends: Modal,
-        mixins: [BaseElementMixin],
         props: {
             title: String,
             message: String,
             icon: String,
+            iconPack: String,
             hasIcon: Boolean,
             type: {
                 type: String,

diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
@@ -18,7 +18,7 @@
                     <div v-if="icon && hasIcon" class="media-left">
                         <b-icon
                             :icon="icon"
-                            :icon-pack="iconPack"
+                            :pack="iconPack"
                             :class="type"
                             both
                             :size="newIconSize"/>

diff --git a/src/components/notification/Notification.vue b/src/components/notification/Notification.vue
@@ -14,7 +14,7 @@
                 <div v-if="icon && hasIcon" class="media-left">
                     <b-icon
                         :icon="icon"
-                        :icon-pack="iconPack"
+                        :pack="iconPack"
                         both
                         size="is-large"/>
                 </div>

diff --git a/src/components/pagination/Pagination.vue b/src/components/pagination/Pagination.vue
@@ -5,21 +5,21 @@
             href="#"
             class="pagination-previous"
             :disabled="!hasPrev"
-            @click.prevent="prev" >
+            @click.prevent="prev">
             <b-icon
                 icon="chevron-left"
-                :icon-pack="iconPack"
+                :pack="iconPack"
                 both/>
         </a>
         <a
             role="button"
             href="#"
             class="pagination-next"
             :disabled="!hasNext"
-            @click.prevent="next" >
+            @click.prevent="next">
             <b-icon
                 icon="chevron-right"
-                :icon-pack="iconPack"
+                :pack="iconPack"
                 both/>
         </a>
         <ul class="pagination-list" v-if="!simple">
@@ -72,14 +72,12 @@
 
 <script>
     import Icon from '../icon/Icon'
-    import BaseElementMixin from '../../utils/BaseElementMixin'
 
     export default {
         name: 'BPagination',
         components: {
             [Icon.name]: Icon
         },
-        mixins: [BaseElementMixin],
         props: {
             total: [Number, String],
             perPage: {
@@ -93,7 +91,8 @@
             size: String,
             simple: Boolean,
             rounded: Boolean,
-            order: String
+            order: String,
+            iconPack: String
         },
         computed: {
             rootClasses() {

diff --git a/src/components/table/Table.vue b/src/components/table/Table.vue
@@ -51,7 +51,7 @@
                                 <b-icon
                                     v-show="currentSortColumn === column"
                                     icon="arrow-up"
-                                    :icon-pack="iconPack"
+                                    :pack="iconPack"
                                     both
                                     size="is-small"
                                     :class="{ 'is-desc': !isAsc }"/>
@@ -80,7 +80,7 @@
                                     @click.stop="toggleDetails(row)">
                                     <b-icon
                                         icon="chevron-right"
-                                        :icon-pack="iconPack"
+                                        :pack="iconPack"
                                         both
                                         :class="{'is-expanded': isVisibleDetailRow(row)}"/>
                                 </a>
@@ -181,8 +181,6 @@
     import TableMobileSort from './TableMobileSort'
     import TableColumn from './TableColumn'
 
-    import BaseElementMixin from '../../utils/BaseElementMixin'
-
     export default {
         name: 'BTable',
         components: {
@@ -192,7 +190,6 @@
             [TableMobileSort.name]: TableMobileSort,
             [TableColumn.name]: TableColumn
         },
-        mixins: [BaseElementMixin],
         props: {
             data: {
                 type: Array,
@@ -261,7 +258,8 @@
             total: {
                 type: [Number, String],
                 default: 0
-            }
+            },
+            iconPack: String
         },
         data() {
             return {

diff --git a/src/components/tabs/TabItem.vue b/src/components/tabs/TabItem.vue
@@ -7,14 +7,12 @@
 </template>
 
 <script>
-    import BaseElementMixin from '../../utils/BaseElementMixin'
-
     export default {
         name: 'BTabItem',
-        mixins: [BaseElementMixin],
         props: {
             label: String,
             icon: String,
+            iconPack: String,
             disabled: Boolean,
             visible: {
                 type: Boolean,

diff --git a/src/utils/BaseElementMixin.js b/src/utils/BaseElementMixin.js
diff --git a/src/utils/FormElementMixin.js b/src/utils/FormElementMixin.js
@@ -1,21 +1,22 @@
-import BaseElementMixin from './BaseElementMixin'
+import config from '../utils/config'
 
 export default {
-    mixins: [BaseElementMixin],
     props: {
         size: String,
         expanded: Boolean,
         loading: Boolean,
         rounded: Boolean,
         icon: String,
+        iconPack: String,
         // Native options to use in HTML5 validation
         autocomplete: String,
         maxlength: [Number, String]
     },
     data() {
         return {
             isValid: true,
-            isFocused: false
+            isFocused: false,
+            newIconPack: this.iconPack || config.defaultIconPack
         }
     },
     computed: {

diff --git a/src/utils/MessageMixin.js b/src/utils/MessageMixin.js
@@ -1,8 +1,6 @@
 import Icon from '../components/icon/Icon'
-import BaseElementMixin from './BaseElementMixin'
 
 export default {
-    mixins: [BaseElementMixin],
     components: {
         [Icon.name]: Icon
     },
@@ -19,6 +17,7 @@ export default {
         type: String,
         hasIcon: Boolean,
         size: String,
+        iconPack: String,
         iconSize: String,
         autoClose: {
             type: Boolean,