chore(lib): update Dropdown

- The `Dropdown` component is updated. Changes sufficient to render the documentation page of `Dropdown` are made. `Slider` is updated because it is used in the documentation page. - In `src/components/dropdown/Dropdown.vue`, - `v-model` binding conforms to Vue 3, - `value` prop --> `modelValue` - `input` event --> `update:modelValue` - `beforeDestroy` --> `beforeUnmount` - In `src/components/slider/Slider.vue` and `src/components/slider/SliderThumb.vue`, - `v-model` binding conforms to Vue 3, - `value` prop --> `modelValue` - `input` event --> `update:modelValue` - In `src/components/tooltip/Tooltip.vue`, - `beforeDestroy` --> `beforeUnmount` - In `src/directives/trapFocus.js`, - The directive properties conform to Vue 3, - `bind` --> `beforeMount` - `unbind` --> `unmounted` - Common, - Automatic ESLint fix is applied.
buefy · Jul 7, 2023 · a18bf8d · a18bf8d
1 parent 989a712
commit a18bf8d
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 61 deletions.
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
@@ -14,8 +14,9 @@
             @contextmenu.prevent="onContextMenu"
             @mouseenter="onHover"
             @focus.capture="onFocus"
-            aria-haspopup="true">
-            <slot name="trigger" :active="isActive"/>
+            aria-haspopup="true"
+        >
+            <slot name="trigger" :active="isActive" />
         </div>
 
         <transition :name="animation">
@@ -33,13 +34,15 @@
                 class="dropdown-menu"
                 :style="style"
                 :aria-hidden="!isActive"
-                v-trap-focus="trapFocus">
+                v-trap-focus="trapFocus"
+            >
                 <div
                     class="dropdown-content"
                     :role="ariaRole"
                     :aria-modal="!inline"
-                    :style="contentStyle">
-                    <slot/>
+                    :style="contentStyle"
+                >
+                    <slot />
                 </div>
             </div>
         </transition>
