forked from AkkomaGang/akkoma-fe
resolve TODO VUE3
This commit is contained in:
parent
6e687c0663
commit
fca885e665
8 changed files with 41 additions and 46 deletions
|
@ -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('--')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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'"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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' ]
|
||||
|
|
Loading…
Reference in a new issue