zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

refactor: use defineModel

Browse source
This commit is contained in:
三咲智子 2023-01-06 23:46:36 +08:00
parent 85ac005570
commit cffcddefb9
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
9 changed files with 177 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/modal/ModalDialog.vue
View file

@ -2,9 +2,6 @@
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
export interface Props {
/** v-model dislog visibility */
modelValue: boolean
/**
* level of depth
*
@ -48,11 +45,13 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<{
/** v-model dialog visibility */
(event: 'update:modelValue', value: boolean): void
(event: 'close',): void
}>()
const visible = useVModel(props, 'modelValue', emit, { passive: true })
const { modelValue: visible } = defineModel<{
/** v-model dislog visibility */
modelValue: boolean
}>()
const deactivated = useDeactivated()
const route = useRoute()

29
components/modal/ModalMediaPreviewCarousel.vue
View file

@ -3,19 +3,20 @@ import { SwipeDirection } from '@vueuse/core'
import { useReducedMotion } from '@vueuse/motion'
import type { Attachment } from 'masto'
const props = withDefaults(defineProps<{ media: Attachment[]; threshold?: number; modelValue: number }>(), {
media: [] as any,
threshold: 20,
modelValue: 0,
})
const { media = [], threshold = 20 } = defineProps<{
media?: Attachment[]
threshold?: number
}>()
const emit = defineEmits<{
(e: 'update:modelValue', v: boolean): void
(event: 'close'): void
}>()
const { modelValue } = defineModel<{
modelValue: number
}>()
const target = ref()
const index = useVModel(props, 'modelValue', emit)
const animateTimeout = useTimeout(10)
const reduceMotion = useReducedMotion()
@ -28,15 +29,15 @@ const { isSwiping, lengthX, lengthY, direction } = useSwipe(target, {
passive: false,
onSwipeEnd(e, direction) {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
if (direction === SwipeDirection.RIGHT && Math.abs(distanceX.value) > props.threshold)
index.value = Math.max(0, index.value - 1)
if (direction === SwipeDirection.RIGHT && Math.abs(distanceX.value) > threshold)
modelValue.value = Math.max(0, modelValue.value - 1)
// eslint-disable-next-line @typescript-eslint/no-use-before-define
if (direction === SwipeDirection.LEFT && Math.abs(distanceX.value) > props.threshold)
index.value = Math.min(props.media.length - 1, index.value + 1)
if (direction === SwipeDirection.LEFT && Math.abs(distanceX.value) > threshold)
modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
// eslint-disable-next-line @typescript-eslint/no-use-before-define
if (direction === SwipeDirection.UP && Math.abs(distanceY.value) > props.threshold)
if (direction === SwipeDirection.UP && Math.abs(distanceY.value) > threshold)
emit('close')
},
})
@ -46,9 +47,9 @@ const distanceX = computed(() => {
return 0
if (!isSwiping.value || (direction.value !== SwipeDirection.LEFT && direction.value !== SwipeDirection.RIGHT))
return index.value * 100 * -1
return modelValue.value * 100 * -1
return (lengthX.value / width.value) * 100 * -1 + (index.value * 100) * -1
return (lengthX.value / width.value) * 100 * -1 + (modelValue.value * 100) * -1
})
const distanceY = computed(() => {