buefy 0.9.21 → 0.9.23

package/src/components/colorpicker/Colorpicker.vue

@@ -24,7 +24,7 @@
                         :expanded="expanded"
                         :disabled="disabled"
                     >
-                        <span class="color-name">{{ colorFormatter(colorSelected) }}</span>
+                        <span class="color-name">{{ colorFormatter(computedValue) }}</span>
                     </b-button>
                 </slot>
             </template>
@@ -33,7 +33,7 @@
                 :disabled="disabled"
                 :focusable="focusable"
                 custom
-                :class="{'dropdown-horizonal-colorpicker': horizontalColorPicker}"
+                :class="{'dropdown-horizontal-colorpicker': horizontalColorPicker}"
             >
                 <div>
                     <header class="colorpicker-header">
@@ -44,12 +44,12 @@
                     <div class="colorpicker-content">
                         <b-colorpicker-h-s-l-representation-square
                             v-if="representation === 'square'"
-                            :value="colorSelected"
+                            :value="computedValue"
                             @input="updateColor"
                         />
                         <b-colorpicker-h-s-l-representation-triangle
                             v-else
-                            :value="colorSelected"
+                            :value="computedValue"
                             @input="updateColor"
                         />
                     </div>
@@ -57,16 +57,17 @@
                 <footer class="colorpicker-footer">
                     <b-colorpicker-alpha-slider
                         v-if="alpha"
-                        :value="colorSelected.alpha"
+                        :value="computedValue.alpha"
                         @input="updateAlpha"
-                        :color="colorSelected"
+                        :color="computedValue"
                     />
-                    <slot name="footer" :color="colorSelected">
+                    <slot name="footer" :color="computedValue">
                         <b-field class="colorpicker-fields" grouped>
                             <b-field horizontal label="R">
                                 <b-input
                                     type="number"
-                                    v-model.number="colorSelected.red"
+                                    v-model.number="computedValue.red"
+                                    @input="updateRGB"
                                     size="is-small"
                                     aria-label="Red"
                                 />
@@ -74,7 +75,8 @@
                             <b-field horizontal label="G">
                                 <b-input
                                     type="number"
-                                    v-model.number="colorSelected.green"
+                                    v-model.number="computedValue.green"
+                                    @input="updateRGB"
                                     size="is-small"
                                     aria-label="Green"
                                 />
@@ -82,7 +84,8 @@
                             <b-field horizontal label="B">
                                 <b-input
                                     type="number"
-                                    v-model.number="colorSelected.blue"
+                                    v-model.number="computedValue.blue"
+                                    @input="updateRGB"
                                     size="is-small"
                                     aria-label="Blue"
                                 />
@@ -101,16 +104,16 @@ import { isMobile } from '../../utils/helpers'
 import config from '../../utils/config'
 import Color from '../../utils/color'
 
-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'
 
