buefy 0.9.13 → 0.9.17

package/src/components/colorpicker/ColorpickerHSLRepresentationTriangle.vue

@@ -0,0 +1,442 @@
+<template>
+    <svg :viewBox="viewBox" class="b-colorpicker-triangle">
+        <defs>
+            <linearGradient
+                :id="`cp-triangle-gradient-ligthness-${id}`"
+                x1="0"
+                y1="0"
+                x2="1"
+                y2="0"
+            >
+                <stop offset="0%" stop-color="#fff"/>
+                <stop offset="100%" stop-color="#000"/>
+            </linearGradient>
+            <linearGradient
+                :id="`cp-triangle-gradient-saturation-${id}`"
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+            >
+                <stop
+                    offset="0%"
+                    :stop-color="`hsl(${hue}deg, 100%, 50%)`"
+                    stop-opacity="1"
+                />
+                <stop
+                    offset="100%"
+                    :stop-color="`hsl(${hue}deg, 100%, 50%)`"
+                    stop-opacity="0"
+                />
+            </linearGradient>
+            <clipPath :id="`cp-triangle-clip-${id}`">
+                <path :d="haloPath" />
+            </clipPath>
+        </defs>
+        <g class="colorpicker-triangle-slider-hue">
+            <foreignObject
+                :x="0"
+                :y="0"
+                :width="size"
+                :height="size"
+                :clip-path="`url(#cp-triangle-clip-${id})`"
+            >
+                <div
+                    class="colorpicker-triangle-hue"
+                    @click="clickHue"
+                    @mousedown.prevent="startMouseCapture"
+                    @touchstart.prevent="startMouseCapture"
+                />
+            </foreignObject>
+            <g :style="`transform: rotate(${hue}deg)`">
+                <foreignObject
+                    :x="size / 2 - 4"
+                    :y="0"
+                    width="8"
+                    :height="thickness + 4"
+                >
+                    <div
+                        ref="hueCursor"
+                        class="hue-range-thumb"
+                        :style="`background-color: hsl(${hue}deg, 100%, 50%)`"
+                        role="slider"
+                        tabindex="0"
+                        aria-label="Hue"
+                        aria-valuemin="0"
+                        :aria-valuenow="hue"
+                        aria-valuemax="360"
+                        @click="clickHue"
+                        @keydown="hueKeyPress"
+                        @mousedown.prevent="startMouseCapture"
+                        @touchstart.prevent="startMouseCapture"
+                    />
+                </foreignObject>
+            </g>
+        </g>
+        <g
+            class="colorpicker-triangle-slider-sl"
+            :style="`transform: rotate(${hue}deg) translate(50%, 50%)`"
+            role="graphics-datagroup"
+            aria-datascales="lightness, saturation"
+        >
+            <path
+                :d="trianglePath"
+                :fill="`url(#cp-triangle-gradient-ligthness-${id})`"
+            />
+            <path
+                :d="trianglePath"
+                :fill="`url(#cp-triangle-gradient-saturation-${id})`"
+                style="mix-blend-mode: overlay;"
+                @click="clickSL"
+                @mousedown.prevent="startMouseCapture"
+                @touchstart.prevent="startMouseCapture"
+            />
+            <foreignObject
+                :x="((internalRadius - 3) * cos30) * (-lightness + 0.5) * 2 - 6"
+                :y="-internalRadius + (1 - saturation) * (internalRadius - 3) * 1.5 - 3"
+                width="12"
+                height="12"
+            >
+                <div
+                    ref="slCursor"
+                    class="sl-range-thumb"
+                    :style="{
+                        backgroundColor: `hsl(${hue}deg, ${saturation * 100}%, ${lightness * 100}%)`
+                    }"
+                    tabindex="0"
+                    :aria-datavalues="`${saturation * 100}%, ${lightness * 100}%`"
+                    @click="clickSL"
+                    @keydown="slKeyPress"
+                    @mousedown.prevent="startMouseCapture"
+                    @touchstart.prevent="startMouseCapture"
+                />
+            </foreignObject>
+        </g>
+    </svg>
+</template>
+
+<script>
+import Color from '../../utils/color'
+const cos30 = 0.86602540378
+const sin30 = 0.5
+
+let id = 0
+
+export default {
+    name: 'BColorpickerHSLRepresentationTriangle',
+    props: {
+        value: {
+            type: Object,
+            required: true,
+            validator(value) {
+                return typeof value.hue === 'number' &&
+                    typeof value.saturation === 'number' &&
+                    typeof value.lightness === 'number'
+            }
+        },
+        size: {
+            type: Number,
+            default: 200
+        },
+        thickness: {
+            type: Number,
+            default: 20
+        }
+    },
+    data() {
+        return {
+            id: id++,
+            hue: this.value.hue,
+            saturation: this.value.saturation,
+            lightness: this.value.lightness,
+            captureMouse: false,
+            captureType: 'hue',
+            clientOffset: {
+                cx: -1,
+                cy: -1,
+                width: 0,
+                height: 0
+            },
+            cos30,
+            sin30,
+            debounce: 0
+        }
+    },
+    computed: {
+        viewBox() {
+            const { size } = this
+            return `0 0 ${size} ${size}`
+        },
+        internalRadius() {
+            return this.size / 2 - this.thickness
+        },
+        haloPath() {
+            const { size, thickness } = this
+            const radius = size / 2 - 2 // 2px padding
+            const thicknessRadius = radius - thickness
+            const center = size / 2
+
+            return `M${center - radius} ${center}a${radius}  ${radius}  0 1 1 ${2 * radius} 0` +
+                `h${-thickness}` +
+                `a${-thicknessRadius}  ${thicknessRadius}  0 1 0 ${-2 * thicknessRadius} 0` +
+                `a${thicknessRadius}  ${thicknessRadius}  0 1 0 ${2 * thicknessRadius} 0` +
+                `h${thickness}` +
+                `a${radius}  ${radius}  0 1 1 ${-2 * radius} 0z`
+        },
+        trianglePath() {
+            const { size, thickness } = this
+            const radius = size - 4
+            const thicknessRadius = (radius - 2 * thickness) / 2
+
+            return `M0 ${-thicknessRadius}` +
+                `L${cos30 * thicknessRadius} ${sin30 * thicknessRadius}` +
+                `H${-cos30 * thicknessRadius}z`
+        }
+    },
+    watch: {
+        captureMouse(newValue, oldValue) {
+            if (oldValue === false && newValue !== false) {
+                const rect = this.$el.getBoundingClientRect()
+                // Caching offset
+                this.clientOffset.cx = rect.x + rect.width / 2
+                this.clientOffset.cy = rect.y + rect.height / 2
+                this.clientOffset.width = rect.width
+                this.clientOffset.height = rect.height
+            }
+        },
+        value: {
+            deep: true,
+            handler(newColor) {
+                const { hue, saturation, lightness } = newColor
+
+                window.clearTimeout(this.debounce)
+                this.debounce = window.setTimeout(() => {
+                    this.hue = hue
+                    this.saturation = saturation
+                    this.lightness = lightness
+                }, 200)
+            }
+        }
+    },
+    methods: {
+        increaseHue(value = 1) {
+            this.hue = (this.hue + value) % 360
+        },
+        decreaseHue(value = 1) {
+            this.hue = (360 + this.hue - value) % 360
+        },
+        increaseSaturation(value = 0.01) {
+            this.saturation = Math.min(1, Math.max(0, this.saturation + value))
+            this.lightness = Math.min(
+                0.5 + (1 - this.saturation) * 0.5,
+                Math.max(
+                    0.5 - (1 - this.saturation) * 0.5,
+                    this.lightness
+                )
+            )
+        },
+        decreaseSaturation(value = 0.01) {
+            this.saturation = Math.min(1, Math.max(0, this.saturation - value))
+            this.lightness = Math.min(
+                0.5 + (1 - this.saturation) * 0.5,
+                Math.max(
+                    0.5 - (1 - this.saturation) * 0.5,
+                    this.lightness
+                )
+            )
+        },
+        increaseLightness(value = 0.01) {
+            this.lightness = Math.min(
+                0.5 + (1 - this.saturation) * 0.5,
+                Math.max(
+                    0.5 - (1 - this.saturation) * 0.5,
+                    this.lightness + value
+                )
+            )
+        },
+        decreaseLightness(value = 0.01) {
+            this.lightness = Math.min(
+                0.5 + (1 - this.saturation) * 0.5,
+                Math.max(
+                    0.5 - (1 - this.saturation) * 0.5,
+                    this.lightness - value
+                )
+            )
+        },
+        hueKeyPress(event) {
+            let handled = false
+            switch (event.key) {
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    this.increaseHue()
+                    handled = true
+                    break
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    this.decreaseHue()
+                    handled = true
+                    break
+                case 'Home':
+                    this.increaseHue(360 - this.hue)
+                    handled = true
+                    break
+                case 'End':
+                    this.decreaseHue(this.hue)
+                    handled = true
+                    break
+                case 'PageUp':
+                    this.increaseHue(60 - this.hue % 60)
+                    handled = true
+                    break
+                case 'PageDown':
+                    this.decreaseHue(60 + this.hue % 60)
+                    handled = true
+                    break
+            }
+            if (handled) {
+                event.preventDefault()
+                event.stopPropagation()
+                this.emitColor()
+            }
+        },
+        slKeyPress(event) {
+            let handled = false
+            switch (event.key) {
+                case 'ArrowRight':
+                    this.decreaseLightness()
+                    handled = true
+                    break
+                case 'ArrowUp':
+                    this.increaseSaturation()
+                    handled = true
+                    break
+                case 'ArrowLeft':
+                    this.increaseLightness()
+                    handled = true
+                    break
+                case 'ArrowDown':
+                    this.decreaseSaturation()
+                    handled = true
+                    break
+                case 'Home':
+                    this.increaseLightness(1 - this.lightness)
+                    handled = true
+                    break
+                case 'End':
+                    this.decreaseLightness(this.lightness)
+                    handled = true
+                    break
+                case 'PageUp':
+                    this.increaseSaturation(1 - this.saturation)
+                    handled = true
+                    break
+                case 'PageDown':
+                    this.decreaseSaturation(this.saturation)
+                    handled = true
+                    break
+            }
+            if (handled) {
+                event.preventDefault()
+                event.stopPropagation()
+                this.emitColor()
+            }
+        },
+        clickHue(event) {
+            this.startMouseCapture(event)
+            this.trackMouse(event)
+            this.stopMouseCapture(event)
+            this.$refs.hueCursor.focus()
+        },
+        clickSL(event) {
+            this.startMouseCapture(event)
+            this.trackMouse(event)
+            this.stopMouseCapture(event)
+            this.$refs.slCursor.focus()
+        },
+        trackMouse(event) {
+            if (this.captureMouse === false) {
+                return
+            }
+            event.preventDefault()
+            event.stopPropagation()
+
+            let [mouseX, mouseY] = [0, 0]
+            if (typeof event.touches !== 'undefined' && event.touches.length) {
+                [mouseX, mouseY] = [event.touches[0].clientX, event.touches[0].clientY]
+            } else {
+                [mouseX, mouseY] = [event.clientX, event.clientY]
+            }
+            const angle = Math.atan2(
+                mouseY - this.clientOffset.cy,
+                mouseX - this.clientOffset.cx
+            )
+
+            if (this.captureType === 'sl') {
+                const d = Math.sqrt(
+                    Math.pow(mouseX - this.clientOffset.cx, 2) +
+                    Math.pow(mouseY - this.clientOffset.cy, 2)
+                )
+                const ratio = this.size / this.clientOffset.width
+                const dx = d * Math.cos(angle - this.hue / 180 * Math.PI) * ratio
+                const dy = d * Math.sin(angle - this.hue / 180 * Math.PI) * ratio
+                const radius = this.internalRadius
+                const saturation = 1 - (Math.min(
+                    radius * sin30,
+                    Math.max(
+                        -radius,
+                        dy
+                    )
+                ) + radius) / (radius + radius * sin30)
+                const lightness = (Math.min(
+                    (radius * cos30) * (1 - saturation),
+                    Math.max(
+                        (-radius * cos30) * (1 - saturation),
+                        dx
+                    )
+                ) + radius * cos30) / (radius * 2 * cos30)
+
+                this.saturation = Math.round(saturation * 1000) / 1000
+                this.lightness = 1 - Math.round(lightness * 1000) / 1000
+            } else {
+                this.hue = Math.round(angle / Math.PI * 180 + 90) % 360
+            }
+            this.emitColor()
+        },
+        startMouseCapture(event) {
+            event.stopPropagation()
+
+            this.captureMouse = true
+            if (event.target.closest('.colorpicker-triangle-slider-sl') !== null) {
+                this.captureType = 'sl'
+            } else {
+                this.captureType = 'hue'
+            }
+        },
+        stopMouseCapture(event) {
+            if (this.captureMouse !== false) {
+                event.preventDefault()
+                event.stopPropagation()
+                this.$refs[this.captureType === 'sl' ? 'slCursor' : 'hueCursor'].focus()
+            }
+            this.captureMouse = false
+        },
+        emitColor() {
+            const { hue, saturation, lightness } = this
+            this.$emit('input', Color.fromHSL(hue, saturation, lightness))
+            window.clearTimeout(this.debounce)
+        }
+    },
+    mounted() {
+        window.addEventListener('mousemove', this.trackMouse)
+        window.addEventListener('touchmove', this.trackMouse, { passive: false })
+        window.addEventListener('mouseup', this.stopMouseCapture)
+        window.addEventListener('touchend', this.stopMouseCapture)
+    },
+    beforeDestroy() {
+        window.removeEventListener('mousemove', this.trackMouse)
+        window.removeEventListener('touchmove', this.trackMouse)
+        window.removeEventListener('mouseup', this.stopMouseCapture)
+        window.removeEventListener('touchend', this.stopMouseCapture)
+    }
+}
+</script>