@@ -61,7 +64,7 @@ export default {
     },
     mixins: [ProviderParentMixin('dropdown')],
     props: {
-        value: {
+        modelValue: {
             type: [String, Number, Boolean, Object, Array, Function],
             default: null
         },
@@ -133,7 +136,7 @@ export default {
     },
     data() {
         return {
-            selected: this.value,
+            selected: this.modelValue,
             style: {},
             isActive: false,
             isHoverable: false,
@@ -175,7 +178,7 @@ export default {
         /**
         * When v-model is changed set the new selected item.
         */
-        value(value) {
+        modelValue(value) {
             this.selected = value
         },
 
@@ -237,7 +240,7 @@ export default {
                     this.$emit('change', this.selected)
                 }
             }
-            this.$emit('input', this.selected)
+            this.$emit('update:modelValue', this.selected)
             if (!this.multiple) {
                 this.isActive = !this.closeOnClick
                 if (this.hoverable && this.closeOnClick) {
@@ -341,13 +344,15 @@ export default {
                 dropdownWrapper.classList.forEach((item) => dropdownWrapper.classList.remove(item))
                 dropdownWrapper.classList.add('dropdown')
                 dropdownWrapper.classList.add('dropdown-menu-animation')
+                // TODO: the following test never becomes true on Vue 3.
+                //       I have no idea about the intention of it.
                 if (this.$vnode && this.$vnode.data && this.$vnode.data.staticClass) {
                     dropdownWrapper.classList.add(this.$vnode.data.staticClass)
                 }
                 this.rootClasses.forEach((item) => {
                     // skip position prop
                     if (item && typeof item === 'object') {
-                        for (let key in item) {
+                        for (const key in item) {
                             if (item[key]) {
                                 dropdownWrapper.classList.add(key)
                             }
@@ -395,7 +400,7 @@ export default {
             document.addEventListener('keyup', this.keyPress)
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (typeof window !== 'undefined') {
             document.removeEventListener('click', this.clickedOutside)
             document.removeEventListener('keyup', this.keyPress)

diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue
@@ -2,20 +2,24 @@
     <div
         class="b-slider"
         @click="onSliderClick"
-        :class="[size, type, rootClasses ]">
+        :class="[size, type, rootClasses ]"
+    >
         <div
             class="b-slider-track"
-            ref="slider">
+            ref="slider"
+        >
             <div
                 class="b-slider-fill"
-                :style="barStyle"/>
+                :style="barStyle"
+            />
             <template v-if="ticks">
                 <b-slider-tick
                     v-for="(val, key) in tickValues"
                     :key="key"
-                    :value="val"/>
+                    :value="val"
+                />
             </template>
-            <slot/>
+            <slot />
             <b-slider-thumb
                 :tooltip-always="tooltipAlways"
                 v-model="value1"
@@ -34,7 +38,8 @@
                 :aria-label="Array.isArray(ariaLabel) ? ariaLabel[0] : ariaLabel"
                 :aria-disabled="disabled"
                 @dragstart="onDragStart"
-                @dragend="onDragEnd" />
+                @dragend="onDragEnd"
+            />
             <b-slider-thumb
                 :tooltip-always="tooltipAlways"
                 v-model="value2"
@@ -54,7 +59,8 @@
                 :aria-label="Array.isArray(ariaLabel) ? ariaLabel[1] : ''"
                 :aria-disabled="disabled"
                 @dragstart="onDragStart"
-                @dragend="onDragEnd" />
+                @dragend="onDragEnd"
+            />
         </div>
     </div>
 </template>
@@ -63,7 +69,7 @@
 import SliderThumb from './SliderThumb.vue'
 import SliderTick from './SliderTick.vue'
 import config from '../../utils/config'
-import {bound} from '../../utils/helpers'
+import { bound } from '../../utils/helpers'
 
 export default {
     name: 'BSlider',
@@ -72,7 +78,7 @@ export default {
         [SliderTick.name]: SliderTick
     },
     props: {
-        value: {
+        modelValue: {
             type: [Number, Array],
             default: 0
         },
@@ -184,7 +190,7 @@ export default {
         },
         precision() {
             const precisions = [this.min, this.max, this.step].map((item) => {
-                let decimal = ('' + item).split('.')[1]
+                const decimal = ('' + item).split('.')[1]
                 return decimal ? decimal.length : 0
             })
             return Math.max(...precisions)
@@ -208,7 +214,7 @@ export default {
         /**
         * When v-model is changed set the new active step.
         */
-        value(value) {
+        modelValue(value) {
             this.setValues(value)
         },
         value1() {
@@ -218,10 +224,10 @@ export default {
             this.onInternalValueUpdate()
         },
         min() {
-            this.setValues(this.value)
+            this.setValues(this.modelValue)
         },
         max() {
-            this.setValues(this.value)
+            this.setValues(this.modelValue)
         }
     },
     methods: {
@@ -252,7 +258,7 @@ export default {
                 this.isThumbReversed = this.value1 > this.value2
             }
             if (!this.lazy || !this.dragging) {
-                this.emitValue('input')
+                this.emitValue('update:modelValue')
             }
             if (this.dragging) {
                 this.emitValue('dragging')
@@ -274,10 +280,10 @@ export default {
                 const diffSecond = Math.abs(targetValue - this.value2)
                 if (diffFirst <= diffSecond) {
                     if (diffFirst < this.step / 2) return
-                    this.$refs['button1'].setPosition(percent)
+                    this.$refs.button1.setPosition(percent)
                 } else {
                     if (diffSecond < this.step / 2) return
-                    this.$refs['button2'].setPosition(percent)
+                    this.$refs.button2.setPosition(percent)
                 }
             }
             this.emitValue('change')
@@ -295,7 +301,7 @@ export default {
             this.dragging = false
             this.$emit('dragend')
             if (this.lazy) {
-                this.emitValue('input')
+                this.emitValue('update:modelValue')
             }
         },
         emitValue(type) {
@@ -307,7 +313,7 @@ export default {
     created() {
         this.isThumbReversed = false
         this.isTrackClickDisabled = false
-        this.setValues(this.value)
+        this.setValues(this.modelValue)
     }
 }
 </script>
diff --git a/src/components/slider/SliderThumb.vue b/src/components/slider/SliderThumb.vue
@@ -2,12 +2,14 @@
     <div
         class="b-slider-thumb-wrapper"
         :class="{ 'is-dragging': dragging, 'has-indicator': indicator}"
-        :style="wrapperStyle">
+        :style="wrapperStyle"
+    >
         <b-tooltip
             :label="formattedValue"
             :type="type"
             :always="dragging || isFocused || tooltipAlways"
-            :active="!disabled && tooltip">
+            :active="!disabled && tooltip"
+        >
             <div
                 class="b-slider-thumb"
                 :tabindex="disabled ? false : 0"
@@ -21,7 +23,8 @@
                 @keydown.down.prevent="onLeftKeyDown"
                 @keydown.up.prevent="onRightKeyDown"
                 @keydown.home.prevent="onHomeKeyDown"
-                @keydown.end.prevent="onEndKeyDown">
+                @keydown.end.prevent="onEndKeyDown"
+            >
                 <span v-if="indicator">{{ formattedValue }}</span>
             </div>
         </b-tooltip>
@@ -39,7 +42,7 @@ export default {
     },
     inheritAttrs: false,
     props: {
-        value: {
+        modelValue: {
             type: Number,
             default: 0
         },
@@ -84,7 +87,7 @@ export default {
             startX: 0,
             startPosition: 0,
             newPosition: null,
-            oldValue: this.value
+            oldValue: this.modelValue
         }
     },
     computed: {
@@ -104,14 +107,14 @@ export default {
             return this.$parent.precision
         },
         currentPosition() {
-            return `${(this.value - this.min) / (this.max - this.min) * 100}%`
+            return `${(this.modelValue - this.min) / (this.max - this.min) * 100}%`
         },
         wrapperStyle() {
             return { left: this.currentPosition }
         },
         formattedValue() {
             if (typeof this.customFormatter !== 'undefined') {
-                return this.customFormatter(this.value)
+                return this.customFormatter(this.modelValue)
             }
 
             if (this.format === 'percent') {
@@ -120,10 +123,10 @@ export default {
                     {
                         style: 'percent'
                     }
-                ).format(((this.value - this.min)) / (this.max - this.min))
+                ).format(((this.modelValue - this.min)) / (this.max - this.min))
             }
 
-            return new Intl.NumberFormat(this.locale).format(this.value)
+            return new Intl.NumberFormat(this.locale).format(this.modelValue)
         }
     },
     methods: {
@@ -146,27 +149,27 @@ export default {
             }
         },
         onLeftKeyDown() {
-            if (this.disabled || this.value === this.min) return
+            if (this.disabled || this.modelValue === this.min) return
             this.newPosition = parseFloat(this.currentPosition) -
                 this.step / (this.max - this.min) * 100
             this.setPosition(this.newPosition)
             this.$parent.emitValue('change')
         },
         onRightKeyDown() {
-            if (this.disabled || this.value === this.max) return
+            if (this.disabled || this.modelValue === this.max) return
             this.newPosition = parseFloat(this.currentPosition) +
                 this.step / (this.max - this.min) * 100
             this.setPosition(this.newPosition)
             this.$parent.emitValue('change')
         },
         onHomeKeyDown() {
-            if (this.disabled || this.value === this.min) return
+            if (this.disabled || this.modelValue === this.min) return
             this.newPosition = 0
             this.setPosition(this.newPosition)
             this.$parent.emitValue('change')
         },
         onEndKeyDown() {
-            if (this.disabled || this.value === this.max) return
+            if (this.disabled || this.modelValue === this.max) return
             this.newPosition = 100
             this.setPosition(this.newPosition)
             this.$parent.emitValue('change')
@@ -194,7 +197,7 @@ export default {
         onDragEnd() {
             this.dragging = false
             this.$emit('dragend')
-            if (this.value !== this.oldValue) {
+            if (this.modelValue !== this.oldValue) {
                 this.$parent.emitValue('change')
             }
             this.setPosition(this.newPosition)
@@ -217,7 +220,7 @@ export default {
             const steps = Math.round(percent / stepLength)
             let value = steps * stepLength / 100 * (this.max - this.min) + this.min
             value = parseFloat(value.toFixed(this.precision))
-            this.$emit('input', value)
+            this.$emit('update:modelValue', value)
             if (!this.dragging && value !== this.oldValue) {
                 this.oldValue = value
             }

diff --git a/src/components/slider/SliderTick.vue b/src/components/slider/SliderTick.vue
@@ -2,9 +2,10 @@
     <div
         class="b-slider-tick"
         :class="{ 'is-tick-hidden': hidden }"
-        :style="getTickStyle(position)">
+        :style="getTickStyle(position)"
+    >
         <span v-if="$slots.default" class="b-slider-tick-label">
-            <slot/>
+            <slot />
         </span>
     </div>
 </template>
@@ -30,7 +31,7 @@ export default {
     },
     methods: {
         getTickStyle(position) {
-            return { 'left': position + '%' }
+            return { left: position + '%' }
         }
     },
     created() {