-import ColorpickerHSLRepresentationTriangle from './ColorpickerHSLRepresentationTriangle'
-import ColorpickerHSLRepresentationSquare from './ColorpickerHSLRepresentationSquare'
-import ColorpickerAlphaSlider from './ColorpickerAlphaSlider'
+import ColorpickerHSLRepresentationTriangle from './ColorpickerHSLRepresentationTriangle.vue'
+import ColorpickerHSLRepresentationSquare from './ColorpickerHSLRepresentationSquare.vue'
+import ColorpickerAlphaSlider from './ColorpickerAlphaSlider.vue'
 
 const defaultColorFormatter = (color, vm) => {
     if (color.alpha < 1) {
@@ -211,22 +214,28 @@ export default {
         appendToBody: Boolean
     },
     data() {
-        const color = this.colorParser(this.value)
-
         return {
-            colorSelected: color
+            color: this.parseColor(this.value)
         }
     },
     computed: {
+        computedValue: {
+            set(value) {
+                this.color = this.parseColor(value)
+            },
+            get() {
+                return this.color
+            }
+        },
         background() {
             if (this.alpha) {
                 return `linear-gradient(
                     45deg,
-                    ${this.colorSelected.toString('hex')} 50%,
-                    ${this.colorSelected.toString('hexa')} 50%
+                    ${this.computedValue.toString('hex')} 50%,
+                    ${this.computedValue.toString('hexa')} 50%
                 )`
             } else {
-                const hex = this.colorSelected.toString('hex')
+                const hex = this.computedValue.toString('hex')
                 return `linear-gradient(
                     45deg,
                     ${hex} 50%,
@@ -235,7 +244,7 @@ export default {
             }
         },
         triggerStyle() {
-            const { red, green, blue } = this.colorSelected
+            const { red, green, blue } = this.computedValue
             const light = (red * 0.299 + green * 0.587 + blue * 0.114) > 186
 
             return {
@@ -264,18 +273,28 @@ export default {
     },
     watch: {
         value(value) {
-            this.colorSelected = new Color(value)
+            this.computedValue = new Color(value)
         }
     },
     methods: {
+        parseColor(color) {
+            try {
+                return this.colorParser(color)
+            } catch (e) {
+                return new Color()
+            }
+        },
         updateColor(value) {
-            value.alpha = this.colorSelected.alpha
-            this.colorSelected = value
+            value.alpha = this.computedValue.alpha
+            this.computedValue = value
             this.$emit('input', value)
         },
         updateAlpha(alpha) {
-            this.colorSelected.alpha = alpha
-            this.$emit('input', this.colorSelected)
+            this.computedValue.alpha = alpha
+            this.$emit('input', this.computedValue)
+        },
+        updateRGB() {
+            this.$emit('input', this.computedValue)
         },
         /*
          * Format color into string

package/src/components/colorpicker/ColorpickerAlphaSlider.spec.js

@@ -1,11 +1,13 @@
 import { shallowMount } from '@vue/test-utils'
+import Color from '@utils/color'
 import BColorpickerAlphaSlider from '@components/colorpicker/ColorpickerAlphaSlider'
 
 describe('BColorpickerAlphaSlider', () => {
     it('render correctly', () => {
         const wrapper = shallowMount(BColorpickerAlphaSlider, {
             propsData: {
-                value: 100
+                value: 100,
+                color: Color.parse('#123456')
             }
         })
 

package/src/components/colorpicker/ColorpickerAlphaSlider.vue

@@ -27,7 +27,7 @@
 
 <script>
 import Color from '../../utils/color'
-import Tooltip from '../tooltip/Tooltip'
+import Tooltip from '../tooltip/Tooltip.vue'
 
 export default {
     name: 'BColorpickerAlphaSlider',

package/src/components/colorpicker/index.js

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

package/src/components/datepicker/Datepicker.spec.js

@@ -377,13 +377,13 @@ describe('BDatepicker', () => {
             })
         })
 
-        it('renders a component with .dropdown-horizonal-timepicker class', () => {
-            const subject = wrapper.find('.dropdown-horizonal-timepicker')
+        it('renders a component with .dropdown-horizontal-timepicker class', () => {
+            const subject = wrapper.find('.dropdown-horizontal-timepicker')
             expect(subject.exists()).toBeTruthy()
         })
 
-        it('renders a component with .content-horizonal-timepicker class', () => {
-            const subject = wrapper.find('.content-horizonal-timepicker')
+        it('renders a component with .content-horizontal-timepicker class', () => {
+            const subject = wrapper.find('.content-horizontal-timepicker')
             expect(subject.exists()).toBeTruthy()
         })
 

package/src/components/datepicker/Datepicker.vue

@@ -14,9 +14,10 @@
             :aria-role="ariaRole"
             :append-to-body="appendToBody"
             append-to-body-copy-parent
-            @active-change="onActiveChange">
-            <template #trigger v-if="!inline">
-                <slot name="trigger">
+            @active-change="onActiveChange"
+            :trigger-tabindex="-1">
+            <template #trigger="props" v-if="!inline">
+                <slot name="trigger" v-bind="props">
                     <b-input
                         ref="input"
                         autocomplete="off"
@@ -45,7 +46,7 @@
                 :disabled="disabled"
                 :focusable="focusable"
                 custom
-                :class="{'dropdown-horizonal-timepicker': horizontalTimePicker}">
+                :class="{'dropdown-horizontal-timepicker': horizontalTimePicker}">
                 <div>
                     <header class="datepicker-header">
                         <template v-if="$slots.header !== undefined && $slots.header.length">
@@ -122,7 +123,7 @@
                     <div
                         v-if="!isTypeMonth"
                         class="datepicker-content"
-                        :class="{'content-horizonal-timepicker': horizontalTimePicker}">
+                        :class="{'content-horizontal-timepicker': horizontalTimePicker}">
                         <b-datepicker-table
                             v-model="computedValue"
                             :day-names="newDayNames"
@@ -213,15 +214,15 @@ import FormElementMixin from '../../utils/FormElementMixin'
 import { isMobile, getMonthNames, getWeekdayNames, matchWithGroups } from '../../utils/helpers'
 import config from '../../utils/config'
 
-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'
 
-import DatepickerTable from './DatepickerTable'
-import DatepickerMonth from './DatepickerMonth'
+import DatepickerTable from './DatepickerTable.vue'
+import DatepickerMonth from './DatepickerMonth.vue'
 
 const defaultDateFormatter = (date, vm) => {
     const targetDates = Array.isArray(date) ? date : [date]

package/src/components/datepicker/DatepickerTable.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import DatepickerTableRow from './DatepickerTableRow'
+import DatepickerTableRow from './DatepickerTableRow.vue'
 import { isDefined } from '../../utils/helpers'
 
 export default {

package/src/components/datepicker/index.js

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

package/src/components/datetimepicker/Datetimepicker.vue

@@ -94,8 +94,8 @@ import FormElementMixin from '../../utils/FormElementMixin'
 import { isMobile, matchWithGroups } from '../../utils/helpers'
 import config from '../../utils/config'
 
-import Datepicker from '../datepicker/Datepicker'
-import Timepicker from '../timepicker/Timepicker'
+import Datepicker from '../datepicker/Datepicker.vue'
+import Timepicker from '../timepicker/Timepicker.vue'
 
 const AM = 'AM'
 const PM = 'PM'

package/src/components/datetimepicker/index.js

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

package/src/components/dialog/Dialog.vue

@@ -72,9 +72,9 @@
 
 <script>
 import trapFocus from '../../directives/trapFocus'
-import Icon from '../icon/Icon'
-import Modal from '../modal/Modal'
-import Button from '../button/Button'
+import Icon from '../icon/Icon.vue'
+import Modal from '../modal/Modal.vue'
+import Button from '../button/Button.vue'
 import config from '../../utils/config'
 import { removeElement } from '../../utils/helpers'
 

package/src/components/dialog/index.js

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

package/src/components/dropdown/Dropdown.vue

@@ -7,7 +7,7 @@
     >
         <div
             v-if="!inline"
-            :tabindex="disabled ? false : 0"
+            :tabindex="disabled ? false : triggerTabindex"
             ref="trigger"
             class="dropdown-trigger"
             @click="onClick"
@@ -125,7 +125,11 @@ export default {
         },
         expanded: Boolean,
         appendToBody: Boolean,
-        appendToBodyCopyParent: Boolean
+        appendToBodyCopyParent: Boolean,
+        triggerTabindex: {
+            type: Number,
+            default: 0
+        }
     },
     data() {
         return {

package/src/components/dropdown/index.js

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

package/src/components/field/Field.spec.js

@@ -48,13 +48,14 @@ describe('BField', () => {
     })
 
     describe('Passing a message prop', () => {
-        const generateMountOptions = ({message}) => {
+        const generateMountOptions = ({message, slot}) => {
             return {
                 propsData: {message},
                 localVue,
                 slots: {
                     default: [BInput, '<button class="button">Button</button>']
-                }
+                },
+                scopedSlots: slot ? {message: slot} : {}
             }
         }
 
@@ -114,6 +115,14 @@ describe('BField', () => {
             const wrapper = shallowMount(BField, mountOptions)
             expect(wrapper.find('p.help').html().split('<br>').length).toEqual(5)
         })
+
+        it('messages are passed down to the message slot', () => {
+            const message = 'Some string message'
+            const slot = '<template #message="{ messages }">{{ messages }}</template>'
+            const mountOptions = generateMountOptions({message, slot})
+            const wrapper = shallowMount(BField, mountOptions)
+            expect(wrapper.find('p.help').text()).toEqual(message)
+        })
     })
 
     describe('managing groups', () => {

package/src/components/field/Field.vue

@@ -45,7 +45,11 @@
             class="help"
             :class="newType"
         >
-            <slot v-if="$slots.message" name="message"/>
+            <slot
+                v-if="$slots.message"
+                name="message"
+                :messages="formattedMessage"
+            />
             <template v-else>
                 <template v-for="(mess, i) in formattedMessage">
                     {{ mess }}
@@ -58,7 +62,7 @@
 
 <script>
 import config from '../../utils/config'
-import FieldBody from './FieldBody'
+import FieldBody from './FieldBody.vue'
 
 export default {
     name: 'BField',

package/src/components/field/index.js

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

package/src/components/icon/index.js

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

package/src/components/image/index.js

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

package/src/components/input/Input.spec.js

@@ -54,6 +54,17 @@ describe('BInput', () => {
         expect(counter.text()).toBe('4 / 100')
     })
 
+    it('display correct input value length when value contains some emoji', () => {
+        wrapper.setProps({
+            value: '😀2',
+            maxlength: 5
+        })
+        const counter = wrapper.find('small.counter')
+
+        expect(counter.exists()).toBeTruthy()
+        expect(counter.text()).toBe('2 / 5')
+    })
+
     it('no display counter when hasCounter property set for false', () => {
         wrapper.setProps({ maxlength: 100 })
         expect(wrapper.find('small.counter').exists()).toBeTruthy()

package/src/components/input/Input.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script>
-import Icon from '../icon/Icon'
+import Icon from '../icon/Icon.vue'
 import config from '../../utils/config'
 import FormElementMixin from '../../utils/FormElementMixin'
 
@@ -203,7 +203,7 @@ export default {
         */
         valueLength() {
             if (typeof this.computedValue === 'string') {
-                return this.computedValue.length
+                return Array.from(this.computedValue).length
             } else if (typeof this.computedValue === 'number') {
                 return this.computedValue.toString().length
             }
@@ -217,6 +217,9 @@ export default {
         */
         value(value) {
             this.newValue = value
+        },
+        type(type) {
+            this.newType = type
         }
     },
     methods: {

package/src/components/input/index.js

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

package/src/components/loading/index.js

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

package/src/components/menu/MenuItem.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import Icon from '../icon/Icon'
+import Icon from '../icon/Icon.vue'
 import config from '../../utils/config'
 
 export default {

package/src/components/menu/index.js

@@ -1,6 +1,6 @@
-import Menu from './Menu'
-import MenuList from './MenuList'
-import MenuItem from './MenuItem'
+import Menu from './Menu.vue'
+import MenuList from './MenuList.vue'
+import MenuItem from './MenuItem.vue'
 
 import { use, registerComponent } from '../../utils/plugins'
 

package/src/components/message/Message.vue

@@ -34,6 +34,7 @@
             </section>
             <b-progress
                 v-if="autoClose && progressBar"
+                class="auto-close-progress"
                 :value="remainingTime - 1"
                 :max="duration / 1000 - 1"
                 :type="type"
@@ -43,7 +44,7 @@
 </template>
 
 <script>
-import MessageMixin from '../../utils/MessageMixin.js'
+import MessageMixin from '../../utils/MessageMixin'
 
 export default {
     name: 'BMessage',

package/src/components/message/index.js

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

package/src/components/modal/Modal.vue

@@ -18,7 +18,7 @@
             <div class="modal-background" @click="cancel('outside')"/>
             <div
                 class="animation-content"
-                :class="{ 'modal-content': !hasModalCard }"
+                :class="[{ 'modal-content': !hasModalCard }, customContentClass]"
                 :style="customStyle">
                 <component
                     v-if="component"
@@ -116,6 +116,7 @@ export default {
             }
         },
         customClass: String,
+        customContentClass: [String, Array, Object],
         ariaRole: {
             type: String,
             validator: (value) => {

package/src/components/modal/index.js

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

package/src/components/navbar/NavBar.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import BNavbar from '@components/navbar/Navbar.vue'
+import BNavbar from '@components/navbar/Navbar'
 
 describe('BNavbar', () => {
     let wrapper

package/src/components/navbar/{NavbarBurger.spec.js → NavBarBurger.spec.js}

@@ -1,5 +1,5 @@
 import { shallowMount, mount } from '@vue/test-utils'
-import BNavbarBurger from '@components/navbar/NavbarBurger.vue'
+import BNavbarBurger from '@components/navbar/NavbarBurger'
 
 describe('BNavbarBurger', () => {
     let wrapper

package/src/components/navbar/NavBarItem.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils'
-import BNavbarItem from '@components/navbar/NavbarItem.vue'
+import BNavbarItem from '@components/navbar/NavbarItem'
 import sinon from 'sinon'
 
 let wrapper

package/src/components/navbar/NavbarDropdown.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils'
-import BNavbarDropdown from '@components/navbar/NavbarDropdown.vue'
+import BNavbarDropdown from '@components/navbar/NavbarDropdown'
 
 let wrapper
 

package/src/components/navbar/NavbarDropdown.vue

@@ -25,9 +25,18 @@
             <template v-if="label">{{ label }}</template>
             <slot v-else name="label" />
         </component>
+        <div
+            class="navbar-dropdown is-hidden-touch"
+            :class="{
+                'is-right': right,
+                'is-boxed': boxed,
+            }"
+        >
+            <slot />
+        </div>
         <div
             v-show="!collapsible || (collapsible && newActive)"
-            class="navbar-dropdown"
+            class="navbar-dropdown is-hidden-desktop"
             :class="{
                 'is-right': right,
                 'is-boxed': boxed,

package/src/components/navbar/index.js

@@ -1,6 +1,6 @@
-import Navbar from './Navbar'
-import NavbarItem from './NavbarItem'
-import NavbarDropdown from './NavbarDropdown'
+import Navbar from './Navbar.vue'
+import NavbarItem from './NavbarItem.vue'
+import NavbarDropdown from './NavbarDropdown.vue'
 
 import { use, registerComponent } from '../../utils/plugins'