sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

resolve TODO VUE3

Browse source
This commit is contained in:
Henry Jameson 2021-04-25 13:23:16 +03:00
parent 6e687c0663
commit fca885e665
8 changed files with 41 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/color_input/color_input.vue
View file

@ -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('--')
}
}
}

23
src/components/emoji_input/emoji_input.js
View file

@ -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

2
src/components/font_control/font_control.vue
View file

@ -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'"

4
src/components/opacity_input/opacity_input.vue
View file

@ -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>

6
src/components/range_input/range_input.vue
View file

@ -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>

2
src/components/settings_modal/settings_modal_content.js
View file

@ -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) {

5
src/components/status_popover/status_popover.js
View file

@ -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 () {

25
src/components/tab_switcher/tab_switcher.jsx
View file

@ -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' ]