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