commit: fca885e665094b8efcbc65a3f4ec9ba31679c4c2
parent 6e687c0663110853f48ee2acb2ffb29f7ff91ef7
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Apr 2021 13:23:16 +0300
resolve TODO VUE3
Diffstat:
8 files changed, 41 insertions(+), 46 deletions(-)
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
@@ -14,25 +14,25 @@
:checked="present"
:disabled="disabled"
class="opt"
- @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+ @change="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)"
/>
<div class="input color-input-field">
<input
:id="name + '-t'"
class="textColor unstyled"
type="text"
- :value="value || fallback"
+ :value="modelValue || fallback"
:disabled="!present || disabled"
- @input="$emit('input', $event.target.value)"
+ @input="$emit('update:modelValue', $event.target.value)"
>
<input
v-if="validColor"
:id="name"
class="nativeColor unstyled"
type="color"
- :value="value || fallback"
+ :value="modelValue || fallback"
:disabled="!present || disabled"
- @input="$emit('input', $event.target.value)"
+ @input="$emit('update:modelValue', $event.target.value)"
>
<div
v-if="transparentColor"
@@ -67,7 +67,7 @@ export default {
},
// Color value, should be required but vue cannot tell the difference
// between "property missing" and "property set to undefined"
- value: {
+ modelValue: {
required: false,
type: String,
default: undefined
@@ -93,16 +93,16 @@ export default {
},
computed: {
present () {
- return typeof this.value !== 'undefined'
+ return typeof this.modelValue !== 'undefined'
},
validColor () {
- return hex2rgb(this.value || this.fallback)
+ return hex2rgb(this.modelValue || this.fallback)
},
transparentColor () {
- return this.value === 'transparent'
+ return this.modelValue === 'transparent'
},
computedColor () {
- return this.value && this.value.startsWith('--')
+ return this.modelValue && this.modelValue.startsWith('--')
}
}
}
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
@@ -57,8 +57,7 @@ const EmojiInput = {
required: true,
type: Function
},
- // TODO VUE3: change to modelValue, change 'input' event to 'input'
- value: {
+ modelValue: {
/**
* Used for v-model
*/
@@ -137,8 +136,8 @@ const EmojiInput = {
return (this.wordAtCaret || {}).word || ''
},
wordAtCaret () {
- if (this.value && this.caret) {
- const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
+ if (this.modelValue && this.caret) {
+ const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
return word
}
}
@@ -225,13 +224,13 @@ const EmojiInput = {
}
},
replace (replacement) {
- const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
- this.$emit('input', newValue)
+ const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+ this.$emit('update:modelValue', newValue)
this.caret = 0
},
insert ({ insertion, keepOpen, surroundingSpace = true }) {
- const before = this.value.substring(0, this.caret) || ''
- const after = this.value.substring(this.caret) || ''
+ const before = this.modelValue.substring(0, this.caret) || ''
+ const after = this.modelValue.substring(this.caret) || ''
/* Using a bit more smart approach to padding emojis with spaces:
* - put a space before cursor if there isn't one already, unless we
@@ -259,7 +258,7 @@ const EmojiInput = {
after
].join('')
this.keepOpen = keepOpen
- this.$emit('input', newValue)
+ this.$emit('update:modelValue', newValue)
const position = this.caret + (insertion + spaceAfter + spaceBefore).length
if (!keepOpen) {
this.input.focus()
@@ -278,8 +277,8 @@ const EmojiInput = {
if (len > 0 || suggestion) {
const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
const replacement = chosenSuggestion.replacement
- const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
- this.$emit('input', newValue)
+ const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+ this.$emit('update:modelValue', newValue)
this.highlighted = 0
const position = this.wordAtCaret.start + replacement.length
@@ -455,7 +454,7 @@ const EmojiInput = {
this.showPicker = false
this.setCaret(e)
this.resize()
- this.$emit('input', e.target.value)
+ this.$emit('update:modelValue', e.target.value)
},
onClickInput (e) {
this.showPicker = false
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
@@ -15,7 +15,7 @@
class="opt exlcude-disabled"
type="checkbox"
:checked="present"
- @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+ @input="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)"
>
<label
v-if="typeof fallback !== 'undefined'"
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
@@ -14,7 +14,7 @@
:checked="present"
:disabled="disabled"
class="opt"
- @change="$emit('input', !present ? fallback : undefined)"
+ @change="$emit('update:modelValue', !present ? fallback : undefined)"
/>
<input
:id="name"
@@ -25,7 +25,7 @@
max="1"
min="0"
step=".05"
- @input="$emit('input', $event.target.value)"
+ @input="$emit('update:modelValue', $event.target.value)"
>
</div>
</template>
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
@@ -15,7 +15,7 @@
class="opt"
type="checkbox"
:checked="present"
- @input="$emit('input', !present ? fallback : undefined)"
+ @input="$emit('update:modelValue', !present ? fallback : undefined)"
>
<label
v-if="typeof fallback !== 'undefined'"
@@ -31,7 +31,7 @@
:max="max || hardMax || 100"
:min="min || hardMin || 0"
:step="step || 1"
- @input="$emit('input', $event.target.value)"
+ @input="$emit('update:modelValue', $event.target.value)"
>
<input
:id="name"
@@ -42,7 +42,7 @@
:max="hardMax"
:min="hardMin"
:step="step || 1"
- @input="$emit('input', $event.target.value)"
+ @input="$emit('update:modelValue', $event.target.value)"
>
</div>
</template>
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
@@ -63,7 +63,7 @@ const SettingsModalContent = {
const targetTab = this.$store.state.interface.settingsModalTargetTab
// We're being told to open in specific tab
if (targetTab) {
- const tabIndex = this.$refs.tabSwitcher.$slots.default.findIndex(elm => {
+ const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
return elm.data && elm.data.attrs['data-tab-name'] === targetTab
})
if (tabIndex >= 0) {
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
@@ -1,6 +1,7 @@
import { find } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import { defineAsyncComponent } from 'vue'
library.add(
faCircleNotch
@@ -22,8 +23,8 @@ const StatusPopover = {
}
},
components: {
- Status: () => import('../status/status.vue'),
- Popover: () => import('../popover/popover.vue')
+ Status: defineAsyncComponent(() => import('../status/status.vue')),
+ Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
},
methods: {
enter () {
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
@@ -1,10 +1,11 @@
+// eslint-disable-next-line no-unused
+import { h } from 'vue'
import { mapState } from 'vuex'
import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
import './tab_switcher.scss'
-// TODO VUE3: change data to props
-const findFirstUsable = (slots) => slots.findIndex(_ => _.data && _.data.attrs)
+const findFirstUsable = (slots) => slots.findIndex(_ => _.props)
export default {
name: 'TabSwitcher',
@@ -42,15 +43,14 @@ export default {
},
data () {
return {
- // TODO VUE3: add () after 'default'
- active: findFirstUsable(this.$slots.default)
+ active: findFirstUsable(this.$slots.default())
}
},
computed: {
activeIndex () {
// In case of controlled component
if (this.activeTab) {
- return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
+ return this.$slots.default().findIndex(slot => this.activeTab === slot.key)
} else {
return this.active
}
@@ -61,8 +61,7 @@ export default {
},
beforeUpdate () {
const currentSlot = this.slots()[this.active]
- // TODO VUE3: change data to props
- if (!currentSlot.data) {
+ if (!currentSlot.props) {
this.active = findFirstUsable(this.slots())
}
},
@@ -75,8 +74,7 @@ export default {
},
// DO NOT put it to computed, it doesn't work (caching?)
slots () {
- // TODO VUE3: add () at the end
- return this.$slots.default
+ return this.$slots.default()
},
setTab (index) {
if (typeof this.onSwitch === 'function') {
@@ -88,12 +86,10 @@ export default {
}
}
},
- // TODO VUE3: remove 'h' here
- render (h) {
+ render () {
const tabs = this.slots()
.map((slot, index) => {
- // TODO VUE3 change to slot.props
- const props = slot.data && slot.data.attrs
+ const props = slot.props
if (!props) return
const classesTab = ['tab', 'button-default']
const classesWrapper = ['tab-wrapper']
@@ -134,8 +130,7 @@ export default {
})
const contents = this.slots().map((slot, index) => {
- // TODO VUE3 change to slot.props
- const props = slot.data && slot.data.attrs
+ const props = slot.props
if (!props) return
const active = this.activeIndex === index
const classes = [ active ? 'active' : 'hidden' ]
