1-MeetupView-script-setup

js-tasks-ru · Jan 8, 2025 · 294b556 · 294b556
1 parent 0974746
commit 294b556
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 118 deletions.
diff --git a/04-sfc/10-MeetupView-script-setup/MeetupAgenda.vue b/04-sfc/10-MeetupView-script-setup/MeetupAgenda.vue
@@ -1,27 +1,18 @@
-<script>
-import { defineComponent } from 'vue'
-import MeetupAgendaItem from './MeetupAgendaItem.vue'
+<script setup>
+import {defineProps} from 'vue'
 
-export default defineComponent({
-  name: 'MeetupAgenda',
-
-  components: {
-    MeetupAgendaItem,
-  },
-
-  props: {
-    agenda: {
-      type: Array,
-      required: true,
-    },
+defineProps({
+  agenda: {
+    type: Array,
+    required: true,
   },
 })
 </script>
 
 <template>
   <ul class="agenda">
     <li v-for="agendaItem in agenda" :key="agendaItem.id" class="agenda__item">
-      <MeetupAgendaItem :agenda-item="agendaItem" />
+      <MeetupAgendaItem :agenda-item="agendaItem"/>
     </li>
   </ul>
 </template>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupAgendaItem.vue b/04-sfc/10-MeetupView-script-setup/MeetupAgendaItem.vue
@@ -1,5 +1,5 @@
-<script>
-import { computed, defineComponent } from 'vue'
+<script setup>
+import { computed, defineProps } from 'vue'
 import { UiIcon } from '@shgk/vue-course-ui'
 
 const agendaItemDefaultTitles = {
@@ -24,29 +24,14 @@ const agendaItemIcons = {
   other: 'cal-sm',
 }
 
-export default defineComponent({
-  name: 'MeetupAgendaItem',
-
-  components: {
-    UiIcon,
-  },
-
-  props: {
-    agendaItem: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const icon = computed(() => agendaItemIcons[props.agendaItem.type])
-    const title = computed(() => agendaItemDefaultTitles[props.agendaItem.type])
-    return {
-      icon,
-      title,
-    }
+defineProps({
+  agendaItem: {
+    type: Object,
+    required: true,
   },
 })
+const icon = computed(() => agendaItemIcons[props.agendaItem.type])
+const title = computed(() => agendaItemDefaultTitles[props.agendaItem.type])
 </script>
 
 <template>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupCover.vue b/04-sfc/10-MeetupView-script-setup/MeetupCover.vue
@@ -1,26 +1,18 @@
-<script>
-import { computed, defineComponent } from 'vue'
+<script setup>
+import {computed, defineProps} from 'vue';
 
-export default defineComponent({
-  name: 'MeetupCover',
-
-  props: {
-    title: {
-      type: String,
-    },
-
-    image: {
-      type: String,
-    },
+const props = defineProps({
+  title: {
+    type: String,
   },
 
-  setup(props) {
-    const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image}')` } : undefined))
-    return {
-      bgStyle,
-    }
+  image: {
+    type: String,
   },
-})
+});
+
+const bgStyle = computed(() => (props.image ? {'--bg-url': `url('${props.image}')`} : undefined))
+
 </script>
 
 <template>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupDescription.vue b/04-sfc/10-MeetupView-script-setup/MeetupDescription.vue
@@ -1,15 +1,14 @@
-<script>
-import { defineComponent } from 'vue'
+<script setup>
+import {defineProps} from 'vue'
 
-export default defineComponent({
-  name: 'MeetupDescription',
-
-  props: {
-    description: {
-      type: String,
+defineProps(
+    {
+      description: {
+        type: String,
+      },
     },
-  },
-})
+);
+
 </script>
 
 <template>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupInfo.vue b/04-sfc/10-MeetupView-script-setup/MeetupInfo.vue
@@ -1,43 +1,30 @@
-<script>
-import { computed, defineComponent } from 'vue'
+<script setup>
+import { computed, defineProps } from 'vue'
 import { UiIcon } from '@shgk/vue-course-ui'
 
-export default defineComponent({
-  name: 'MeetupInfo',
-
-  components: {
-    UiIcon,
+const props = defineProps({
+  organizer: {
+    type: String,
   },
 
-  props: {
-    organizer: {
-      type: String,
-    },
-
-    place: {
-      type: String,
-    },
-
-    date: {
-      type: Number,
-    },
+  place: {
+    type: String,
   },
 
-  setup(props) {
-    const isoDate = computed(() => new Date(props.date).toISOString().slice(0, 10))
-    const localDate = computed(() =>
-      new Date(props.date).toLocaleString(navigator.language, {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      }),
-    )
-    return {
-      isoDate,
-      localDate,
-    }
+  date: {
+    type: Number,
   },
-})
+});
+
+const isoDate = computed(() => new Date(props.date).toISOString().slice(0, 10))
+const localDate = computed(() =>
+    new Date(props.date).toLocaleString(navigator.language, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    }),
+)
+
 </script>
 
 <template>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupView.vue b/04-sfc/10-MeetupView-script-setup/MeetupView.vue
@@ -1,19 +1,18 @@
-<script>
-import { defineComponent } from 'vue'
+<script setup>
+import { defineComponent, defineProps } from 'vue'
 import { UiAlert, UiContainer } from '@shgk/vue-course-ui'
 import MeetupAgenda from './MeetupAgenda.vue'
 import MeetupDescription from './MeetupDescription.vue'
 import MeetupCover from './MeetupCover.vue'
 import MeetupInfo from './MeetupInfo.vue'
 
-export default defineComponent({
-  name: 'MeetupView',
-
-  components: {
-    UiAlert,
-    UiContainer,
+defineProps({
+    meetup: {
+      type: Object,
+      required: true,
+    },
   },
-})
+)
 </script>
 
 <template>
@@ -24,18 +23,17 @@ export default defineComponent({
       <div class="meetup">
         <div class="meetup__content">
           <h2>Описание</h2>
-
-          <!-- Описание митапа -->
-
+          <meetup-cover :title="meetup.title" :image="meetup.image"/>
+          <meetup-description :description="meetup.description"/>
           <h2>Программа</h2>
-
-          <!-- Программа митапа -->
-          <!-- Или при пустой программе - сообщение "Программа пока пуста..." в UiAlert -->
-          <UiAlert></UiAlert>
+          <MeetupAgenda v-if="meetup.agenda && meetup.agenda.length > 0" :agenda="meetup.agenda"/>
+          <UiAlert v-if="meetup.agenda.length === 0">
+            Программа пока пуста...
+          </UiAlert>
         </div>
         <div class="meetup__aside">
           <!-- Краткая информация о митапе -->
-
+          <MeetupInfo :place="meetup.place" :organizer="meetup.organizer" :date="meetup.date"/>
           <div class="meetup__aside-buttons"></div>
         </div>
       </div>