fix: type error

oruga-ui · Sep 29, 2023 · 89f3b15 · 89f3b15
1 parent ea7661c
commit 89f3b15
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/packages/oruga-next/src/components/modal/Modal.vue b/packages/oruga-next/src/components/modal/Modal.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, type Component, type PropType } from "vue";
 
 import BaseComponentMixin from "../../utils/BaseComponentMixin";
 import MatchMediaMixin from "../../utils/MatchMediaMixin";
@@ -33,7 +33,7 @@ export default defineComponent({
         /** Whether modal is active or not, use v-model:active to make it two-way binding */
         active: Boolean,
         /** Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close') */
-        component: [Object, Function],
+        component: [Object, Function] as PropType<Component>,
         /** Text content */
         content: String,
         /** @ignore */

diff --git a/packages/oruga-next/src/components/notification/Notification.vue b/packages/oruga-next/src/components/notification/Notification.vue
@@ -3,7 +3,7 @@ import MessageMixin from "../../utils/MessageMixin";
 import BaseComponentMixin from "../../utils/BaseComponentMixin";
 import { getValueByPath } from "../../utils/helpers";
 import { getOptions } from "../../utils/config";
-import { defineComponent } from "vue";
+import { defineComponent, type Component, type PropType } from "vue";
 
 /**
  * Bold notification blocks to alert your users of something
@@ -15,7 +15,6 @@ export default defineComponent({
     name: "ONotification",
     configField: "notification",
     mixins: [BaseComponentMixin, MessageMixin],
-    emits: ["update:active", "close"],
     props: {
         /**
          * Which position the notification will appear when programmatically
@@ -46,7 +45,7 @@ export default defineComponent({
             default: "fade",
         },
         /** Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close') */
-        component: [Object, Function],
+        component: [Object, Function] as PropType<Component>,
         /** Props to be binded to the injected component */
         props: Object,
         /** Events to be binded to the injected component */
@@ -73,6 +72,7 @@ export default defineComponent({
         variantClass: [String, Function, Array],
         wrapperClass: [String, Function, Array],
     },
+    emits: ["update:active", "close"],
     computed: {
         rootClasses() {
             return [
@@ -120,8 +120,8 @@ export default defineComponent({
                 v-if="closable"
                 :class="closeClasses"
                 type="button"
-                @click="close({ action: 'close', method: 'x' })"
-                :aria-label="ariaCloseLabel">
+                :aria-label="ariaCloseLabel"
+                @click="close({ action: 'close', method: 'x' })">
                 <o-icon
                     clickable
                     :pack="iconPack"
@@ -130,16 +130,16 @@ export default defineComponent({
                     :size="closeIconSize" />
             </button>
             <component
-                v-if="component"
                 v-bind="props"
-                v-on="events"
                 :is="component"
+                v-if="component"
+                v-on="events"
                 @close="close" />
-            <div :class="wrapperClasses" v-if="$slots.default || message">
+            <div v-if="$slots.default || message" :class="wrapperClasses">
                 <o-icon
+                    v-if="computedIcon"
                     :icon="computedIcon"
                     :pack="iconPack"
-                    v-if="computedIcon"
                     :class="iconClasses"
                     both
                     :size="iconSize"
@@ -149,7 +149,7 @@ export default defineComponent({
                         <span v-html="message" />
                     </template>
                     <template v-else>
-                        <slot v-bind:closeNotification="close" />
+                        <slot :close-notification="close" />
                     </template>
                 </div>
             </div>