package/src/components/colorpicker/__snapshots__/ColorPickerHSLRepresentationSquare.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BColorpickerHSLRepresentationSquare render correctly 1`] = `
+<div class="b-colorpicker-square" style="width: 200px;">
+    <div class="colorpicker-square-slider-hue">
+        <div role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuemax="359" class="hue-range-thumb" style="left: 36.4px; top: 190px; width: 18px;"></div>
+    </div>
+    <div aria-datascales="lightness, saturation" class="colorpicker-square-slider-sl" style="margin: 20px;">
+        <div role="slider" tabindex="0" aria-datavalues="67%, 20%" class="sl-range-thumb" style="left: 67%; top: 80%;"></div>
+    </div>
+</div>
+`;

package/src/components/colorpicker/__snapshots__/Colorpicker.spec.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BColorpicker render correctly 1`] = `
+<div class="colorpicker control">
+    <b-dropdown-stub maxheight="200" triggers="click" mobilemodal="true" ariarole="dialog" animation="fade" trapfocus="true" closeonclick="true" canclose="true" appendtobodycopyparent="true" aria-modal="true">
+        <b-dropdown-item-stub custom="true" focusable="true" ariarole="" class="">
+            <div>
+                <header class="colorpicker-header">
+                    <!---->
+                </header>
+                <div class="colorpicker-content">
+                    <b-colorpicker-h-s-l-representation-triangle-stub value="#000000" size="200" thickness="20"></b-colorpicker-h-s-l-representation-triangle-stub>
+                </div>
+            </div>
+            <footer class="colorpicker-footer">
+                <!---->
+                <b-field-stub grouped="true" addons="true" class="colorpicker-fields">
+                    <b-field-stub label="R" horizontal="true" addons="true">
+                        <b-input-stub size="is-small" usehtml5validation="true" statusicon="true" value="0" type="number" hascounter="true" customclass="" aria-label="Red"></b-input-stub>
+                    </b-field-stub>
+                    <b-field-stub label="G" horizontal="true" addons="true">
+                        <b-input-stub size="is-small" usehtml5validation="true" statusicon="true" value="0" type="number" hascounter="true" customclass="" aria-label="Green"></b-input-stub>
+                    </b-field-stub>
+                    <b-field-stub label="B" horizontal="true" addons="true">
+                        <b-input-stub size="is-small" usehtml5validation="true" statusicon="true" value="0" type="number" hascounter="true" customclass="" aria-label="Blue"></b-input-stub>
+                    </b-field-stub>
+                </b-field-stub>
+            </footer>
+        </b-dropdown-item-stub>
+    </b-dropdown-stub>
+</div>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BColorpickerAlphaSlider render correctly 1`] = `
+<div class="b-colorpicker-alpha-slider" style="background-size: 100% 100%, 1em 1em, 1em 1em;">
+    <div role="slider" tabindex="0" aria-label="Tranparency" aria-valuemin="0" aria-valuenow="61" aria-valuemax="100" class="alpha-range-thumb" style="left: 61%;">
+        <b-tooltip-stub active="true" type="is-primary" label="61%" position="is-top" triggers="hover" size="is-medium" animated="true" animation="fade" autoclose="true">
+            &nbsp;
+        </b-tooltip-stub>
+    </div>
+</div>
+`;

