Showing
12 changed files
with
25 additions
and
22 deletions
@@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
2 | import type { MovieInterface } from "~/interfaces/movie"; | 2 | import type { MovieInterface } from "~/interfaces/movie"; |
3 | // #region --Props--. | 3 | // #region --Props--. |
4 | import { useDateFormat } from "@vueuse/core"; | 4 | import { useDateFormat } from "@vueuse/core"; |
5 | -import { FilmIcon } from "lucide-vue-next"; | 5 | +import { FilmIcon as film } from "lucide-vue-next"; |
6 | // #endregion | 6 | // #endregion |
7 | 7 | ||
8 | // #region --Props--. | 8 | // #region --Props--. |
@@ -29,7 +29,7 @@ defineProps<{ | @@ -29,7 +29,7 @@ defineProps<{ | ||
29 | v-else | 29 | v-else |
30 | class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center" | 30 | class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center" |
31 | > | 31 | > |
32 | - <FilmIcon | 32 | + <film |
33 | :size="48" | 33 | :size="48" |
34 | class="text-gray-500" | 34 | class="text-gray-500" |
35 | /> | 35 | /> |
1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
2 | // #region --Import--. | 2 | // #region --Import--. |
3 | import type { MovieCommentInterface } from "~/interfaces/movieComment"; | 3 | import type { MovieCommentInterface } from "~/interfaces/movieComment"; |
4 | -import { MessageSquareIcon } from "lucide-vue-next"; | 4 | +import { MessageSquareIcon as message } from "lucide-vue-next"; |
5 | // #endregion | 5 | // #endregion |
6 | 6 | ||
7 | // #region --Props--. | 7 | // #region --Props--. |
@@ -68,7 +68,7 @@ watch( | @@ -68,7 +68,7 @@ watch( | ||
68 | v-else | 68 | v-else |
69 | class="text-center py-8 bg-gray-800 rounded-lg mt-10" | 69 | class="text-center py-8 bg-gray-800 rounded-lg mt-10" |
70 | > | 70 | > |
71 | - <MessageSquareIcon | 71 | + <message |
72 | :size="48" | 72 | :size="48" |
73 | class="mx-auto mb-3 text-gray-600" | 73 | class="mx-auto mb-3 text-gray-600" |
74 | /> | 74 | /> |
1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
2 | import type { MovieInterface } from "~/interfaces/movie"; | 2 | import type { MovieInterface } from "~/interfaces/movie"; |
3 | -import { SearchXIcon } from "lucide-vue-next"; | 3 | +import { SearchXIcon as searchx } from "lucide-vue-next"; |
4 | // #region --import--. | 4 | // #region --import--. |
5 | import { onBeforeUnmount, ref } from "vue"; | 5 | import { onBeforeUnmount, ref } from "vue"; |
6 | import { useTMDB } from "~/composables/tMDB"; | 6 | import { useTMDB } from "~/composables/tMDB"; |
@@ -164,7 +164,7 @@ onBeforeUnmount(() => { | @@ -164,7 +164,7 @@ onBeforeUnmount(() => { | ||
164 | v-else-if="searchQuery && !movies.length" | 164 | v-else-if="searchQuery && !movies.length" |
165 | class="text-center py-12" | 165 | class="text-center py-12" |
166 | > | 166 | > |
167 | - <SearchXIcon | 167 | + <searchx |
168 | :size="64" | 168 | :size="64" |
169 | class="mx-auto mb-4 text-gray-600" | 169 | class="mx-auto mb-4 text-gray-600" |
170 | /> | 170 | /> |
@@ -23,7 +23,7 @@ const emit = defineEmits<{ | @@ -23,7 +23,7 @@ const emit = defineEmits<{ | ||
23 | const initialState: Comment = { | 23 | const initialState: Comment = { |
24 | username: "", | 24 | username: "", |
25 | message: "", | 25 | message: "", |
26 | - rating: 5, | 26 | + rating: "5", |
27 | }; | 27 | }; |
28 | 28 | ||
29 | // Validation rules | 29 | // Validation rules |
@@ -85,7 +85,7 @@ function handleMessageEvent(event: string) { | @@ -85,7 +85,7 @@ function handleMessageEvent(event: string) { | ||
85 | 85 | ||
86 | <template> | 86 | <template> |
87 | <section> | 87 | <section> |
88 | - <VForm> | 88 | + <v-form> |
89 | <v-text-field | 89 | <v-text-field |
90 | v-model="formData.username" | 90 | v-model="formData.username" |
91 | :error-messages="v$.username.$errors.map((e) => e.$message) as readonly string[]" | 91 | :error-messages="v$.username.$errors.map((e) => e.$message) as readonly string[]" |
@@ -137,7 +137,7 @@ function handleMessageEvent(event: string) { | @@ -137,7 +137,7 @@ function handleMessageEvent(event: string) { | ||
137 | > | 137 | > |
138 | effacer | 138 | effacer |
139 | </v-btn> | 139 | </v-btn> |
140 | - </VForm> | 140 | + </v-form> |
141 | </section> | 141 | </section> |
142 | </template> | 142 | </template> |
143 | 143 |
1 | <script setup lang="ts"> | 1 | <script setup lang="ts"> |
2 | // #region --Props--. | 2 | // #region --Props--. |
3 | -import { FilmIcon } from "lucide-vue-next"; | 3 | +import { FilmIcon as film } from "lucide-vue-next"; |
4 | 4 | ||
5 | defineProps<{ | 5 | defineProps<{ |
6 | src: string; | 6 | src: string; |
@@ -22,7 +22,7 @@ defineProps<{ | @@ -22,7 +22,7 @@ defineProps<{ | ||
22 | v-else | 22 | v-else |
23 | class="aspect-[2/3] bg-gray-700 flex items-center justify-center" | 23 | class="aspect-[2/3] bg-gray-700 flex items-center justify-center" |
24 | > | 24 | > |
25 | - <FilmIcon | 25 | + <film |
26 | :size="64" | 26 | :size="64" |
27 | class="text-gray-500" | 27 | class="text-gray-500" |
28 | /> | 28 | /> |
1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
2 | import { useDebounceFn } from "@vueuse/core"; | 2 | import { useDebounceFn } from "@vueuse/core"; |
3 | // #region --import--. | 3 | // #region --import--. |
4 | -import { SearchIcon, XIcon } from "lucide-vue-next"; | 4 | +import { SearchIcon as search, XIcon as xicon } from "lucide-vue-next"; |
5 | import { ref } from "vue"; | 5 | import { ref } from "vue"; |
6 | // #endregion | 6 | // #endregion |
7 | 7 | ||
@@ -55,13 +55,13 @@ function handleClearSearchEvent() { | @@ -55,13 +55,13 @@ function handleClearSearchEvent() { | ||
55 | class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white" | 55 | class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white" |
56 | @click="handleClearSearchEvent" | 56 | @click="handleClearSearchEvent" |
57 | > | 57 | > |
58 | - <XIcon :size="20" /> | 58 | + <xicon :size="20" /> |
59 | </button> | 59 | </button> |
60 | <button | 60 | <button |
61 | v-else | 61 | v-else |
62 | class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400" | 62 | class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400" |
63 | > | 63 | > |
64 | - <SearchIcon :size="20" /> | 64 | + <search :size="20" /> |
65 | </button> | 65 | </button> |
66 | </div> | 66 | </div> |
67 | </section> | 67 | </section> |
1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
2 | // #region --Import--. | 2 | // #region --Import--. |
3 | -import Editor from "@tinymce/tinymce-vue"; | 3 | +import editor from "@tinymce/tinymce-vue"; |
4 | import { ref, watch } from "vue"; | 4 | import { ref, watch } from "vue"; |
5 | // #endregion | 5 | // #endregion |
6 | 6 | ||
@@ -77,7 +77,7 @@ watch( | @@ -77,7 +77,7 @@ watch( | ||
77 | 77 | ||
78 | <template> | 78 | <template> |
79 | <div> | 79 | <div> |
80 | - <Editor | 80 | + <editor |
81 | v-model="content" | 81 | v-model="content" |
82 | :api-key="runtimeConfig.public.apiTinyMceSecret" | 82 | :api-key="runtimeConfig.public.apiTinyMceSecret" |
83 | :init="init" | 83 | :init="init" |
@@ -4,7 +4,7 @@ import type { CreditsResponse } from "~/interfaces/credit"; | @@ -4,7 +4,7 @@ import type { CreditsResponse } from "~/interfaces/credit"; | ||
4 | import type { MovieInterface } from "~/interfaces/movie"; | 4 | import type { MovieInterface } from "~/interfaces/movie"; |
5 | import type { MovieCommentInterface } from "~/interfaces/movieComment"; | 5 | import type { MovieCommentInterface } from "~/interfaces/movieComment"; |
6 | // #region --import--. | 6 | // #region --import--. |
7 | -import { AlertTriangleIcon, ArrowLeftIcon } from "lucide-vue-next"; | 7 | +import { AlertTriangleIcon as triangle, ArrowLeftIcon as arrowleft } from "lucide-vue-next"; |
8 | import { computed, onMounted, ref } from "vue"; | 8 | import { computed, onMounted, ref } from "vue"; |
9 | import { useTMDB } from "~/composables/tMDB"; | 9 | import { useTMDB } from "~/composables/tMDB"; |
10 | import { Credit } from "~/models/credit"; | 10 | import { Credit } from "~/models/credit"; |
@@ -159,7 +159,7 @@ onMounted(() => { | @@ -159,7 +159,7 @@ onMounted(() => { | ||
159 | class="flex items-center text-gray-400 hover:text-white mb-8 transition-colors" | 159 | class="flex items-center text-gray-400 hover:text-white mb-8 transition-colors" |
160 | @click="navigateTo('/')" | 160 | @click="navigateTo('/')" |
161 | > | 161 | > |
162 | - <ArrowLeftIcon | 162 | + <arrowleft |
163 | :size="20" | 163 | :size="20" |
164 | class="mr-2" | 164 | class="mr-2" |
165 | /> | 165 | /> |
@@ -248,7 +248,7 @@ onMounted(() => { | @@ -248,7 +248,7 @@ onMounted(() => { | ||
248 | v-else | 248 | v-else |
249 | class="container mx-auto px-4 py-16 text-center" | 249 | class="container mx-auto px-4 py-16 text-center" |
250 | > | 250 | > |
251 | - <AlertTriangleIcon | 251 | + <triangle |
252 | :size="64" | 252 | :size="64" |
253 | class="mx-auto mb-4 text-red-500" | 253 | class="mx-auto mb-4 text-red-500" |
254 | /> | 254 | /> |
-
Please register or login to post a comment