Skip to content
This repository was archived by the owner on Feb 22, 2023. It is now read-only.

Commit 43ac3de

Browse files
obulatobulat
authored
Typescriptify VModal components (#1926)
* Typescriptify VModal * Alphabetize
1 parent 52fa9a7 commit 43ac3de

File tree

7 files changed

+57
-54
lines changed

7 files changed

+57
-54
lines changed

‎src/assets/icons/openverse-logo-text.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/VHeaderOld/VLogoButtonOld.vue‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,19 @@
1111
:status="isFetching ? 'loading' : 'idle'"
1212
:auto-resize="autoResizeLogo"
1313
/>
14-
<OpenverseLogoText
14+
<svg
1515
v-show="!isHeaderScrolled"
16-
class="-ml-1 mt-1 me-3"
17-
:class="{
18-
'hidden sm:block md:hidden': isSearchRoute,
19-
}"
20-
:aria-hidden="true"
16+
class="-ml-1 mt-1 flex flex-shrink-0 flex-grow-0 me-3"
17+
:class="{ 'hidden sm:block md:hidden': isSearchRoute }"
18+
xmlns="http://www.w3.org/2000/svg"
2119
width="95"
2220
height="15"
23-
/>
21+
viewBox="0 0 95 15"
22+
aria-hidden="true"
23+
focusable="false"
24+
>
25+
<use :href="`${OpenverseLogoText}#logo`" />
26+
</svg>
2427
</VButton>
2528
</template>
2629
<script>
@@ -29,11 +32,11 @@ import { defineComponent } from '@nuxtjs/composition-api'
2932
import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
3033
import VButton from '~/components/VButton.vue'
3134
32-
import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg?inline'
35+
import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg'
3336
3437
export default defineComponent({
3538
name: 'VLogoButtonOld',
36-
components: { OpenverseLogoText, VLogoLoader, VButton },
39+
components: { VLogoLoader, VButton },
3740
props: {
3841
isFetching: {
3942
type: Boolean,
@@ -52,5 +55,8 @@ export default defineComponent({
5255
default: true,
5356
},
5457
},
58+
setup() {
59+
return { OpenverseLogoText }
60+
},
5561
})
5662
</script>

‎src/components/VModal/VModal.vue‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,22 @@
3636
</div>
3737
</template>
3838

39-
<script>
39+
<script lang="ts">
4040
import {
4141
defineComponent,
4242
ref,
4343
watch,
4444
reactive,
4545
computed,
4646
toRef,
47+
PropType,
48+
Ref,
4749
} from '@nuxtjs/composition-api'
4850
4951
import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
5052
53+
import type { ModalColorMode, ModalVariant } from '~/types/modal'
54+
5155
import VModalContent from '~/components/VModal/VModalContent.vue'
5256
5357
export default defineComponent({
@@ -106,9 +110,7 @@ export default defineComponent({
106110
* @default undefined
107111
*/
108112
initialFocusElement: {
109-
type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
110-
process.server ? Object : HTMLElement
111-
),
113+
type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
112114
default: undefined,
113115
},
114116
/**
@@ -122,9 +124,7 @@ export default defineComponent({
122124
* @default 'default'
123125
*/
124126
variant: {
125-
type: /** @type {import('@nuxtjs/composition-api').PropType<'default' | 'full' | 'two-thirds'>} */ (
126-
String
127-
),
127+
type: String as PropType<ModalVariant>,
128128
default: 'default',
129129
},
130130
/**
@@ -135,9 +135,7 @@ export default defineComponent({
135135
* @default 'light'
136136
*/
137137
mode: {
138-
type: /** @type {import('@nuxtjs/composition-api').PropType<'dark' | 'light'>} */ (
139-
String
140-
),
138+
type: String as PropType<ModalColorMode>,
141139
default: 'light',
142140
},
143141
/**
@@ -167,29 +165,24 @@ export default defineComponent({
167165
],
168166
setup(props, { emit }) {
169167
const visibleRef = toRef(props, 'visible')
170-
const internalVisibleRef =
171-
/** @type {import('@nuxtjs/composition-api').Ref<boolean>} */ (
172-
ref(props.visible === undefined ? false : props.visible)
173-
)
174-
const nodeRef = ref()
168+
const internalVisibleRef: Ref<boolean> = ref<boolean>(
169+
typeof props.visible === 'undefined' ? false : props.visible
170+
)
171+
const nodeRef = ref<null | HTMLElement>(null)
175172
176-
/** @type {import('@nuxtjs/composition-api').Ref<HTMLElement | undefined>} */
177-
const triggerContainerRef = ref()
173+
const triggerContainerRef = ref<HTMLElement | null>(null)
178174
179175
const triggerA11yProps = reactive({
180176
'aria-expanded': false,
181177
'aria-haspopup': 'dialog',
182178
})
183179
184180
const triggerRef = computed(
185-
() =>
186-
/** @type {HTMLElement | undefined} */ (
187-
triggerContainerRef.value?.firstChild
188-
)
181+
() => triggerContainerRef.value?.firstChild as HTMLElement | undefined
189182
)
190183
191184
watch(internalVisibleRef, (visible) => {
192-
triggerA11yProps['aria-expanded'] = !!visible
185+
triggerA11yProps['aria-expanded'] = visible
193186
})
194187
195188
/**
@@ -223,7 +216,7 @@ export default defineComponent({
223216
}
224217
225218
const onTriggerClick = () => {
226-
if (internalVisibleRef.value === true) {
219+
if (internalVisibleRef.value) {
227220
close()
228221
} else {
229222
open()

‎src/components/VModal/VModalContent.vue‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,22 @@
6767
</VTeleport>
6868
</template>
6969

70-
<script>
71-
import { defineComponent, toRefs, ref, computed } from '@nuxtjs/composition-api'
70+
<script lang="ts">
71+
import {
72+
defineComponent,
73+
toRefs,
74+
ref,
75+
computed,
76+
PropType,
77+
} from '@nuxtjs/composition-api'
7278
import { FocusTrap } from 'focus-trap-vue'
7379
import { Portal as VTeleport } from 'portal-vue'
7480
7581
import { useDialogContent } from '~/composables/use-dialog-content'
7682
import { warn } from '~/utils/console'
7783
84+
import type { ModalColorMode, ModalVariant } from '~/types/modal'
85+
7886
import VButton from '~/components/VButton.vue'
7987
import VIcon from '~/components/VIcon/VIcon.vue'
8088
import VLogoButtonOld from '~/components/VHeaderOld/VLogoButtonOld.vue'
@@ -93,9 +101,7 @@ export default defineComponent({
93101
required: true,
94102
},
95103
hide: {
96-
type: /** @type {import('@nuxtjs/composition-api').PropType<() => void>} */ (
97-
Function
98-
),
104+
type: Function as PropType<() => void>,
99105
required: true,
100106
},
101107
hideOnEsc: {
@@ -115,26 +121,19 @@ export default defineComponent({
115121
default: true,
116122
},
117123
triggerElement: {
118-
type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
119-
process.server ? Object : HTMLElement
120-
),
124+
type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
125+
default: null,
121126
},
122127
initialFocusElement: {
123-
type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
124-
process.server ? Object : HTMLElement
125-
),
126-
required: false,
128+
type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
129+
default: null,
127130
},
128131
variant: {
129-
type: /** @type {import('@nuxtjs/composition-api').PropType<'default' | 'full' | 'two-thirds'>} */ (
130-
String
131-
),
132+
type: String as PropType<ModalVariant>,
132133
default: 'default',
133134
},
134135
mode: {
135-
type: /** @type {import('@nuxtjs/composition-api').PropType<'dark' | 'light'>} */ (
136-
String
137-
),
136+
type: String as PropType<ModalColorMode>,
138137
default: 'light',
139138
},
140139
/**
@@ -152,11 +151,11 @@ export default defineComponent({
152151
}
153152
154153
const propsRefs = toRefs(props)
155-
const closeButton = ref()
154+
const closeButton = ref<InstanceType<typeof VButton> | null>(null)
156155
const initialFocusElement = computed(
157156
() => props.initialFocusElement || closeButton.value?.$el
158157
)
159-
const dialogRef = ref()
158+
const dialogRef = ref<HTMLElement | null>(null)
160159
const { onKeyDown, onBlur } = useDialogContent({
161160
dialogRef,
162161
visibleRef: propsRefs.visible,

‎src/components/VModal/VSidebarTarget.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,5 @@ import { PortalTarget as VTeleportTarget } from 'portal-vue'
99
export default defineComponent({
1010
name: 'VSidebarTarget',
1111
components: { VTeleportTarget },
12-
props: { element: { type: String, default: 'div' } },
1312
})
1413
</script>

‎src/types/modal.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export type ModalVariant = 'default' | 'full' | 'two-thirds'
2+
export type ModalColorMode = 'dark' | 'light'

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"src/components/VLogoLoader/**.vue",
6868
"src/components/VMediaInfo/**.vue",
6969
"src/components/VMediaTag/**.vue",
70+
"src/components/VModal/**.vue",
7071
"src/components/VPopover/**.vue",
7172
"src/components/VRecentSearches/**.vue",
7273
"src/components/VSkeleton/**.vue",
@@ -85,7 +86,6 @@
8586
"src/components/VHeader/VPageLinks.vue",
8687
"src/components/VHeader/VSearchBar/**.vue",
8788
"src/components/VImageDetails/VRelatedImages.vue",
88-
"src/components/VModal/VInputModal.vue",
8989
"src/pages/feedback.vue",
9090
"src/pages/search-help.vue",
9191

0 commit comments

Comments
 (0)