buefy 0.9.21 → 0.9.23

package/src/components/table/TableColumn.vue

@@ -1,121 +1,121 @@
-<script>
-import { toCssWidth } from '../../utils/helpers'
-
-export default {
-    name: 'BTableColumn',
-    inject: {
-        $table: { name: '$table', default: false }
-    },
-    props: {
-        label: String,
-        customKey: [String, Number],
-        field: String,
-        meta: [String, Number, Boolean, Function, Object, Array],
-        width: [Number, String],
-        numeric: Boolean,
-        centered: Boolean,
-        searchable: Boolean,
-        sortable: Boolean,
-        visible: {
-            type: Boolean,
-            default: true
-        },
-        subheading: [String, Number],
-        customSort: Function,
-        customSearch: Function,
-        sticky: Boolean,
-        headerSelectable: Boolean,
-        headerClass: String,
-        cellClass: String,
-        thAttrs: {
-            type: Function,
-            default: () => ({})
-        },
-        tdAttrs: {
-            type: Function,
-            default: () => ({})
-        }
-    },
-    data() {
-        return {
-            newKey: this.customKey || this.label,
-            _isTableColumn: true
-        }
-    },
-    computed: {
-        thClasses() {
-            const attrs = this.thAttrs(this)
-            const classes = [this.headerClass, {
-                'is-sortable': this.sortable,
-                'is-sticky': this.sticky,
-                'is-unselectable': this.isHeaderUnSelectable
-            }]
-            if (attrs && attrs.class) {
-                classes.push(attrs.class)
-            }
-            return classes
-        },
-        thStyle() {
-            const attrs = this.thAttrs(this)
-            const style = [this.style]
-            if (attrs && attrs.style) {
-                style.push(attrs.style)
-            }
-            return style
-        },
-        rootClasses() {
-            return [this.cellClass, {
-                'has-text-right': this.numeric && !this.centered,
-                'has-text-centered': this.centered,
-                'is-sticky': this.sticky
-            }]
-        },
-        style() {
-            return {
-                width: toCssWidth(this.width)
-            }
-        },
-        hasDefaultSlot() {
-            return !!this.$scopedSlots.default
-        },
-        /**
-         * Return if column header is un-selectable
-         */
-        isHeaderUnSelectable() {
-            return !this.headerSelectable && this.sortable
-        }
-    },
-    methods: {
-        getRootClasses(row) {
-            const attrs = this.tdAttrs(row, this)
-            const classes = [this.rootClasses]
-            if (attrs && attrs.class) {
-                classes.push(attrs.class)
-            }
-            return classes
-        },
-        getRootStyle(row) {
-            const attrs = this.tdAttrs(row, this)
-            const style = []
-            if (attrs && attrs.style) {
-                style.push(attrs.style)
-            }
-            return style
-        }
-    },
-    created() {
-        if (!this.$table) {
-            this.$destroy()
-            throw new Error('You should wrap bTableColumn on a bTable')
-        }
-        this.$table.refreshSlots()
-    },
-    beforeDestroy() {
-        this.$table.refreshSlots()
-    },
-    render(createElement) {
-        // renderless
-        return null
-    }
-}
-</script>
+<script>
+import { toCssWidth } from '../../utils/helpers'
+
+export default {
+    name: 'BTableColumn',
+    inject: {
+        $table: { name: '$table', default: false }
+    },
+    props: {
+        label: String,
+        customKey: [String, Number],
+        field: String,
+        meta: [String, Number, Boolean, Function, Object, Array],
+        width: [Number, String],
+        numeric: Boolean,
+        centered: Boolean,
+        searchable: Boolean,
+        sortable: Boolean,
+        visible: {
+            type: Boolean,
+            default: true
+        },
+        subheading: [String, Number],
+        customSort: Function,
+        customSearch: Function,
+        sticky: Boolean,
+        headerSelectable: Boolean,
+        headerClass: String,
+        cellClass: String,
+        thAttrs: {
+            type: Function,
+            default: () => ({})
+        },
+        tdAttrs: {
+            type: Function,
+            default: () => ({})
+        }
+    },
+    data() {
+        return {
+            newKey: this.customKey || this.label,
+            _isTableColumn: true
+        }
+    },
+    computed: {
+        thClasses() {
+            const attrs = this.thAttrs(this)
+            const classes = [this.headerClass, {
+                'is-sortable': this.sortable,
+                'is-sticky': this.sticky,
+                'is-unselectable': this.isHeaderUnSelectable
+            }]
+            if (attrs && attrs.class) {
+                classes.push(attrs.class)
+            }
+            return classes
+        },
+        thStyle() {
+            const attrs = this.thAttrs(this)
+            const style = [this.style]
+            if (attrs && attrs.style) {
+                style.push(attrs.style)
+            }
+            return style
+        },
+        rootClasses() {
+            return [this.cellClass, {
+                'has-text-right': this.numeric && !this.centered,
+                'has-text-centered': this.centered,
+                'is-sticky': this.sticky
+            }]
+        },
+        style() {
+            return {
+                width: toCssWidth(this.width)
+            }
+        },
+        hasDefaultSlot() {
+            return !!this.$scopedSlots.default
+        },
+        /**
+         * Return if column header is un-selectable
+         */
+        isHeaderUnSelectable() {
+            return !this.headerSelectable && this.sortable
+        }
+    },
+    methods: {
+        getRootClasses(row) {
+            const attrs = this.tdAttrs(row, this)
+            const classes = [this.rootClasses]
+            if (attrs && attrs.class) {
+                classes.push(attrs.class)
+            }
+            return classes
+        },
+        getRootStyle(row) {
+            const attrs = this.tdAttrs(row, this)
+            const style = []
+            if (attrs && attrs.style) {
+                style.push(attrs.style)
+            }
+            return style
+        }
+    },
+    created() {
+        if (!this.$table) {
+            this.$destroy()
+            throw new Error('You should wrap bTableColumn on a bTable')
+        }
+        this.$table.refreshSlots()
+    },
+    beforeDestroy() {
+        this.$table.refreshSlots()
+    },
+    render(createElement) {
+        // renderless
+        return null
+    }
+}
+</script>