package/src/components/colorpicker/__snapshots__/ColorpickerHSLRepresentationTriangle.spec.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BColorpickerHSLRepresentationTriangle render correctly 1`] = `
+<svg viewBox="0 0 200 200" class="b-colorpicker-triangle">
+    <defs>
+        <linearGradient id="cp-triangle-gradient-ligthness-0" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stop-color="#fff"></stop>
+            <stop offset="100%" stop-color="#000"></stop>
+        </linearGradient>
+        <linearGradient id="cp-triangle-gradient-saturation-0" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="hsl(210deg, 100%, 50%)" stop-opacity="1"></stop>
+            <stop offset="100%" stop-color="hsl(210deg, 100%, 50%)" stop-opacity="0"></stop>
+        </linearGradient>
+        <clipPath id="cp-triangle-clip-0">
+            <path d="M2 100a98  98  0 1 1 196 0h-20a-78  78  0 1 0 -156 0a78  78  0 1 0 156 0h20a98  98  0 1 1 -196 0z"></path>
+        </clipPath>
+    </defs>
+    <g class="colorpicker-triangle-slider-hue">
+        <foreignObject x="0" y="0" width="200" height="200" clip-path="url(#cp-triangle-clip-0)">
+            <div class="colorpicker-triangle-hue"></div>
+        </foreignObject>
+        <g style="transform: rotate(210deg);">
+            <foreignObject x="96" y="0" width="8" height="24">
+                <div role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuenow="210" aria-valuemax="360" class="hue-range-thumb"></div>
+            </foreignObject>
+        </g>
+    </g>
+    <g role="graphics-datagroup" aria-datascales="lightness, saturation" class="colorpicker-triangle-slider-sl" style="transform: rotate(210deg) translate(50%, 50%);">
+        <path d="M0 -78L67.54998149484 39H-67.54998149484z" fill="url(#cp-triangle-gradient-ligthness-0)"></path>
+        <path d="M0 -78L67.54998149484 39H-67.54998149484z" fill="url(#cp-triangle-gradient-saturation-0)" style="mix-blend-mode: overlay;"></path>
+        <foreignObject x="34.010373654636" y="-44.885000000000005" width="12" height="12">
+            <div tabindex="0" aria-datavalues="67%, 20%" class="sl-range-thumb"></div>
+        </foreignObject>
+    </g>
+</svg>
+`;

package/src/components/colorpicker/index.js

@@ -0,0 +1,17 @@
+import Colorpicker from './Colorpicker'
+
+import { use, registerComponent } from '../../utils/plugins'
+
+const Plugin = {
+    install(Vue) {
+        registerComponent(Vue, Colorpicker)
+    }
+}
+
+use(Plugin)
+
+export default Plugin
+
+export {
+    Colorpicker as BColorpicker
+}

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

@@ -150,6 +150,32 @@ describe('BDatepickerTableRow', () => {
         expect(wrapper.emitted()['select']).toBeTruthy()
     })
 
+    it('emit clicked week and year', async () => {
+        const wrapper = shallowMount(BDatepickerTableRow, {
+            propsData: {
+                ...Object.assign(propsData, {
+                    showWeekNumber: true,
+                    rulesForFirstWeek: 1,
+                    weekNumberClickable: true
+                })
+            },
+            provide: {
+                $datepicker: {
+                    $emit(event) {
+                        wrapper.vm.$emit(event, arguments[1], arguments[2])
+                    }
+                }
+            }
+        })
+        const weekDate = propsData.week[6]
+        const $weekButton = wrapper.find('.is-week-number')
+        $weekButton.trigger('click')
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.emitted()['week-number-click']).toBeTruthy()
+        expect(wrapper.emitted()['week-number-click'][0].sort()).toEqual([weekDate.getDate(), weekDate.getFullYear()].sort())
+    })
+
     it('emit focused date', async () => {
         const [y, m, d] = [2019, 4, 4]
         let day = newDate(y, m, d)

package/src/components/datepicker/DatepickerTableRow.vue

@@ -5,7 +5,7 @@
             :class="{'is-clickable': weekNumberClickable }"
             v-if="showWeekNumber"
             @click.prevent="clickWeekNumber(getWeekNumber(week[6]))">
-            <span>{{ getWeekNumber(week[6]) }}</span>
+            <span>{{ getWeekNumber(week[6]).week }}</span>
         </a>
         <template v-for="(weekDay, index) in week">
             <a
@@ -141,12 +141,11 @@ export default {
                 resYear = mom.getFullYear()
                 resWeek = week
             }
-
-            return resWeek
+            return {week: resWeek, year: resYear}
         },
-        clickWeekNumber(week) {
+        clickWeekNumber(weekData) {
             if (this.weekNumberClickable) {
-                this.$datepicker.$emit('week-number-click', week)
+                this.$datepicker.$emit('week-number-click', weekData.week, weekData.year)
             }
         },
         /*

package/src/components/datetimepicker/Datetimepicker.vue

@@ -12,6 +12,8 @@
         :editable="editable"
         :expanded="expanded"
         :close-on-click="false"
+        :first-day-of-week="firstDayOfWeek"
+        :rules-for-first-week="rulesForFirstWeek"
         :date-formatter="defaultDatetimeFormatter"
         :date-parser="defaultDatetimeParser"
         :min-date="minDate"
@@ -116,6 +118,20 @@ export default {
         placeholder: String,
         horizontalTimePicker: Boolean,
         disabled: Boolean,
+        firstDayOfWeek: {
+            type: Number,
+            default: () => {
+                if (typeof config.defaultFirstDayOfWeek === 'number') {
+                    return config.defaultFirstDayOfWeek
+                } else {
+                    return 0
+                }
+            }
+        },
+        rulesForFirstWeek: {
+            type: Number,
+            default: () => 4
+        },
         icon: String,
         iconRight: String,
         iconRightClickable: Boolean,
@@ -348,7 +364,7 @@ export default {
                         datetimeGroups.hour < 24 &&
                         datetimeGroups.minute &&
                         datetimeGroups.minute >= 0 &&
-                        datetimeGroups.minute < 59
+                        datetimeGroups.minute <= 59
                     ) {
                         const d = new Date(
                             datetimeGroups.year,

package/src/components/dropdown/Dropdown.vue

@@ -179,6 +179,7 @@ export default {
         */
         isActive(value) {
             this.$emit('active-change', value)
+            this.handleScroll()
             if (this.appendToBody) {
                 this.$nextTick(() => {
                     this.updateAppendToBody()
@@ -187,6 +188,18 @@ export default {
         }
     },
     methods: {
+        handleScroll() {
+            if (typeof window === 'undefined') return
+
+            if (this.isMobileModal) {
+                if (this.isActive) {
+                    document.documentElement.classList.add('is-clipped-touch')
+                } else {
+                    document.documentElement.classList.remove('is-clipped-touch')
+                }
+            }
+        },
+
         /**
          * Click listener from DropdownItem.
          *   1. Set new selected item.