package/src/components/table/TableMobileSort.vue

@@ -86,8 +86,8 @@
 </template>
 
 <script>
-import Select from '../select/Select'
-import Icon from '../icon/Icon'
+import Select from '../select/Select.vue'
+import Icon from '../icon/Icon.vue'
 
 export default {
     name: 'BTableMobileSort',

package/src/components/table/TablePagination.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import Pagination from '../pagination/Pagination'
+import Pagination from '../pagination/Pagination.vue'
 
 export default {
     name: 'BTablePagination',

package/src/components/table/index.js

@@ -1,5 +1,5 @@
-import Table from './Table'
-import TableColumn from './TableColumn'
+import Table from './Table.vue'
+import TableColumn from './TableColumn.vue'
 
 import { use, registerComponent } from '../../utils/plugins'
 import { VueInstance, setVueInstance } from '../../utils/config'

package/src/components/tabs/TabItem.vue

@@ -1,5 +1,5 @@
 <script>
-import TabbedChildMixin from '../../utils/TabbedChildMixin.js'
+import TabbedChildMixin from '../../utils/TabbedChildMixin'
 
 export default {
     name: 'BTabItem',

package/src/components/tabs/Tabs.vue

@@ -60,7 +60,7 @@
 
 <script>
 import config from '../../utils/config'
-import TabbedMixin from '../../utils/TabbedMixin.js'
+import TabbedMixin from '../../utils/TabbedMixin'
 
 export default {
     name: 'BTabs',

package/src/components/tabs/index.js

@@ -1,5 +1,5 @@
-import Tabs from './Tabs'
-import TabItem from './TabItem'
+import Tabs from './Tabs.vue'
+import TabItem from './TabItem.vue'
 
 import { use, registerComponent } from '../../utils/plugins'
 

package/src/components/tag/index.js

@@ -1,5 +1,5 @@
-import Tag from './Tag'
-import Taglist from './Taglist'
+import Tag from './Tag.vue'
+import Taglist from './Taglist.vue'
 
 import { use, registerComponent } from '../../utils/plugins'
 

package/src/components/taginput/Taginput.vue

@@ -43,7 +43,7 @@
                 :loading="loading"
                 :autocomplete="nativeAutocomplete"
                 :open-on-focus="openOnFocus"
-                :keep-open="openOnFocus"
+                :keep-open="keepOpen"
                 :keep-first="keepFirst"
                 :group-field="groupField"
                 :group-options="groupOptions"
@@ -98,8 +98,8 @@
 
 <script>
 import { getValueByPath } from '../../utils/helpers'
-import Tag from '../tag/Tag'
-import Autocomplete from '../autocomplete/Autocomplete'
+import Tag from '../tag/Tag.vue'
+import Autocomplete from '../autocomplete/Autocomplete.vue'
 import config from '../../utils/config'
 import FormElementMixin from '../../utils/FormElementMixin'
 
@@ -147,6 +147,10 @@ export default {
         groupOptions: String,
         nativeAutocomplete: String,
         openOnFocus: Boolean,
+        keepOpen: {
+            type: Boolean,
+            default: true
+        },
         keepFirst: Boolean,
         disabled: Boolean,
         ellipsis: Boolean,

package/src/components/taginput/index.js

@@ -1,4 +1,4 @@
-import Taginput from './Taginput'
+import Taginput from './Taginput.vue'
 
 import { use, registerComponent } from '../../utils/plugins'
 

package/src/components/timepicker/Timepicker.vue

@@ -129,12 +129,12 @@
 
 <script>
 import TimepickerMixin from '../../utils/TimepickerMixin'
-import Dropdown from '../dropdown/Dropdown'
-import DropdownItem from '../dropdown/DropdownItem'
-import Input from '../input/Input'
-import Field from '../field/Field'
-import Select from '../select/Select'
-import Icon from '../icon/Icon'
+import Dropdown from '../dropdown/Dropdown.vue'
+import DropdownItem from '../dropdown/DropdownItem.vue'
+import Input from '../input/Input.vue'
+import Field from '../field/Field.vue'
+import Select from '../select/Select.vue'
+import Icon from '../icon/Icon.vue'
 
 export default {
     name: 'BTimepicker',

package/src/components/timepicker/index.js

@@ -1,4 +1,4 @@
-import Timepicker from './Timepicker'
+import Timepicker from './Timepicker.vue'
 
 import { use, registerComponent } from '../../utils/plugins'
 

package/src/components/toast/Toast.vue

@@ -22,7 +22,7 @@
 
 <script>
 import config from '../../utils/config'
-import NoticeMixin from '../../utils/NoticeMixin.js'
+import NoticeMixin from '../../utils/NoticeMixin'
 
 export default {
     name: 'BToast',

package/src/components/toast/index.js

@@ -1,4 +1,4 @@
-import Toast from './Toast'
+import Toast from './Toast.vue'
 
 import config, { VueInstance } from '../../utils/config'
 import { merge } from '../../utils/helpers'

package/src/components/tooltip/Tooltip.spec.js

@@ -16,4 +16,39 @@ describe('BTooltip', () => {
     it('render correctly', () => {
         expect(wrapper.html()).toMatchSnapshot()
     })
+
+    it('tests isActive watch', async () => {
+        await wrapper.setProps({appendToBody: true})
+        wrapper.vm.updateAppendToBody = jest.fn()
+        wrapper.vm.isActive = true
+        expect(wrapper.vm.updateAppendToBody).toHaveBeenCalled()
+        expect(wrapper.emitted().open).toBeTruthy()
+    })
+
+    it('tests onHover method', async () => {
+        const onHover = jest.spyOn(wrapper.vm, 'onHover')
+        const open = jest.spyOn(wrapper.vm, 'open')
+        await wrapper.setProps({triggers: ['hover']})
+        wrapper.vm.onHover()
+        expect(onHover).toHaveBeenCalled()
+        expect(open).toHaveBeenCalled()
+    })
+
+    it('tests onContextMenu method', async () => {
+        const onContextMenu = jest.spyOn(wrapper.vm, 'onContextMenu')
+        const open = jest.spyOn(wrapper.vm, 'open')
+        await wrapper.setProps({triggers: ['contextmenu']})
+        wrapper.vm.onContextMenu({preventDefault: jest.fn()})
+        expect(onContextMenu).toHaveBeenCalled()
+        expect(open).toHaveBeenCalled()
+    })
+
+    it('tests onFocus method', async () => {
+        const onFocus = jest.spyOn(wrapper.vm, 'onFocus')
+        const open = jest.spyOn(wrapper.vm, 'open')
+        await wrapper.setProps({triggers: ['focus']})
+        wrapper.vm.onFocus()
+        expect(onFocus).toHaveBeenCalled()
+        expect(open).toHaveBeenCalled()
+    })
 })

package/src/components/tooltip/index.js

@@ -1,4 +1,4 @@
-import Tooltip from './Tooltip'
+import Tooltip from './Tooltip.vue'
 
 import { use, registerComponent } from '../../utils/plugins'
 

package/src/components/upload/index.js

@@ -1,4 +1,4 @@
-import Upload from './Upload'
+import Upload from './Upload.vue'
 
 import { use, registerComponent } from '../../utils/plugins'
 

package/src/index.js

@@ -36,5 +36,6 @@ export { NotificationProgrammatic } from './components/notification'
 export { SnackbarProgrammatic } from './components/snackbar'
 export { ToastProgrammatic } from './components/toast'
 export { default as ConfigProgrammatic } from './utils/ConfigComponent'
+export { default as Color } from './utils/color'
 // export helpers
 export * from './utils/helpers'

package/src/scss/components/_colorpicker.scss

@@ -46,7 +46,7 @@ $colorpicker-hue-selected-stroke: $primary !default;
     .dropdown.is-expanded.is-mobile-modal .dropdown-menu {
         width: unset;
     }
-    .dropdown-horizonal-colorpicker {
+    .dropdown-horizontal-colorpicker {
         display: flex;
         flex-direction: row;
 

package/src/scss/components/_datepicker.scss

@@ -210,10 +210,10 @@ $datepicker-item-selected-background-color: $primary !default;
             margin-left: 5px;
             display: flex;
         }
-        .dropdown-horizonal-timepicker {
+        .dropdown-horizontal-timepicker {
             display: flex;
         }
-        .content-horizonal-timepicker {
+        .content-horizontal-timepicker {
             border-right: 1px solid #dbdbdb;
         }
     }

package/src/scss/components/_message.scss

@@ -4,7 +4,13 @@
         padding-top: 0;
         border: 0;
     }
-    progress {
-    	height: 5px;
+    .auto-close-progress {
+        progress {
+            border-top-left-radius: 0!important;
+            border-top-right-radius: 0!important;
+            border-bottom-left-radius: 0!important;
+            border-bottom-right-radius: 0!important;
+            height: 10px!important;
+        }
     }
 }

package/src/scss/components/_notification.scss

@@ -1,8 +1,8 @@
 .notification {
-	.progress-wrapper {
-    	position: absolute;
-    	bottom: 0;
-    	left: 0;
-    	width: 100%;
+	.auto-close-progress.progress-wrapper {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
 	}
 }

package/src/scss/components/_radio.scss

@@ -82,6 +82,9 @@ $radio-colors: $form-colors !default;
                     }
                 }
             }
+            &[disabled] + .check {
+                cursor: not-allowed;
+            }
         }
         .control-label {
             padding-left: $control-padding-horizontal;

package/src/scss/components/_table.scss

@@ -123,6 +123,7 @@ $table-sticky-header-height: 300px !default;
                 &.is-numeric {
                     flex-direction: row-reverse;
                     text-align: right;
+                    width: 95%;
                     .icon {
                         margin-left: 0;
                         margin-right: 0.5rem;

package/src/utils/MessageMixin.js

@@ -1,4 +1,4 @@
-import Icon from '../components/icon/Icon'
+import Icon from '../components/icon/Icon.vue'
 
 export default {
     components: {

package/src/utils/TabbedChildMixin.js

@@ -62,8 +62,8 @@ export default (parentCmp) => ({
                 name: 'show',
                 value: this.isActive && this.visible
             }],
+            staticClass: this.elementClass,
             attrs: {
-                'class': this.elementClass,
                 'role': this.elementRole,
                 'id': `${this.value}-content`,
                 'aria-labelledby': this.elementRole ? `${this.value}-label` : null,

package/src/utils/TabbedMixin.js

@@ -1,4 +1,4 @@
-import Icon from '../components/icon/Icon'
+import Icon from '../components/icon/Icon.vue'
 import SlotComponent from '../utils/SlotComponent'
 import { default as ProviderParentMixin, Sorted } from './ProviderParentMixin'
 import {bound} from './helpers'

package/src/utils/color.js

@@ -1,6 +1,7 @@
 export const colorChannels = ['red', 'green', 'blue', 'alpha']
 
 export const colorsNammed = {
+    transparent: '#00000000',
     black: '#000000',
     silver: '#c0c0c0',
     gray: '#808080',
@@ -328,12 +329,12 @@ class Color {
                 ]
 
                 return Color.fromRGB(...channels.map((value) => Number(value)))
-            } else if ((match = args[0].match(/^(h(sl|wb)a?|lab|color|cmyk)\(/i))) {
+            } else if ((args[0].match(/^(h(sl|wb)a?|lab|color|cmyk)\(/i))) {
                 throw new Error('Color expression not implemented yet')
             }
         }
 
-        return new Color()
+        throw new Error('Invalid color expression')
     }
 
     static parseObject(object) {

package/src/utils/color.spec.js

@@ -7,8 +7,10 @@ describe('Color', () => {
 
         expect(red.$channels).toEqual(new Uint8Array([255, 0, 0, 255]))
         expect(transparentBlue.$channels).toEqual(new Uint8Array([0, 0, 255, 6]))
+        expect(() => Color.parse('#1234567')).toThrow()
+        expect(() => Color.parse('#123456789')).toThrow()
     })
-    it('parse nammed color', () => {
+    it('parse named color', () => {
         const lime = Color.parse('lime')
         const transparent = Color.parse('transparent')